brはダメ? WordPressでプラグインを使わず簡単に「連続改行」する方法

brはダメ? WordPressでプラグインを使わず簡単に「連続改行」する方法

Enterボタン

photo by Bruce Guenter

前々から記事を書く際の連続改行をしたかったのですがする方法がわからなかったので今回トライしてみました。

ちなみにWordPressは普通に改行するだけじゃ連続改行ができないようになっています。

2行以上の改行をしても無効になって1行になってしまうのです。

試しに「ビジュアルエディタ」で改行「enter」と半改行「enter」+「shift」それぞれで試してみるも連続の改行ができません。

それに「enter」だけの改行を使うとスマホの表示だと改行部分になぜだか「・」が表示されてしまうのでそれはそれで見た感じがよろしくないです。

そこで<br>タグを重複させての改行も試してみました。

kaigyou1

「テキストエディタ」から→「ビジュアルエディタ」に切り替えた段階では成功しているかんじですが

kaigyou2b

「テキストエディタ」に戻すか「更新」して記事を表示させると重複部分が消えてしまいました。

どうやら<br>タグを連続して連続改行として使う事は出来ないし環境により使う事は出来るとしても記述の文法的に推奨されていないようです。


・プラグインを使う

プラグインを使い改行するのはどうでしょうか?

WordPressで連続改行するためのプラグインは「TinyMCE Advanced」「brBrb」などがあります。

WordPress3.1以降からプラグインを使わなくても連続改行の設定が出来るようになった。(2011年2月14日にバージョン3.1がリリースされている)

改行はプラグインによっては不具合が起きる可能性があるとか。

その他に連続改行する何かいい方法はないんでしょうか?

<br></br>で囲む方法はその場では改行できても更新するといつの間にやら元に戻ってしまいました。

・「margin」を指定する

このようにマージンで余白を作ると解決できました!

<p style="margin: 1em 0em 2em;">文章</p>

数字の意味は左から(上、左右、下)になります。これで連続改行の様に上下の空白ができましたね!
ただ、ここで一つ問題が生じました。この方法だと一つ一つの<p>要素ごとにタグを入れていかないといけないので面倒なんです。

何かいい方法は・・・

ありました!CSSに直接書き込めばいいんです。 当たり前といえば当たり前ですが。

p {
  font-size: 15px;
  margin: 1em 0em 2em;
}

これで毎回一つ一つタグを入れなくても自動で改行してくれます。細かい調節はやってみて下さい。

是非皆さんも今日から連続改行をやってみましょう。

[ad2]
[ad3]

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ジョン齊藤のアバター ジョン齊藤 ブログ運営者 / 執筆者

ブログ歴7年 / 10万PV達成 / ブロガー・動画編集者 / 使用テーマSWELL

コメント

コメントする

目次
閉じる