プロストサイト

プラグイン

mobilegeddon-2-728-90 2017年の企業ECサイト喫緊課題はモバイルファースト対応
  • Home
  • プラグイン選定一覧
  • TinyMCE Advanced 完全マニュアル
    • 見出し設定
    • テーブル(表組み)
    • 画像挿入
    • リンク挿入方針と設定
    • リンク挿入
    • HTMLソースエディタ
    • テキストモードのHTMLモード化
    • 導入とオプション設定
    • オプション設定の完全検証
    • CSSスタイル
    • 日本語化

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

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

関連
WordPress TwentyTwelve – 見出し等のCSS装飾設定
TinyMCE Advanced – CSSスタイルボックスのカスタマイズ設定
WordPress SEO Webページ作成の基本

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

 

mobilegeddon-2-336-280 2017年の企業ECサイト喫緊課題はモバイルファースト対応
animation-book-affiliate-direct2-336-280 2017年の企業ECサイト喫緊課題はモバイルファースト対応
prost-title-jp プロストサイト
公式サイト
WEO強化画像オンラインサービス
WEBオンラインサービス
オンラインサービスのメンバー
オンラインサービスのアフィリエイト
Webサイトモデル
prost-manual ユーザーマニュアル
WordPress CMS
WordPressホームページ
CMS VPS動作環境
CMS Windows操作
 
  • サイトマップ
  • お問い合わせ
  • 会社案内
mobilegeddon-2-1139-400 2017年の企業ECサイト喫緊課題はモバイルファースト対応
book-affiliate-direct2-1139-400 2017年の企業ECサイト喫緊課題はモバイルファースト対応

© 2019 プロストサイト· WordPress CMSサイトのプラグイン