【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からの記事の評価を高める効果がある。

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

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

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

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

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

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

参考 記事のタイトルCSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選 参考 記事のタイトルシンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50

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

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

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

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

いかがだろうか。

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

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

↓↓この記事がお役に立ったならば、応援クリックを押していただけると大変嬉しいです↓↓

ブログランキング・にほんブログ村へ