[speech_bubble type=”ln-flat” subtype=”L1″ icon=”2.jpg” name=”Aさん”] 見出しを挿入しようとすると、選択箇所以外の部分も太字になるんだけどなんで?[/speech_bubble]
[speech_bubble type=”ln-flat” subtype=”R1″ icon=”1.jpg” name=”わたし”] ああ、それWordpressあるあるですね。改行いれるとうまくいきますよ。[/speech_bubble]
[su_spacer size=”30″]
こんな会話をクライアントさんとよくします。
WordPressのビジュアルモードで編集しているときのはなしです。
見出しにしたい箇所を選択して、プルダウンメニューから見出しを選択すると、選択している部分以外も太字に(見出しに)なってしまうという現象。
テキストモードにして、h2やh3などの見出しタグの場所を修正すればいいのですが、毎回その繰り返しだと結構面倒くさいですよね。
上手くいかない原因は改行の仕方にあります。
[ad#co-1]WordPressの改行の種類
ワードプレスで行う改行には2種類あります。
通常の改行と、段落を変えるための改行。
Shiftキー+Enterキー→改行
htmlソースでは<br/>と表示されるもの
Enterキー→段落を変える
htmlではひとつの段落が<p>~</p>で表示されます。
テキストのまとまりごとに段落で区切られていて、段落の中に適宜改行タグがある。というのが正しい文章構造です。
例えばこんな感じ↓
画面に表示されるテキスト
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
これをhtmlで確認すると、下のようなソースになっています。
htmlソース
文字の大きさ、量、字間、行間等を確認するために入れています。</p>
<p>この文章はダミーです。<br/>
文字の大きさ、量、字間、行間等を確認するために入れています。<br>
この文章はダミーです。</p>
<p>この文章はダミーです。<br/>
文字の大きさ、量、字間、行間等を確認するために入れています。</p>
まとまりごとに段落<p>〜</p>が分かれていて、段落の中に改行<br/>がありますよね。
ちなみによくある失敗例
改行の使い分けをしていなくて間違ってる人がたまにいますが、改行を全てEnterキーのみですると、下のように行間が広めの見た目になることがあります。
この文章はダミーです。
文字の大きさ、量、字間、行間等を
確認するために入れています。
この文章はダミーです。
文字の大きさ、量、字間、行間等を
確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を
確認するために入れています。
これをhtmlで確認してみると、下のようになっています。
<p>文字の大きさ、量、字間、行間等を</p>
<p>確認するために入れています。</p>
<p>この文章はダミーです。</p>
<p>この文章はダミーです。</p>
<p>文字の大きさ、量、字間、行間等を</p>
確認するために入れています。</p>
1行ごとに段落になってしまっているんですね。
文章の途中で段落が変わってしまっているので、これだと段落の意味をなしていません。
文章の構造が検索ロボットに上手く伝わらなくなってしまいます。
文章内の改行やひとつの段落内の改行であれば、Shiftキー+Enterキー、段落を変える場合にはEnterキーで改行するのが正しいやり方です。
見出しタグがうまく挿入できない理由
見出しを入れる時に、見出しの前後をShiftキー+Enterキーで改行していると、文章全体に見出しタグが割り当てられてしまいます。
例えば、これが↓
Wordpressの改行の種類<br/>
ワードプレスでの改行には2種類あります。</p>
こうなる↓↓↓
Wordpressの改行の種類<br/>
ワードプレスでの改行には2種類あります。</h2>
記事内に見出しを正しく入れる方法
選択してない部分も太字になってしまう!
全部に見出しのデザインが適用されちゃう!
という人は、見出しの前後を、Enterキーで改行するようにしてください。
そうすると段落が切り替わるので、見出し部分にだけ見出しタグを適用することができます。
これが正解↓
<h2>Wordpressの改行の種類</h2>
<p>ワードプレスでの改行には2種類あります。</p>
※<br/>や<p></p>は、プラグインや環境によっては、テキストモードにしても表示されないので、同じ改行に見えてしまうかもしれません。
2つの改行を正しく使い分けてくださいね。
おまけ
ちなみに、noteの編集画面も同じです。
Shiftキー+Enterキーで改行していると、全部が見出しになってしまいます。
ワードプレスのようにhtmlソースの確認が出来ないので分かりにくいですが、Enterキーで前後を改行してから、見出しを選択するとうまくいきます。
見出しがうまく挿入できない! ストレスだ!
という人は、試してみてください。
[sp]
[ad#co-2]
[/sp]