ブログカスタマイズ

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」のデザイン変更完了です。 上記の要領で他の見出しも変更できますよ。 最後まで読んでいただいてありがとうございました。

ABOUT ME
ウレナイマン
週刊少年誌の年二回の漫画賞に生まれて初めて描いた漫画が受賞。 自分に才能があると勘違いし調子に乗って描かない日々が続く。その後もだらだらと漫画を続け、気づけば現在6冊の単行本が出ています。しかし全然売れてない(当然)! 売れない漫画家「ウレナイマン」から、売れてる漫画家「ウレテルマン」への転生を目指し試行錯誤中です。3Dを勉強中。