2016/09/30 by プロストサイト – Update 15
WordPress TinyMCE Advanced – 見出し設定
WordPress TinyMCE Advancedの見出しの設定です。見出しは、Webページの見易さとSEO基本の両目的を兼ねています。見出しのフォントサイズと装飾は、スタイルシートStyle.cssと TinyMCE Content.cssのカスタマイズ設定と関連しています。
WordPress TinyMCE Advanced – 見出しの指定
TinyMCE Advancedでの見出しの指定は、次の手順で行います。
1. 見出しの指定範囲を選択ハイライトしておく。
2. 段落のボックスをクリックすると、図のように表示される。
3. 見出し1~見出し6から、意図する見出しを選択する。
以上で見出しが設定され、見出しの相当文字サイズへ変わります。見出しのリセットは、見出し1-6の代わりに段落を選択します。
SEOの基本
SEOの基本は良いコンテンツ作りですが、良いコンテンツの基本は見出しが適切に挿入されていることから始まります。その意味で、次のような順次見出し配置がセオリーです。そして、見出しには当該ページの主要な言葉を含めます。主要な言葉とは、検索エンジンでユーザーがキーワード指定しそうな言葉です。
・h1 – 1つ
・h2 – h1の下に複数
・h3 – h2の下に複数
TinyMCE Advanced – テキストモード表示
テキストモードを表示すると、見出しの設定状況を確認できます。図は、見出し1の設定例です。
◇他の見出しの例
見出し2 – h2でかこまれた文字列
見出し3 – h3でかこまれた文字列
見出し4 – h4でかこまれた文字列
TinyMCE Advanced – 見出しの装飾
見出しには、CSS装飾を加えるのが一般的です。スタイルの左のボタンは、CSS編集です。このボタンで、見出し等のCSSスタイルの設定を行えます。ただ、見出しはWebページ上は必ずあり、数も一般に多くなります。
そこで、本WordPress CMSサイトではスタイルボックから所定のスタイルをワンクリックで指定できる方式としています。設定は、下部からのリンクで参照できます。手順は次の通りです。
1. 設定範囲の文字列を選択ハイライトしておく。
2. スタイルボックスをクリックする(現在の図の状態)。
3. スタイルを選択する(下表参照)。
以上でスタイルが設定され、選択された範囲へ表示反映されます。スタイルのリセットは、設定範囲をハイライトし消しゴムのように見えるフォーマット解除をクリックします。
見出しのスタイル
本WordPress CMSサイトの見出しのスタイルは、表のスタイルで選択できます。見出しはh1-h6まで用意されていますが、h1-h3が一般的な指定範囲です。h4は文章体裁上の予備的利用の想定です。
CSSスタイル | 利用想定 | CSS装飾 |
---|---|---|
ad-style21 | 見出し2 – 大 | グリーン左バー+下線 |
ad-style21e | 見出し2 – 大 | オレンジ左バー+下線 |
ad-style22 | 見出し2 – 中 | グリーン左バー+枠囲み |
ad-style22e | 見出し2 – 中 | オレンジ左バー+枠囲み |
ad-style31 | 見出し3 | グリーン左バー |
ad-style31e | 見出し3 | オレンジ左バー |
ad-style41 | 見出し3、見出し4、他語句 | ブラック左バー |
見出しのスタイルの用例集は、下記で参照できます。
スタイル用例集
WordPress CMSサイト – Webページスタイルの用例集
TinyMCE Advanced – 見出しの標準化設定
以上の手順は、見出しのフォントサイズや装飾スタイルは標準化設定済みの前提です。標準化は、つどの労力低減とスタイルの標準化が目的です。そして、もしスタイル調整の場合でも設定変更だけで済みます。
関連
WordPress TwentyTwelve – 見出し等のCSS装飾設定
TinyMCE Advanced – CSSスタイルボックスのカスタマイズ設定
WordPress SEO Webページ作成の基本
TinyMCE Advanced Top
TinyMCE Advanced – 使い方完全マニュアル