【WordPress】LION BLOGのCSSで見出しのデザインをカスタマイズ

【WordPress】LION BLOGのCSSで見出しのデザインをカスタマイズ

LION BLOG(ライオンブログ)を使っていると、見出しをカスタマイズしたくなりませんか?

LION BLOGに限らずブログを書いている人は、訪問者に読んでもらうために書いているわけですから、読み手の立場になり読みやすい記事を書きたいですよね。

見出しは、文章の区切れ目に設定することで目次として読みやすい記事になります。

ブロガーにとって、見出しをかっこよく、見栄え良く、かわいく表示させたいと思ってもどこを編集すれば見出しをカスタマイズできるか分からない!そんな方のためにCSSをカスタマイズする方法を紹介します

見出しのCSSを編集する

 

WordPressのダッシュボードから「外観」→「テーマの編集」へ進みます。

ここまでの行き方はお分かりですよね。

右側に表示される「css」の▼を押して「content.css」をクリックします。

 

スポンサーリンク

変更する前にバックアップを取っておく

これからCSSを編集するわけですが、必ずバックアップを取っておくことを強くお薦めします

編集や改造に失敗して元に戻したい時、非常に困ります。

バックアップの方法は、cssが書かれている文字を全てコピーして「メモ帳」などに貼り付けて保存しておいて下さい。

content.css(デフォルト)」などの名前でいいかと思います。

 

h2の見出しを変更してみる

cssのサンプルは、色んなサイトで紹介されていますので「css見出し」などで検索して下さい。

ここでは変更の方法を紹介させて頂きます。

デフォルトのh2は以下のようになっています。

 

変更後のh2のcssです。上のデフォルトのh2(7行)を消して以下を貼り付けます。

 

書き換えたら「ファイルを更新」ボタンを押して保存します。「見出し2」で書いた部分は、以下のように変更できましたでしょうか?

 

見出し3の変更も同じ

このMutakkoのサイトでは、見出し3は以下のように変更しています。

 

CSSを子テーマに追加するには、以下を参考にして下さい。

まとめ

如何でしたでしょうか?見出しのCSSをカスタマイズする方法も簡単でしょ?

このようにCSSは簡単に編集できますので、色々試してみて下さい。もっとよい方法などあれば教えて頂けると幸いです。

CSSを変更しても反映されない方は以下を試して下さい。

 

 

この記事が気に入ったら
いいね ! しよう

LION MEDIAカテゴリの最新記事