私はWordPressで、Simplicityというテーマを使用しています。
その名の通り、とてもシンプルなデザインで使いやすいのですが
一方シンプル過ぎて、見出しなど目立たせたい部分が目立たないというデメリットも。
そこで今回は、Simplicityの見出しをCSSで修正していきたいと思います。
そもそも見出しとは
htmlタグを利用すると、文章の一部を見出しにすることができます。
文章を作成する際、<h1>見出し</h1>のように
hタグで文字を囲んであげればOKです。
デフォルトの見出しはとてもシンプル
Simplicityの見出しは、標準だととてもシンプル。
h1～h5タグを記載すると、下の画像のような見栄えになります。
私は普段h2,h3タグを主に使っているので
今回はこの2つの見栄えを修正していきたいと思います。
h2,h3タグを修正します
WordPress管理画面の「外観」→「テーマの編集」から、CSSを入力していきます。
今回は、下のように入力してみました。
反映結果がこちら。かなり見出しが目立つようになったのではないでしょうか？
h2タグ修正内容はコチラ
それではh2タグについて、実際の記載内容を解説していきます。
記述したのは以下の通り。
.article h2{
border-left: 8px #777777 solid;
background: #eeeeee;
font-size: 24px;
font-weight: bold;
margin: 5px 0;
padding: 5px 0 5px 10px;
}
一行ずつ解説していきます。
.article h2{
→編集範囲がh2タグであることを指定しています。
border-left: 8px #777777 solid;
→8ピクセルの枠を、見出しの左側にだけ表示させています。#以下は16進数で色を指定。
background: #eeeeee;
→見出しの背景色を指定。16進数は、0に近いほど黒く。fに近いほど白いと覚えておくとよいでしょう。
font-size: 24px;
→見出しの文字サイズを指定しています。
font-weight: bold;
→見出しを太字にするよう指定しています。
margin: 5px 0;
→見出し全体の外側に、余白を5ピクセル分表示させています。
padding: 5px 0 5px 10px;
→文字と枠の間に、上下左右それぞれ余白を表示させています。
}
→編集範囲はここまで。と指定しています。
それぞれの項目がどこを指定しているかは、以下のサイトが大変参考になります。
CSS： marginの正しい理解 (CSSのmarginが難しい)｜Web Design KOJIKA17
必ず「子テーマ」を修正しましょう！
最後に、CSSの記述は必ず子テーマに対して行いましょう。
以前の記事でも書きましたが、親テーマを直接更新すると
親テーマがアップデートされるたびに編集が必要となってしまいます。
