ワードプレスで見出しのデザインを変える方法

「テーマがいろいろあるのは良いけど、それだけじゃそろそろ限界かな・・・」

ワードプレスでブログを制作していると、そのうちブログの外見にもこだわるようになってきますよね。

ワードプレスにはテーマが豊富で、簡単に自分の好きなようにデザインを変えるとことができます。カスタマイズ機能を利用すれば、ヘッダー画像や背景画像も思いのままです。

しかし、それでもまだまだ満足できないというブロガーの方もいるのではないでしょうか?

例えばテキスト、タロログでは見出しテキストが以下のようになっています。

タロログの<h2>タグ

こちらは<h2>タグを利用した場合。文字の背景色がオレンジになっています。

タロログの<h3>タグ

続いては<h3>タグを用いた見出しテキストです。文章の左にオレンジの縦線が入っていますね。

これらのテキストは、あらかじめ設定をしておくことで編集画面で見出しに指定するだけで、装飾が施されるようになっています。その都度タグなどを記述する必要がないのです。

ということで今回は、ワードプレスで見出しを変更する方法を解説します。

見出しの重要性

そもそも、皆さんは見出しテキストを正しく活用できていますか?

見出しテキストは、SEO的にもユーザビリティー的にも重要な役割を担っています。正しい使用方法でなければ、サイトの評価に悪影響を及ぼしかねません。

まずは、ウェブサイトの見出しについて軽く解説します。

ユーザビリティーを上げる

見出しの一番大きな役割は、本文の要点を分かりやすくして構成を正しく伝えることです。これは、ユーザーと検索エンジン双方に対してということになります。

ブログで文章を投稿していると、どうしても文字数が多くなることがありますよね。タロログでも、1記事数千文字なんてことも珍しくありません。

文章が長くなると、どうしても読者は読むのを躊躇してしまいます。そこで、

  • 段落や改行を多くする
  • 難しい用語を使わない
  • 文章の語尾に変化を持たせ、リズム感を生み出す

などのテクニックで、読者に飽きさせないように心がけて文章を書くことが大事になってきます。

見出しテキストも非常に有効です。長い文章を適切に分けて見出しを用いることで見出しを読むだけでも大体の内容を理解させることが可能になります。読者は、見出しを読んで自分の欲しかった情報か見極めやすくなるのです。

検索エンジンに正しく理解させる

また、SEOにおいても大事な施策となっています。検索エンジンも、見出しを読み取ることで文章の内容を把握しているのです。

見出しタグの使い方を間違えてしまうと、検索エンジンが文章の内容を誤って認識する可能性もあるので注意して使用するようにしましょう。

見出しの装飾方法

見出しの重要性は、お分かりいただけたと思います。そこで大事なのは、見出しをしっかり見出しとして認識してもらうことです。

検索エンジンであれば見出しタグ(<h1>や<h2>などのhtmlタグのこと)で認識できますが、読者は見た目でしか判断できません。その文章が見出しなのか、それともただ文字サイズを大きくして太字にしただけのテキストなのか、しっかりと差別化を図りましょう。

CSSの編集

見出しタグの装飾を変更する場合、CSS(スタイルシート)が必要です。CSSと聞くと難しそうな印象ですが、今回はそこまで難易度は高くありません。

※CSSを編集するときは子テーマを作成しておきましょう。子テーマを作成しておくと、変更前の状態のCSSが残るので変更後が気に入らなかったときなど元の状態に戻すことが可能です。またテーマをアップデートしたときに、子テーマにはアップデートが適用されないので勝手に変更されることがありません。

※子テーマの作り方はこちら

ワードプレスで子テーマを設定する方法

2016.12.15

CSSの編集は、管理画面左メニューより「外観」→「テーマ編集」をクリックします。「外観」→「テーマの編集」

CSSの編集画面に移りました。ここでstyle.cssというファイルを編集するのですが、ここで一つ注意なのが先ほどの子テーマのstyle.cssを選択することです。他のテーマ(元の親テーマも含む)のファイルを変えてしまわないよう注意しましょう。

編集画面右上に現在編集しているテーマが表示されるので、しっかり確認してください。

編集しているテーマの確認

例えば、見出し2のテキストに黒の下線をひくとします。style.cssの最後に以下のテキストを貼り付けてください。

.headline2{
border-bottom: 1px solid #000000;
}

1行目の「.headline2」でこの設定のクラス名を設定しています。{〜}の中に装飾の設定が記されていて、
「border-bottom:」で下線を引いて、
「1px solid」で線の幅を1ピクセルにして、「#000000;」で線の色を黒(カラーコードが#000000)に設定しています。

最後に「ファイルを更新」をクリックして、CSSの編集は終了です。

実際に表示させる

まだ、CSSの編集が終わっただけで実際のブログの表示には適用されていません。

ということで、続いて投稿画面をテキストエディターで開きます。

テキストエディターで編集画面を開く

見出しにしたいテキストを<h2 class=”headline2″>と</h2>で囲み、更新してください。実際の表示は、次のようになります。

見出し2に下線を引く

見出し2タグの中にclass=”headline2″と記載することで、style.cssの中の「headline2」の要素を呼び出してこのように表示させているのです。

これで、見出しタグの装飾の仕組みはお分かりいただけたと思います。

もっと簡単にする

「いちいちテキストエディターを開いて、見出し2タグを記載するなんて面倒だ!」

という方も多いですよね(というより、誰もが思うはずです)。

そこでもっと作業を簡単にしてみましょう。同様に使用しているテーマのstyle.cssの編集画面を開きます。先ほどは、クラス名を指定していたのですがこの「.headline2」を「h2」に変更して「ファイルの更新」をクリックしてください。

このように記述することで、全て見出しタグ2にこの装飾が施されるようになりました。

装飾いろいろ

見出しの装飾を変える方法はわかりましたが、結局CSSの記述は必要です。でも、安心してください。CSSを学ばなくても、ネット上で簡単に調べることが可能です。

見出しジェネレータ

http://web-dou.com/tool/css_gen_h.php

こちらのサイトでは、以下のような設定項目を選択するだけで必要なソースを自動で生成してくれます。あとは、style.cssに貼り付ければOKです。

見出しジェネレータ

賢威カスタマイズ研究所

http://www.keni-customize.net/custom-midashi-design-555/

style.cssに貼り付けてすぐに使用出来るソース文が、多数公開されています。見本も掲載されているので、非常にわかりやすいです。

まとめ

いかがでしたか?

見出し文が豪華になれば、また一段とオリジナリティーの高いブログになりますよね。見た目に変化が出ると、読者も飽きずに読みやすくなるでしょう。

CSSの編集も、難しく感じなかったと思います。これを機に、高度なテーマのカスタマイズにも挑戦してみてもいいかもしれません。

ABOUTこの記事をかいた人

マツ

高2から陰キャでコミュ障になり、最終学歴高卒フリーターの人生がけっぷち屑野郎へ。 こっから人生大逆転ホームラン狙ってます。担当はゲームとお菓子調達です。よろしこ 最近、4コマ漫画のブログをはじめました。 クリック