WordPressでブログの表示や装飾が崩れてしまった時の修正方法

WordPressで記事を書いていて、見出しをつけたりフォントサイズを変えたり、背景色をつけたりと装飾をしますよね。
その際に、指定したい箇所以外も装飾されてしまった、なんてことはありませんか?
本日はそんな文字の装飾がおかしくなってしまった際の直し方、またおかしくならない様にするにはどうすればよいのかをご紹介します。

見出しの装飾がおかしくなる理由と直し方

では、なぜ装飾がおかしくなってしまうのか、実際にブログ記事を書いて文字の装飾をしていて起こり得ることをご紹介します。

へんになる

見出しをメニューバーから選択をして変更する時に、設定したい場所とは別の箇所にも見出しとして装飾されてしまったことはないでしょうか。
このようになってしまう原因はWordPressでの改行方法にあります。

WordPressのビジュアルエディタには二つの改行のやり方があります。
一つは「Enterキー」のみを押して改行させる方法、もう一つは「Shiftキー+Enterキー」を押す改行です。
「Enterキー」のみの改行では、段落がわけられます。
一方、「Shiftキー+Enterキー」の場合は段落がわかれずに、改行をします。

見出しを巻き込んでしまった場合は一度「段落」をクリックすれば装飾がリセットされます。
見出しに装飾をつけたい場合はEnterキーのみの改行をして段落を分け、見出しの装飾を行なうようにしてください。

画像に見出しが入る理由と直し方

スクリーンショット 2016-04-04 16.52.53

みなさんは画像を挿入していて、見出しが入ってしまったことはないでしょうか。
こちらも先程の「段落」に戻し改行を行い、見出しに巻き込ませない方法があります。
他にもテキストエディタで修正する方法があるので紹介いたします。

テキストエディタで修正する方法

スクリーンショット_2016-04-04_16_57_25

エディタの右上にある「ビジュアル」「テキスト」とある中のテキストをクリックします。
すると先ほどは文字の装飾や画像が表示されていましたが、文字とHTMLタグだけが表示されるようになりました。

改行
赤でマークしてある箇所が見出しの指定をしているタグで、青でマークしている箇所が画像を指定しているタグです。
画像に見出しが付いてしまうのは、赤でマークしてある見出しタグの中に青でマークしてある画像タグが入っているのが原因です。
画像に見出しをつけないようにするためには、見出しタグから画像タグを出してあげる必要があります。

青でマークしてある画像タグを「ctrl+X」で切り取りをして、赤でマークしてる見出しタグで囲われている外に「ctrl+V」で貼り付けしてあげましょう。
そのまま更新してプレビューでみると画像に見出しが付いていない状態になっていると思います。

改行がうまくいかない場合の直し方

Enterを押してもうまく大きな改行にならないことはありませんか?
テキストエディタで表示を確認すると理由が分かります。

このように「div」というタグが入ってしまうとうまく改行することができません。
その場合はdivを一つずつ削除するか、テキストが多い場合は一度装飾をリセットしましょう。
テキストをビジュアルディタでコピー→テキストエディタへ貼付けをすることで装飾がすべてリセットされ、改行もうまくいくようになります。
装飾がすべてリセットされるため、見出しや文字の装飾等は再度設定するようにしましょう。

装飾や表示の崩れを起こさない方法

大きくは改行がうまくいかない等のように不要なタグが入ってしまうと表示の崩れがおきます。
テキストをWordPress外で書いた場合はテキストエディタに貼付けして、その後文字の装飾をするようにしましょう。

Wordで作成した文章がWordPressで文字化けしてしまった時の対処方法
https://www.infact1.co.jp/staff_blog/webmarketing/36923/

まとめ

いかがでしたでしょうか。
WordPressでは、改行のやり方次第で文字の装飾が意図しない形で指定されてしまうことがあります。
文字を装飾する際は、文字の打ち込みと改行が終わった段階で装飾をするようにすれば、装飾がおかしくなりません。
もちろん投稿前にプレビューで確認することは必須です。
読みやすいブログを目指して綺麗に装飾するようにしましょう。

  • シェア
  • twitter
The following two tabs change content below.
株式会社インファクトのディレクターです。 フロントエンジニアだった知識を活かしてお客様のためになるような情報発信、制作を行なっております。また日本だけでなくベトナムスタッフとも連携して業務をとりまとめております。 好きなことは、自分で1から考えるものづくり。本の装丁が気になったり布ものやお菓子を自分でデザインして注文するのが好きです。 やっぱりはちみつなしでは生きてゆけない。
  • twitter
  • このエントリーをはてなブックマークに追加
PAGE TOP
LINE it!