LION BLOG（ライオンブログ）やLION MEDIAを使っていると、見出しを見栄え良くカスタマイズしたくなりませんか？
LION BLOGに限らずブログを書いている人は、訪問者に読んでもらうために書いているわけですから、読み手の立場になり読みやすい記事を書きたいですよね。
読みやすい記事にするための一つが見出しなのです。見出しは、文章の区切れ目や段落に設定するタイトルのことで、非常に重要な役割を果たします。
文章は見出しで決まる！と言っても過言ではありません。
しかし、見出しをかっこよく、見栄え良く、かわいく表示させたいと思ってもどこを編集すれば見出しをカスタマイズできるか分からない！そんな方のためにCSSをカスタマイズする方法を紹介します。
見出しのCSSを編集する
WordPressのダッシュボードから「外観」→「テーマの編集」へ進みます。
ここまでの行き方はお分かりですよね。
右側に表示される「css」の▼を押して「content.css」をクリックします。
変更する前にバックアップを取っておく
これからCSSを編集するわけですが、必ずバックアップを取っておくことを強くお薦めします。
編集や改造に失敗して元に戻したい時、非常に困ります。
バックアップの方法は、cssが書かれている文字を全てコピーして「メモ帳」などに貼り付けて保存しておいて下さい。
「content.css(デフォルト)」などの名前でいいかと思います。
h2の見出しを変更してみる
ここでは変更の方法を紹介させて頂きます。
デフォルトのh2は以下のようになっています。
- .content h2{
font-size:2.6rem;
}
.content h2:first-letter{
font-size:3rem;padding-bottom:5px;border-bottom:3px solid;color:
#63acb7;
}
変更後のh2のcssです。上のデフォルトのh2（7行）を消して以下を貼り付けます。
- .content h2 {
font-size:2.6rem;position:
relative;padding:
12px;color:
#333;border-bottom:
4px solid;border-color:
#67ccff;
}
.content h2::after {
position: absolute;left: 0;
bottom: -4px;z-index: 5;
content: ”;
width: 20%;
height: 4px;background-color: #295dd3;
}
書き換えたら「ファイルを更新」ボタンを押して保存します。「見出し２」で書いた部分は、以下のように変更できましたでしょうか？
見出し３の変更も同じ
このMutakkoのサイトでは、見出し３は以下のように変更しています。
- .content h3{
font-size:2.2rem;
padding: 0.15em 0.5em;
color: #494949;
background: transparent;
border-left: solid 5px #ffb03f;
}
CSSを子テーマに追加するには、以下を参考にして下さい。
まとめ
如何でしたでしょうか？見出しのCSSをカスタマイズする方法も簡単でしょ？
このようにCSSは簡単に編集できますので、色々試してみて下さい。もっとよい方法などあれば教えて頂けると幸いです。
