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の代わりに段落を選択します。

tinymce-h1-h6 TinyMCE Advanced段落

SEOの基本

SEOの基本は良いコンテンツ作りですが、良いコンテンツの基本は見出しが適切に挿入されていることから始まります。その意味で、次のような順次見出し配置がセオリーです。そして、見出しには当該ページの主要な言葉を含めます。主要な言葉とは、検索エンジンでユーザーがキーワード指定しそうな言葉です。
・h1 – 1つ
・h2 – h1の下に複数
・h3 – h2の下に複数

TinyMCE Advanced – テキストモード表示

テキストモードを表示すると、見出しの設定状況を確認できます。図は、見出し1の設定例です。

tinymce-h1 TinyMCE Advancedテキスト

◇他の見出しの例
見出し2 – h2でかこまれた文字列
見出し3 – h3でかこまれた文字列
見出し4 – h4でかこまれた文字列

TinyMCE Advanced – 見出しの装飾

見出しには、CSS装飾を加えるのが一般的です。スタイルの左のボタンは、CSS編集です。このボタンで、見出し等のCSSスタイルの設定を行えます。ただ、見出しはWebページ上は必ずあり、数も一般に多くなります。

そこで、本WordPress CMSサイトではスタイルボックから所定のスタイルをワンクリックで指定できる方式としています。設定は、下部からのリンクで参照できます。手順は次の通りです。
1. 設定範囲の文字列を選択ハイライトしておく。
2. スタイルボックスをクリックする（現在の図の状態）。
3. スタイルを選択する（下表参照）。
以上でスタイルが設定され、選択された範囲へ表示反映されます。スタイルのリセットは、設定範囲をハイライトし消しゴムのように見えるフォーマット解除をクリックします。

editor-style-customized カスタマイズスタイル

見出しのスタイル

本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 – 見出しの標準化設定

以上の手順は、見出しのフォントサイズや装飾スタイルは標準化設定済みの前提です。標準化は、つどの労力低減とスタイルの標準化が目的です。そして、もしスタイル調整の場合でも設定変更だけで済みます。

TinyMCE Advanced Top
TinyMCE Advanced – 使い方完全マニュアル