以前、見出し、タイトルバーの表示の仕方について、記事を書いたのですが
初心者の方には、ややわかりづらかったと思います。
それで、今回の記事では、シンプルなデザインの見出し、タイトルバーを
あっという間に作って表示する方法について書きたいと思います
※補足 simplicityというワードプレスのテーマを使うことが条件になります
補足２、現在は、TinyMCE Advanced（テキストエディターのプラグイン）のバージョンアップとsimplicityのバージョンのせいか？この機能が、ビジュアルモードでは使えなくなっているようです。テキストモードに切り変えれば利用することが出来ます。2019年5月の時点
目次
タイトルバーとは？
私が、ワードプレスで記事を書き始めたときに思ったのが、
テキストだけでページ（記事）を構成すると、どうしても
全体的に単調なつくりになってしまうことです。
他の方のサイトを見ると、みなさん、ページ（記事）が単調にならないように
色々な工夫をされています。
例えば、写真、イラストを使ったり、テキストにマーカーで色をつけたり
アピールしたい文章を枠で囲んだり、
記事の文中で大事なところでタイトルバー（見出し）を使ったりされています
このタイトルバーですが、ワードプレスを始めたばかりの人は、使いたくても
どうやって作って表示するのかわからないものです。
私がそうでした、どうやって表示しているのか？
それ以前に名前すらわかりませんでした（笑）
タイトルバーとは、以下のようなものです
写真でタイトルバーを作る人もいますが、それだと検索エンジンに
テキストとしてみなされません。
またタイトルバーの中に文字を入力することができません。
本来ならば、このタイトルバーは、
CSSで表示するのが主流です。
しかし、人によっては、そういう知識を得ることより
とにかく記事を書くことを最優先にしている人もいます。
そんな方が、簡単にタイトルバーを表示させる方法を次で説明します
タイトルバーを簡単に表示させる方法
デザインにこだわらなければ、表示させるのは、とても簡単です！
わずか、数クリックでできます。
もちろん作ったタイトルバーに文字を入力することもできます。
また、そのタイトルバーを見出しとして使うこともできます
※h2、h3タグとして使うこともできます
では、実際にその手順について順番に説明します
TinyMCE Advanced というプラグインをインストールして有効化します
１、まず、ワードプレスに TinyMCE Advanced というプラグインが
インストールされて有効化されているかを確認してください
TinyMCE Advancedは、テキストエディターを使いやすくするプラグインです！
２、確認の仕方は、ワードプレスの管理画面の プラグイン にマウスカーソルを
あわせて インストール済みプラグイン をクリックします
３、インストールしている プラグインの一覧が出ますので
以下のようになっていれば、インストールされて、有効化されています
赤枠で囲んだ部分に青いバーがあれば、有効になっています。
もし、TinyMCE Advanced がインストールされていても
有効化されていない場合は、
有効化をクリックしてください
それで、有効になります。左横に青いバーが表示されるはずです
４、もし TinyMCE Advanced がインストールされていない場合は
以下の記事でTinyMCE Advancedのインストールと有効化の仕方を書いています
↓
そちらを先にお読みください（新しいタブで表示されます）
TinyMCE Advanced（プラグイン）の機能を使って
タイトルバーを表示させる方法
上記でプラグインがインストールされて有効化されていれば
すぐに記事の文中にタイトルバーを表示できます
１、まず、記事の文中でタイトルバーを表示したい場所を
クリックしてください（普通に文章を書くときと同じです）
以下のような感じです
↓
以下は写真です
２、次に上の状態で、記事の投稿画面の上部の操作パネルで
フォーマット をクリックします
そして新しく表示されたメニューの中の スタイル にマウスカーソルを
合わせます
３、さらにメニューが開きますので、下にスクロールしていきます
すると上の写真のように
primaryボックス
successボックス
infoボックス
warningボックス
dangerボックス
という項目が表示されます
まずは、試しに、
primary ボックス をクリックしてみます
すると以下のようにタイトルバーが表示されます
↓
以下は写真です
４、タイトルバーが出現しますので
そこにテキストを入力することができます
このように簡単に数クリックでタイトルバーを表示させることができます
表示させることのできるタイトルバーの種類
primaryボックスをクリックすると以下のタイトルバーが表示されます
successボックスをクリックすると以下のタイトルバーが表示されます
infoボックスをクリックすると以下のタイトルバーが表示されます
warningボックスをクリックすると以下のタイトルバーが表示されます
dangerボックスをクリックすると以下のタイトルバーが表示されます
すべて、テキストの入力が可能ですので色々な使い方があると思います
表示したタイトルバーを見出しとして使う方法！
これも非常に簡単です
１、上記で表示させたタイトルバーにテキストを入力します
以下のような感じです（テキストの色は自由に変更できます）
２、テキストを入力させたタイトルバーのテキスト部分を
マウスをドラッグして囲みます（青く表示させます）
３、上の状態で、記事の投稿画面の操作パネルの 段落 をクリックして
好きな見出しを選びます
見出し２＝h2 見出し３＝h3 などです
これで、タイトルバーが見出しの役割を持ちます
実際に見出し２を上の場合で選択すると
以下のようにネット上で表示されます
色々試してみるとよいでしょう
見出し１＝h1タグは、基本的に１つの記事に１つが原則です
基本的には、記事のタイトルが自動的に見出し１＝h1
に使われていますので、見出しを使うなら見出し２＝h2以降になります
通常よく使う見出しは、見出し２＝h2～見出し４＝h4
ぐらいではないでしょうか？もちろん人によって違います。
うまく表示されない場合は
非常に便利な機能なのですが
たまにうまく表示されない場合があります
タイトルバーがうまく表示されないのではなく
その下に書いたテキストが、うまく表示されない場合があります
以下の写真は、実際にこの記事を書いているときの画面です
記事の投稿画面では、行間が綺麗に開いているのですが
実際にネット上で見ると上の写真のようになってしまいました
行間がありませんね。びっしりです。
原因は、１度タイトルバーを表示してから、違うタイトルバーに変更したときに
しっかりと前のタイトルバーのコードが削除されていなかったためだと思います
なので、一度タイトルバーを表示してから違うタイトルバーに変更する場合は
ちゃんとタイトルバーを削除しましょう
具体的に言うと
以下は写真です（例）
違うタイトルバーに変更したくなったら下のようにしっかりと
削除してから新しいタイトルバーを表示しましょう
以下は写真です（例）
そうでないとテキストモードにするとわかりますが
下に文章を書いていくと
コードの欠片？（div)がいたるところに散乱して
タイトルバーを設置した以降の文章の隙間が
おかしくなる場合があります
それでもうまく表示されない場合は、
タイトルバーを表示させる前に
その下に先に文章を書いておいてから
文章と文章の間にタイトルバーを表示させると
今のところ失敗がありません
以下のような感じです
必要の無いタグやコードを削除してもいいのですが
ある程度長く文章を書いてしまってから気が付いた場合
それだとかなり手間がかかります
その場合は、一度、自分の書いた文章をPCのテキストなどにコピーしておいて
表示がおかしくなった部分を削除して
書き直したほうが早いと思います