【WordPress】見出しをカスタマイズする方法

Pocket

WordPressの初期状態で用意されている見出しは非常に地味で、なんか文字を大きくしただけって印象を受けます。
記事を書いていく上で、読んでくれる人に分かり易く伝える為に、見出しは必要不可欠ですからね。
見出しが分かりにくく、見出しであることにすら気づかなかったらちょっと問題ですよね^^;

今回は見出しをカスタマイズする方法メモしていこうと思います。

見出しをカスタマイズする方法

AddQuicktagsのインストール

「プラグイン」→「新規追加」→「AddQuicktag」を検索→「AddQuicktag」をインストール

 

AddQuicktagsの設定


オレンジ色の枠線…「h2」と記載してください
緑色の枠線…「<h2 id=danraku2>」と記載してください
水色の枠線…「</h2>」と記載してください
紫色の枠線…一番右の枠にチェックをいれ、全てに枠に「チェックを入れてください」
変更を保存してください。

設定を保存したら、上記と同様に「h3」「<h3 id=danraku3>」、「</h3>」と使い分けたい見出しの数だけ設定できます。
私はh4までの設定を行っています。

ちなみにSEOの関係上、h1>h2>h3>h4>h5>h6>と検索順位が決定しているようです。
h1はタイトルが使用しているとして、h2から設定している訳ですが、h2が「大見出し」として、
それ以下は「小見出し」となります。
SEOから検索されやすくするためにも、h2にはよく使用する、自分のブログの顔となる見出しを設定しましょう。

CSS追加で好みの見出しコードを記述する

「外観」→「カスタマイズ」→「追加CSS」

h2#danraku{ } と記述し、{ }の中に自分好みの見出しコードを記載すればOKです。

見た目に関しては下記のサイトを参考にすればいいかもしれません。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

好みの見た目のコードをコピーして赤枠、{   }内に張り付けます。

こんな感じでコードを記載して、保存して公開をすれば準備完了です。

見出しを作ってみる

では早速記事作成をしてみます。

記事投稿のビジュアルエディタに、「Quicktags」の項目が出ていれば大丈夫です。
見出しにしたい文章を選択し、Quicktagsから、「h2」から「h4」の中で見出しを設定します。

はい、今回は以上です。お疲れ様でした!

エッグ

シェアする

コメントを残す

メールアドレスが公開されることはありません。

コメントする