WordPressでdivタグの文章を1行開けて改行する方法|ビジュアルエディタでできないときの解決法

有料WordPressテーマに用意されている便利機能の中には、divタグを使っている場合があります。※divタグとは、WordPressテキストエディタで表示される<div></div>のことです。

このdivタグ内に記載する文章を改行したいときに少し困ったことが起きます。

WordPressビジュアルエディターで改行したい箇所でEnterキーを押すと、通常「&nbsp;」が入力されますが、divタグ内ではこの動きになりません。

ビジュアルエディタ上では一見、1行開いているように見えてもプレビューを表示すると詰まって表示されます。

これを解決して1行開けて改行する方法を紹介します。

divタグで改行するサンプルコード

以下のコードで説明します。


<div class="test">
てすと
テスト
TEST
</div>

div内で改行するとこうなる

WordPressのビジュアルエディターで、テストの後ろでEnterキーを押して、TESTを1行下に下げてみました。

ビジュアルエディタ上では、次のようにみえます。

てすと
テスト

TEST

これをテキストエディタで表示した場合は、次のようにみえます。


<div class="test">
てすと
テスト
</div>

<div class="test">
TEST
</div>

さらにプレビューでみた場合は、次のようになります。

てすと
テスト
TEST

ビジュアルエディタでは1行開いているように見えましたが、プレビューで見ると1行開いていません。。。

divタグの文章を1行開けて改行する方法

次のように、1行開けたい文章を<div style=”margin-bottom: 1.5em;”>で括ります。※1.5emの値を変更することで、隙間の幅を調整することができます。狭くしたいのであれば、値を小さく、広くしたいのであれば、値を大きくしてください。


<div class="test">
<div style="margin-bottom: 1.5em;">
てすと
テスト
</div>
</div>

<div class="test">
TEST
</div>

これだけで、テストの↓に隙間ができますので、試してみてください。

divタグで1行開けて改行する方法まとめ

今回は、有料WordPressテーマに用意されている便利機能などで、divタグを使っている場合に、文章を1行開けて改行する方法を紹介しました!

divタグで1行開けて改行できない場合は、ぜひ参考にしてみてくださいね!

シェアする

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

フォローする