WordPressでブログやサイトを作っているとほぼ必ず「見出し」を使うと思います。
見出しを使うことで、設定した文字が大きくなりとても見やすくなりますが、文字が大きくなるだけでは一目で見出しだとは理解しにくいです。
そこで使われるのが「色」や「枠」です。
今回は「見出しに枠を付ける」ことで目立たせたい箇所をさらにわかりやすくする方法を紹介します。
はじめに
まず見出しを付ける方法ですが、記事編集欄に以下の画像のような箇所があります。
「段落」と書かれた部分を「見出し1」や「見出し2」に変更することで、簡単に見出しを付けることができます。
あとは見出しにしたい行にあわせて変更すれば、わかりやすくなります。
続いて、見出しだけに枠を付ける方法に入ります。今回の作業ではテーマを編集することになるので、自己責任でお願いします。
見出しに枠を付ける
ダッシュボード > 外観 > テーマの編集を選択しましょう。
content h2 と書かれた箇所を探してください。
これは「見出し2」を指しているので、ここに枠を付けるためのコードを書き加えていきます。
黒い枠を付ける場合：
content h2 に以下のようなコードを追加しましょう。
border: 3px solid #000000;
たったこれだけのコードを追加することで、見出しに枠がつきます。
さらに枠の「太さ」「色」などを変更する方法を説明していきます。
太さを変える
border : 3pxとなっている「3」を変更してください。
小さくすれば枠の太さが細く、大きくすれば太くなっていきます。
自分のサイトに合わせて変更してください。
色を変える
000000 が色を表しています。
「要素の検証」などを使って、好きな色に変更することができます。
これで「太さ」「色」を変更することができました。
ですがこれだけでは多くの場合「枠がテキストに近すぎる」ということがあるかと思います。
そこで、テキストと枠の間隔を広げてみましょう。
枠の間隔を変更する
枠の間隔を変更するためには、先ほどと同じようにcontent h2 内に以下のように記述します。
padding: 10px 15px 10px 15px;
私のサイトでは間隔をこのようにしていますが、値を変更することで幅を変更することができます。
それぞれの値がどの部分の間隔を示すのか、左から順に説明します。
- 上の間隔
- 右の間隔
- 下の間隔
- 左の間隔
というようになっています。
この値を変更することで、テキストはそのままにしながら枠の大きさだけを変更することができます。
また、枠の角を丸くすることもできます。
以下のリンクを参考にしてカスタマイズしてみてください。
【WordPress】背景の角を丸くするカスタマイズ！ - クリアメモリ
まとめ
今回は「太さ」「色」「幅」を変更する方法のみ紹介しましたが、枠の角を丸くする方法や枠の内側に色を付ける方法、見出しのテキスト色を変更する方法など様々なカスタマイズをすることができます。
自分のサイトに合わせてカスタマイズしてみましょう。
ちなみに私のサイトでは「枠内の色」なども変更しています。
ではまた。
