【WordPress】既存テーマの見出しをリセットし、自由に変更する方法

WordPressでブログページを作成する際、見出しのデザインは非常に重要な要素である。

しかし、WordPress初心者にとって、見出しのデザインを自由に設定することは難しいと思う。

この記事では、見出しを自由に変更するための手順を説明したい。

なお、大きな流れとしては「既存見出しのリセット」⇒「見出しのデザインを設定」の順で進めていく。

1.既存テーマの見出しをリセットする

まずは、既存のテーマに設定されている見出しをリセットする。

これを行わないと、「既存のテーマで設定されている見出し」と「新しく追加する見出しのデザイン」がバッティングしてしまう。

既存の見出しをリセットするには、CSSへの記載が必要になる。

参考:CSSとは

CSSとは、ウェブページにデザインを指定するためのプログラミング言語である。CSSを使うことで色や大きさの指定が可能になり、ブログの見栄えが良くなる。

1-① 外観から「CSS編集」を選択する

1-② 追加CSSを選択する

1-③ 追加CSSにコードをコピペする

なお、既存テーマの見出し設定をリセットするためのCSSは下記の通りである。

こちらをコピペして、貼り付けるだけで見出しのデザインをリセットできる。

/* ----------------------------------------------------
h2 見出しのリセット
----------------------------------------------------*/
h2:before {
    border-top: 0px solid transparent;
}
h2:after {
    border-top: 0px solid transparent;
}
h2 {
    position: initial;
    background: initial;
    color: initial;
    font-size: initial;
  font-weight:initial;
    line-height: initial;
 
    margin: initial;
    padding: initial;
    box-sizing: border-box;
 
    border:initial; 
    border-radius: initial;
    box-shadow: initial;
    text-shadow: initial;
}

なお、上記例はh2タグをリセットする例である。適宜、h3やh4など書き換えていただきたい。

参考:hタグとは

hタグとは、見出しを設定するタグである。数字が小さいほど重要性が高く、h1タグは記事のタイトルを表す。最適な見出しを設定することは、読みやすさを向上させる上、Googleからの記事の評価を高める効果がある。

【参考】コードの解説

1.h2:before, h2:afterborder-top: 0px solid transparent;

  • h2:before, h2:after は、それぞれ h2 要素の疑似要素です。多くのテーマやブラウザ設定では、見出しの前後に装飾的な線が引かれている場合があります。
  • border-top: 0px solid transparent; は、上端(top)の境界線(ボーダー)を「太さ0px、実線、色は透明」に設定することで、疑似要素が表示する可能性のある線や装飾をなくしています。

2. h2 要素の各プロパティ

2-1. position: initial;

  • 要素の配置方法をデフォルト値(初期値)に戻します。
  • 通常のHTMLフローに従う「静的配置(static)」とほぼ同等ですが、initial は「そのプロパティの初期値に戻す」という意味になります。

2-2. background: initial;

  • 背景色や背景画像などをデフォルト値に戻します。
  • テーマや他のCSSで設定されている背景スタイルをリセットします。

2-3. color: initial;

  • 文字色をデフォルト値に戻します。
  • ブラウザやテーマで指定されている文字色を初期化し、特定の色指定がない限り、継承やユーザー設定に基づく色に戻ります。

2-4. font-size: initial;

  • フォントサイズをデフォルト値に戻します。
  • 通常はブラウザの基本フォントサイズ(多くの場合16px程度)に戻す役割があります。

2-5. font-weight: initial;

  • 文字の太さをデフォルト値に戻します。
  • 多くのブラウザでは見出しタグ(h1, h2, …)にある程度太め(bold)のスタイルがデフォルトで設定されている場合がありますが、これをリセットします。

2-6. line-height: initial;

  • 行の高さ(行間)をデフォルト値に戻します。
  • テーマやCSSでカスタマイズされている行間を初期状態に戻し、デザインをフラットにする役割があります。

2-7. margin: initial;

  • 要素の外側の余白を初期化します。
  • 見出しタグはデフォルトで上下のマージンが大きめに設定されることが多いですが、それをなくします。

2-8. padding: initial;

  • 要素の内側の余白を初期化します。
  • デフォルトあるいはテーマ側で付与されたパディングをリセットします。

2-9. box-sizing: border-box;

  • 要素のサイズ計算方法を「border-box」に変更します。
  • border-box は要素の 幅や高さに「padding」や「border」のサイズを含める 計算方式です。
  • デフォルトでは多くのブラウザで box-sizingcontent-box になっており、幅や高さの指定に「パディングやボーダー」は含まれませんが、この指定でレイアウトを整えやすくします。

2-10. border: initial;

  • 要素のボーダー(枠線)を初期化します。
  • デフォルトや他のスタイルシートで設定されている枠線のスタイルを無効化します。

2-11. border-radius: initial;

  • 要素の角丸の設定を初期化します。
  • 角丸(ラウンドコーナー)が指定されている場合はそれを解除し、角をまっすぐに戻します。

2-12. box-shadow: initial;

  • 影のスタイルをデフォルトに戻します。
  • テーマなどで見出しにドロップシャドウが設定されている場合はここでリセットできます。

2-13. text-shadow: initial;

  • テキストの影(シャドウ)を初期化します。
  • テーマや追加CSSで文字の周囲に影が付いていた場合は、それを取り消します。

2.オリジナルの見出しデザインを設定する

さて、既存テーマの見出し設定をリセット出来たら、次にオリジナルの見出しデザインを設定する。

2-① 見出しのデザインを探す

まずは、どのような見出しにするべきかを考える。

自分でcssを勉強して、オリジナルの見出しを作るのはハードルが少し高いため、他の人が作ったデザインを使わせていただくことにする。

下記のサイトから、自分が設定したい見出しを探し、CSSをコピーしよう。

参考 記事のタイトルCSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

参考 記事のタイトルシンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50

2-② 追加CSSの欄にコードを書き込む

1で行ったのと同じ要領で、追加CSSにオリジナル見出しデザインのコードを書き込む。

書き込む場所は、先ほどリセット時に書いたCSSに続けて書けば良い。

【まとめ】見出しのデザインを変えれば、サイトの印象は大きく変わる

いかがだろうか。

今回は見出しのデザインを自分で設定する方法について解説した。

見出しはSEO対策という点からも必ずこだわるべきポイントである。是非この記事を参考に、自分なりの見出しを設定して欲しい。