LION MEDIAの見出しをCSSの追加でカスタマイズ

ブログカスタマイズ

当ブログはFITさんのLION MEDIAというテーマを利用しています。 表示速度も速く、AMP対応、SEO最適化、レスポンシブ対応、その他にも様々な機能を備えていて、ここまでのものが無料で使えていいんだろうか? と思うほど大満足なテーマなのですが、やはり物足りない部分もあります。 その中の一つが「見出し」部分です。 デザインが気に入らないというのではなく、同じテーマを使っているブログと差別化を図りたいという理由から「見出し」を変更したいと思ったわけです。 LION MEDIAのカスタマイズ記事も見つからなかったので、備忘録として記事にしておこうと思います。

 

2018年2月18日追記 LION MEDIAのVer.2.0.0リリースにともない、見出しのバリエーションが増え、CSSを追記しなくてもカスタマイズが可能になりました。 LION MEDIAの見出しの変更方法は「外観」→「カスタマイズ」→「投稿スキン設定(LION用)」からカスタマイズができます。 以下の記事はLION MEDIAの見出しのバリエーションとは違うものにしたい場合に参考にしてください。

見出しをカスタマイズする方法

LION MEDIAに実装されている見出しのバリエーションに満足できない場合は、CSSを追加します。 変更する際は、

  • 子テーマの「追加CSS」にCSSを追加する方法
  • 投稿スキン設定(LION用)の「オリジナル見出しを入力」にCSSを追加する方法

の2つのパターンがあります。 親テーマの「追加CSS」を変更していってもいいのですが、親テーマの更新があった際に消えてしまうのでおすすめしません。 上記の2つのパターンのどちらかでCSSをカスタマイズしましょう。

まず最初に、見出しのCSSを追加する前に「投稿スキン設定」という項目をクリック。 「スタイル選択」を[00.オリジナル見出しを作成]にしておいてください CSSのカスタマイズする場所は、上の画像の[オリジナル見出しのCSSを入力]から変更するか、WordPressダッシュボードの[外観]→[カスタマイズ]→[追加CSS]のどちらかに見出しのCSSを入力します。

見出しのデザインを変更する

私は見出し2、見出し3、見出し4くらいしか使わないのでその部分のみ変更しました。 最初は単純にh2,h3,h4のCSSを編集すればいいのだろうと思いCSSを追加したのですが、サイドバーのタイトル部分もデザインが変わってしまいました。 投稿記事の見出しのみを変更したいのでサイトの検証をして投稿記事のclass属性を調べます。 LION MEDIAの見出しを変更する ブラウザがChromeの場合[win:右クリック→検証]、[mac:control+クリック→検証] Firefoxの場合は[win:右クリック→要素を調査]、[mac:control+クリック→要素を調査] 確認をすると投稿記事部分のclass属性はclass=”content”となっていますので、 例えば見出し2のデザインを変更する場合ならば「.content h2」のように記述することで投稿記事の見出しのみ変更可能になります。 ※LION BLOGの場合はclass属性が違うかもしれませんので、サイトの検証をして確認してみてください。 見出しのデザインについては、サルワカさんのサイトを参考にさせていただきました。

上記リンク先で、気に入った見出しデザインの「コードを表示」ボタンを押すとCSSコードが表示されます。それをコピーし、「追加 CSS」にペーストします。 h2の見出しを変更したいのであれば「h1」の部分を「.content h2」のように修正します。

デザインの変更手順

実際に「見出し2」のデザインを例に変更してみたいと思います。 LION MEDIAの見出しを変更する 上記画像の「LION MEDIAの子テーマインストール手順」という部分がCSSに手を加えていない「見出し2」の状態です。 「投稿スキン設定」の[オリジナル見出しのCSSを入力]か、「外観」→「カスタマイズ」→「追加CSS」へ下記のCSSを追加します。

