H2のカスタマイズ

当サイトのWordPressテーマは「Lightning」です。筆者の制作代行で一番多く利用されているテーマでもあります。そのテーマをお客様のサイトに利用した際に、お客様からよく聴かれる「お客様の声」の一つに「見た目の悪いH2見出しタイトルは何とかならないのか？」という声です。

H2見出しタイトルの実際の姿です

↑↑↑上の見出しのことを言っているのです。多分に好き嫌いがある仕様で筆者はこれで良いと思っていますが、一部のユーザー様には、もっと存在感のある見出しタイトル、例えば以下のような見出しなら満足できるのかも知れません。

前記の存在感の無いと思われているH2見出しタイトルを、先ず背景をグレーの背景色に設定し、黒色だった文字色を白抜き文字に変更し、見出しの高さを「パディング：10」で太くしてみました。

・文字色：白色
・背景色：グレー
・高度の設定のパディング：10

使用しているH2見出しタイトルがサイト全体で一つだけだったら、前記の変更設定で事足りるのですが、サイト全体で複数あるH2タイトルを全て同じ仕様で改訂するには一工夫必要です。即ち、H２見出しタイトル間で「スタイルの継承（コピー）」を実行することに尽きます。

見出しタイトルのスタイルの継承（コピー）について
１．コピー元見出しタイトルのウジェットボタンの上で右クリック
２．「コピー」をクリック
３．コピー先見出しタイトルのウジェットボタンの上で右クリック
４．「スタイルの貼り付け」をクリック

即ち、H2見出しタイトルのスタイルを、コピー元からコピー先に貼り付ける操作が必須となります。その結果、下記のような平凡なＨ２見出しタイトルが、背景グレーの白抜き文字の見出しタイトルに変化することになります。

コピー先見出しタイトルの上で右クリック、「スタイルの貼り付け」をクリック

先の投稿「見出しサンプル」ので問題となった見出しテキストの上下にあった青と白の罫線を消すために、タイトルのサイズH2をH4に変えてみました。