WordPressビジュアルエディタで見出しタグが上手く挿入出来ないときの対処法

見出しの挿入がうまくいかない

Aさん
見出しを挿入しようとすると、選択箇所以外の部分も太字になるんだけどなんで?
わたし
 ああ、それWordpressあるあるですね。改行いれるとうまくいきますよ。
[su_spacer size=”30″]

こんな会話をクライアントさんとよくします。

WordPressのビジュアルモードで編集しているときのはなしです。

見出しにしたい箇所を選択して、プルダウンメニューから見出しを選択すると、選択している部分以外も太字に(見出しに)なってしまうという現象。

テキストモードにして、h2やh3などの見出しタグの場所を修正すればいいのですが、毎回その繰り返しだと結構面倒くさいですよね。

上手くいかない原因は改行の仕方にあります。

[ad#co-1]

WordPressの改行の種類

ワードプレスで行う改行には2種類あります。

通常の改行と、段落を変えるための改行。

Shiftキー+Enterキー→改行
htmlソースでは<br/>と表示されるもの

Enterキー→段落を変える
htmlではひとつの段落が<p>~</p>で表示されます。

テキストのまとまりごとに段落で区切られていて、段落の中に適宜改行タグがある。というのが正しい文章構造です。

例えばこんな感じ↓

画面に表示されるテキスト

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

これをhtmlで確認すると、下のようなソースになっています。

htmlソース

<p>この文章はダミーです。<br/>
文字の大きさ、量、字間、行間等を確認するために入れています。</p>
<p>この文章はダミーです。<br/>
文字の大きさ、量、字間、行間等を確認するために入れています。<br>
この文章はダミーです。</p>
<p>この文章はダミーです。<br/>
文字の大きさ、量、字間、行間等を確認するために入れています。</p>

まとまりごとに段落<p>〜</p>が分かれていて、段落の中に改行<br/>がありますよね。

ちなみによくある失敗例

改行の使い分けをしていなくて間違ってる人がたまにいますが、改行を全てEnterキーのみですると、下のように行間が広めの見た目になることがあります。

この文章はダミーです。

文字の大きさ、量、字間、行間等を

確認するために入れています。

この文章はダミーです。

文字の大きさ、量、字間、行間等を

確認するために入れています。

この文章はダミーです。

この文章はダミーです。

文字の大きさ、量、字間、行間等を

確認するために入れています。

これをhtmlで確認してみると、下のようになっています。

<p>この文章はダミーです。</p>
<p>文字の大きさ、量、字間、行間等を</p>
<p>確認するために入れています。</p>
<p>この文章はダミーです。</p>
<p>この文章はダミーです。</p>
<p>文字の大きさ、量、字間、行間等を</p>
確認するために入れています。</p>

1行ごとに段落になってしまっているんですね。

文章の途中で段落が変わってしまっているので、これだと段落の意味をなしていません。
文章の構造が検索ロボットに上手く伝わらなくなってしまいます。

文章内の改行やひとつの段落内の改行であれば、Shiftキー+Enterキー、段落を変える場合にはEnterキーで改行するのが正しいやり方です。

見出しタグがうまく挿入できない理由

見出しを入れる時に、見出しの前後をShiftキー+Enterキーで改行していると、文章全体に見出しタグが割り当てられてしまいます。

例えば、これが↓

<p>今日はその対処法について、説明していきます。<br/>
Wordpressの改行の種類<br/>
ワードプレスでの改行には2種類あります。</p>

こうなる↓↓↓

<h2>今日はその対処法について、説明していきます。<br/>
Wordpressの改行の種類<br/>
ワードプレスでの改行には2種類あります。</h2>

記事内に見出しを正しく入れる方法

選択してない部分も太字になってしまう!
全部に見出しのデザインが適用されちゃう!

という人は、見出しの前後を、Enterキーで改行するようにしてください。

そうすると段落が切り替わるので、見出し部分にだけ見出しタグを適用することができます。

これが正解↓

<p>今日はその対処法について、説明していきます。</p>
<h2>Wordpressの改行の種類</h2>
<p>ワードプレスでの改行には2種類あります。</p>

※<br/>や<p></p>は、プラグインや環境によっては、テキストモードにしても表示されないので、同じ改行に見えてしまうかもしれません。

2つの改行を正しく使い分けてくださいね。

おまけ

ちなみに、noteの編集画面も同じです。

Shiftキー+Enterキーで改行していると、全部が見出しになってしまいます。

ワードプレスのようにhtmlソースの確認が出来ないので分かりにくいですが、Enterキーで前後を改行してから、見出しを選択するとうまくいきます。

見出しがうまく挿入できない! ストレスだ!

という人は、試してみてください。

[sp] [ad#co-2] [/sp]
見出しの挿入がうまくいかない
最新情報をチェックしよう!