.content h2{
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #191919;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}

LION MEDIAの見出しを変更する 上記がCSSを追加した状態です。このままでもいいのですが、最初の文字がデフォルトの「見出し2」のデザインのままなので下記のCSSを追加して修正します。

.content h2:first-letter{
	font-size:2.6rem;
	padding-bottom:0px;
	border-bottom:none;
	color:#494949;
}

「投稿スキン設定」の「スタイルの選択」を[00.オリジナル見出しを作成]にしておくと文字装飾がなにも無い状態になりますので上記のCSSは追記する必要がなくなりました。 これで「見出し2」のデザイン変更完了です。 上記の要領で他の見出しも変更できますよ。 最後まで読んでいただいてありがとうございました。

コメント

  1. Asaman より:

    ウレナイマンさん、
    LION MEDIAで見出しを変更したくて
    検索。ご縁あってこちらの記事に導かれました。

    わかりやすくとてもためになります。
    ありがとうございます。

    さっそく記事どおりに
    見出し変更を試してみたのですが

    /*
    ここに独自の CSS を追加することができます。

    詳しくは上のヘルプアイコンをクリックしてください。
    */

    .content h2{
    paddin・・・割愛します 下線*/
    }

    を上記の
    /*
    ここに独自の CSS を・・・
    */
    中にコピー&ペーストしたのですが反映されませんでした。
    何かまちがっているのでしょうか

    お忙しい中、恐れ入りますが
    お返事いただけたら幸いです。

    また記事の更新楽しみにしています。

    よろしくお願いいたします。

    • Asaman様
      コメントありがとうございます。

      /* */ で囲んだ範囲はコメントアウトといってブラウザには無視されます。
      一時的にCSSを無効にしたりCSSソース内にメモを残す際などに使用します。

      ですので下記のようにコメントの下にCSSを記述していくとちゃんと反映されると思いますよー^^

      /*
      ここに独自の CSS を追加することができます。

      詳しくは上のヘルプアイコンをクリックしてください。
      */

      .content h2{
      padding…

      みたいな感じです!
      もしうまくできなかったらまたコメントください〜^^

      • Asaman より:

        ウレナイマンさん、
        出来ました^^

        親切に教えていただいてありがとうございます。
        実は「ウレテイルマン」さんだと個人的に思いました^^

        これからも記事の更新楽しみにしています。

        ご縁に感謝♪

        • Asaman様
          反映されたようでよかったです!
          ただ、1点記事を修正したところがありまして、
          「見出し2」の先頭の文字の下線を消すCSSを「border-bottom:0px solid;」から「border-bottom:none;」に変更したほうが良いなと思ったので修正しております。
          どちらでも問題ないのですが、後者のほうがスマートな気がするのでご参考いただければ幸いです(記事はすでに変更しております)。

          あと、「ウレテイルマン」ではなく悲しいかな本当に「ウレナイマン」です(笑)

          遅筆ですがまた更新しますのでおひまな時に覗いてやってください^^

  2. 今月からWeb担当者 より:

    ヘッダーを白色で統一したくいろいろ検索していたところたどり着きました。
    ヘッダーを白にするとキャッチフレーズのフォントカラーも白のため、見えなくなってしまうのですが、変更方法をご教示頂けますでしょうか。Easy Google Fontsなどプラグインを試しましたが、キャッチフレーズだけが変更できずとても困っている次第です。簡単な作業ではあるのかとも思いますが、お教え頂けますと幸いです。よろしくお願い致します。

    • 今月からWeb担当者様
      コメントありがとうございます^^
      ご質問いただいた部分は親テーマのCSSを書き換えるか、子テーマにCSSを追加する必要があります。
      現在、親テーマのキャッチフレーズの部分は下記のようなCSSになってます。

      .siteTitle__sub{
      display:block;
      color: rgba(255,255,255,0.75);
      font-size:1.2rem;
      margin-left:10px;
      float:left;
      }
      この「color:」というところを変更することで色は変更できます。
      子テーマに上記のコードをコピペして色部分だけ変更すれば大丈夫だと思います。
      ちなみに、rgbaはrgbに透明度を足したものになります。
      aの値は0〜1まで指定ができて、「0」が完全な透明、「1」が完全に不透明です。
      この辺は「CSS rgba」などとググってもらえるとわかりやすく説明してるところがありますよ~
      それでもわかりにくかったら
      「color:#191919;」のような通常の表記でも大丈夫です。

      あと、注意点としてはヘッダーを白にするとリンクカラーも白になっちゃうと思うんですが、AMP表示の時に子テーマのCSSが反映されなかったので多分リンクカラーが白になっちゃうと思います(私はそれでヘッダーカラーを別の色に戻しました)。
      AMP対応させるのであれば、一応確認しながら変更したほうがいいかと思います。

      • 今月からWeb担当者 より:

        ご返信ありがとうございます。
        めちゃめちゃ助かりました。ここからいろいろ勉強したいと思います。
        また参考にさせて頂きます!!