1. 記事・ページの投稿
  2. ビジュアルエディタで改行する方法

ビジュアルエディタで改行する方法

2015/11/13

WordPressビジュアルエディタで、うまく改行できないとお困りではありませんか?その理由(WordPressの改行の仕様)と解決方法について紹介します。

WordPressの改行

WordPressの記事編集方法には、ビジュアルエディタテキストエディタとがあります。

文書作成ソフトやメールソフトなど、キーボードによる入力時の改行は、[Enter](Mac OS Xの場合は[return])キーを一度押すと実行されるのが一般的ですよね。WordPressの場合、テキストエディタでの改行はこの方法で良いのですが、ビジュアルエディタではうまく改行できません。なぜでしょうか?

ビジュアルエディタでの改行

ビジュアルエディタで編集中に、改行したい場所で[Enter(return)]キーを一度押すと、
ビジュアルエディタで編集中に、改行したい場所で[Enter(return)]キーを一度押すと

その前後で空白ができてしまいます。
その前後で空白ができてしまいます

実際のサイトの画面でも、空白が表示されてしまっています(下の画像は、テーマ「Twenty Fifteen」の例)。
テーマ「Twenty Fifteen」の例

空白ができる理由

このように空白ができてしまう理由は、[Enter(return)]キーを押した場所の前後で2つの段落に分けられてしまうからです。
空白ができてしまう理由は、2つの段落に分けられてしまうから

さらにくわしく言うと、上図の段落①・②それぞれにHTMLのpタグが自動挿入されるからというのが空白ができる理由です。今回の例では、次のようなHTMLソースになります。

<p>WordPressのビジュアルエディタでうまく改行ができなくて困っています。いったい、どうすればうまく改行できるのでしょうか?</p>
<p>ふつう、改行といえばEnterキーを押すだけでいいと思いがちですが、ビジュアルエディタではそういう訳にはいかないようです。</p>
HTMLのpタグとは
HTMLでは、<p>~</p>で囲まれた部分は1つの段落(パラグラフ【paragraph】)として扱われます。段落の間隔は、CSS(スタイルシート)で指定されていることが多いため、使用するテーマによって距離が異なります。

ビジュアルエディタで改行させる方法

ビジュアルエディタで、段落分けすることなく改行させるには[Shift + Enter(return)]キーを押してください。
[Shift + Enter(return)]キーで改行できた

おすすめの書籍

小さなお店&会社の WordPress超入門

WordPressでビジネスサイトを作るために必要な、基本的な知識が理解できる“超”入門書。Web制作に必要なHTML・CSS・PHPなどの専門知識がなくても読み進められる1冊です。SEO(検索エンジン最適化)やセキュリティの対策についても解説されています。

おすすめのテーマ

WordPressテーマ「NEXTAGE (tcd021)」

WordPressテーマ「LAW」

コーポレートサイト(企業サイト)向けのテーマ。第一印象で信頼性や専門性を的確にアピールし、Webサイトのゴールである「お問い合わせ」まで自然に繋がっていく“導線”にこだわったテンプレートです。

カテゴリー

ビジネスサイトを作りたいあなたに

おすすめのテーマ、あります。