▶ Windows 11情報をお求めの方はこちらをクリック

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

2 min

有料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行開けて改行できない場合は、ぜひ参考にしてみてくださいね!

SEパパ

SEパパ

外資系IT企業SE職で2児の父ちゃん!職業柄かリサーチ&問題解決が好き。

幅広いジャンルで「お悩み解決」記事を執筆中。月間最高24万PV。雑誌掲載。

読者様に役立つ情報提供を心がけています。

カテゴリー:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA