ワードプレスでタイトルバー、見出しを数クリックで簡単に作る方法

以前、見出し、タイトルバーの表示の仕方について、記事を書いたのですが

初心者の方には、ややわかりづらかったと思います。

それで、今回の記事では、シンプルなデザインの見出し、タイトルバーを

あっという間に作って表示する方法について書きたいと思います

※補足 simplicityというワードプレスのテーマを使うことが条件になります

スポンサーリンク

タイトルバーとは?

私が、ワードプレスで記事を書き始めたときに思ったのが、

テキストだけでページ(記事)を構成すると、どうしても

全体的に単調なつくりになってしまうことです。

他の方のサイトを見ると、みなさん、ページ(記事)が単調にならないように

色々な工夫をされています。

例えば、写真、イラストを使ったり、テキストにマーカーで色をつけたり

アピールしたい文章を枠で囲んだり、

記事の文中で大事なところでタイトルバー(見出し)を使ったりされています

このタイトルバーですが、ワードプレスを始めたばかりの人は、使いたくても

どうやって作って表示するのかわからないものです。

私がそうでした、どうやって表示しているのか?

それ以前に名前すらわかりませんでした(笑)

タイトルバーとは、以下のようなものです

 タイトルバー

写真でタイトルバーを作る人もいますが、それだと検索エンジンに

テキストとしてみなされません。

またタイトルバーの中に文字を入力することができません。

本来ならば、このタイトルバーは、

CSSで表示するのが主流です。

しかし、人によっては、そういう知識を得ることより

とにかく記事を書くことを最優先にしている人もいます。

そんな方が、簡単にタイトルバーを表示させる方法を次で説明します

タイトルバーを簡単に表示させる方法

デザインにこだわらなければ、表示させるのは、とても簡単です!

わずか、数クリックでできます。

もちろん作ったタイトルバーに文字を入力することもできます。

また、そのタイトルバーを見出しとして使うこともできます

※h2、h3タグとして使うこともできます

では、実際にその手順について順番に説明します

 TinyMCE Advanced というプラグインをインストールして有効化します

1、まず、ワードプレスに TinyMCE Advanced というプラグインが

インストールされて有効化されているかを確認してください

TinyMCE Advancedは、テキストエディターを使いやすくするプラグインです!

2、確認の仕方は、ワードプレスの管理画面の プラグイン にマウスカーソルを

あわせて インストール済みプラグイン をクリックします

3、インストールしている プラグインの一覧が出ますので

そこで TinyMCE Advanced を探してください

以下のようになっていれば、インストールされて、有効化されています

赤枠で囲んだ部分に青いバーがあれば、有効になっています。

もし、TinyMCE Advanced がインストールされていても

有効化されていない場合は、

有効化をクリックしてください

それで、有効になります。左横に青いバーが表示されるはずです

4、もし TinyMCE Advanced がインストールされていない場合は

以下の記事でTinyMCE Advancedのインストールと有効化の仕方を書いています

1 表を使うことができるようになるプラグイン

そちらを先にお読みください(新しいタブで表示されます)

TinyMCE Advanced(プラグイン)の機能を使って
タイトルバーを表示させる方法

上記でプラグインがインストールされて有効化されていれば

すぐに記事の文中にタイトルバーを表示できます

1、まず、記事の文中でタイトルバーを表示したい場所を

クリックしてください(普通に文章を書くときと同じです)

以下のような感じです

以下は写真です

2、次に上の状態で、記事の投稿画面の上部の操作パネルで

フォーマット をクリックします

そして新しく表示されたメニューの中の スタイル にマウスカーソルを

合わせます

3、さらにメニューが開きますので、下にスクロールしていきます

すると上の写真のように

primaryボックス

successボックス

infoボックス

warningボックス

dangerボックス

という項目が表示されます

まずは、試しに、

primary ボックス をクリックしてみます

すると以下のようにタイトルバーが表示されます

以下は写真です

4、タイトルバーが出現しますので

そこにテキストを入力することができます

このように簡単に数クリックでタイトルバーを表示させることができます

表示させることのできるタイトルバーの種類

primaryボックスをクリックすると以下のタイトルバーが表示されます

successボックスをクリックすると以下のタイトルバーが表示されます

 

infoボックスをクリックすると以下のタイトルバーが表示されます

warningボックスをクリックすると以下のタイトルバーが表示されます

dangerボックスをクリックすると以下のタイトルバーが表示されます

すべて、テキストの入力が可能ですので色々な使い方があると思います

表示したタイトルバーを見出しとして使う方法!

これも非常に簡単です

1、上記で表示させたタイトルバーにテキストを入力します

以下のような感じです(テキストの色は自由に変更できます)

2、テキストを入力させたタイトルバーのテキスト部分を

マウスをドラッグして囲みます(青く表示させます)

3、上の状態で、記事の投稿画面の操作パネルの 段落 をクリックして

好きな見出しを選びます

見出し2=h2 見出し3=h3  などです

これで、タイトルバーが見出しの役割を持ちます

実際に見出し2を上の場合で選択すると

以下のようにネット上で表示されます

色々試してみるとよいでしょう

見出し1=h1タグは、基本的に1つの記事に1つが原則です

基本的には、記事のタイトルが自動的に見出し1=h1

に使われていますので、見出しを使うなら見出し2=h2以降になります

通常よく使う見出しは、見出し2=h2~見出し4=h4

ぐらいではないでしょうか?もちろん人によって違います。

うまく表示されない場合は

非常に便利な機能なのですが

たまにうまく表示されない場合があります

タイトルバーがうまく表示されないのではなく

その下に書いたテキストが、うまく表示されない場合があります

以下の写真は、実際にこの記事を書いているときの画面です

記事の投稿画面では、行間が綺麗に開いているのですが

実際にネット上で見ると上の写真のようになってしまいました

行間がありませんね。びっしりです。

原因は、1度タイトルバーを表示してから、違うタイトルバーに変更したときに

しっかりと前のタイトルバーのコードが削除されていなかったためだと思います

なので、一度タイトルバーを表示してから違うタイトルバーに変更する場合は

ちゃんとタイトルバーを削除しましょう

具体的に言うと

以下は写真です(例)

違うタイトルバーに変更したくなったら下のようにしっかりと

削除してから新しいタイトルバーを表示しましょう

以下は写真です(例)

そうでないとテキストモードにするとわかりますが

下に文章を書いていくと

コードの欠片?(div)がいたるところに散乱して

タイトルバーを設置した以降の文章の隙間が

おかしくなる場合があります

それでもうまく表示されない場合は?

それでもうまく表示されない場合は、

タイトルバーを表示させる前に

その下に先に文章を書いておいてから

文章と文章の間にタイトルバーを表示させると

今のところ失敗がありません

以下のような感じです

もし行間がうまく表示されなかった場合は?

必要の無いタグやコードを削除してもいいのですが

ある程度長く文章を書いてしまってから気が付いた場合

それだとかなり手間がかかります

その場合は、一度、自分の書いた文章をPCのテキストなどにコピーしておいて

表示がおかしくなった部分を削除して

書き直したほうが早いと思います

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする