賢威の見出し2（h2）に装飾を追加してみた

※当サイトにはプロモーションが含まれています。

通常、賢威の「見出し２（h2）」は、このように表示されます。

h2のタイトル（デフォルト）

少し、見た目が弱いので、装飾を追加してみました。

なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

見出し2（h2）の上下に線を追加するCSS

見出し2（h2）の上下に、白（#fff）と、見出しの色と同じターコイズブルー（#05a5ab）の線を追加するCSSです。

.keni-section_wrap.article_wrap h2 {
border-top: 2px solid #05a5ab;
border-bottom: 2px solid #05a5ab;
box-shadow: 
0 -4px 0 0 #fff,
0 4px 0 0 #fff,
0 -6px 0 0 #05a5ab,
0 6px 0 0 #05a5ab;
}

これで、各見出し（h2～h6）のデザインは

h2のタイトル

h3のタイトル

h3は真ん中の背景色が白になる

h4のタイトル

h4は上の線が消えて、下の線が点線になる。

h5のタイトル

h5は下の点線も消える

h6のタイトル

h6はカラーが黒となります。

これで、装飾ルールも一貫していると思いますがどうでしょうか？

補足：ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

なお、追加CSSに記載する際に、ブラウザ上で全角から半角に変換すると、エンコーディング（文字コード）の関係で、不具合が発生することがあります。

その為、編集する時は、メモ帳などに貼り付けたものを編集をしてからペーストするようにしましょう。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。