改行させたり、させなかったりする

PCだけのデザイン想定でサイトを仕上げることが多い。

文中で改行が入ることも多いので、レスポンシブ処理でいろいろ手間がかかる。

以下はワードプレスのビジュアルエディタでの話。

※ブロックエディタでも基本的には同じと思うけれど、「スタイル」の持って行き方は未調査。

よく見かける方法、いろいろNG

brを非表示にすればいいじゃない！というやり方は簡単ですが、

<!-- html -->
コンテンツ文章<br>
コンテンツ文章

/* CSS */
br {
  display: none;
}

ビジュアルエディタのモードを切り替えると、「br」は改行コードに変換されちゃいます。

変換させない方法もあるようだけれど、100%じゃない感じが多し。

「br class=”hoge-br”」などとすれば変換されませんので、明示する。

このうえでモードを切り替えると、

<!-- html -->
コンテンツ文章<br class="hoge-br">コンテンツ文章

と、ソース上の改行も取ってくれるので、「display:none」としても余計な空白が発生しません。

ファイルにハードコーティングする場合は<br>のあとを改行しないよう注意。

テキストモードにしてタグを書き込むのが面倒＆エンドユーザーには推奨出来ないのが難点。

ツールバーに手を加えてタグを挿入するように出来ればいいと思いますが、こちらは未調査。ま、なんか方法はあるでしょう。

プラグインで出来るんだから自力でもできるはずですが、ちょっとややこしそう。

このプラグイン、設定を変えたら編集画面のキャッシュをクリアしないと反映されないところがあるで注意。

<!-- html -->
<span class="block-pc">コンテンツ文章</span><span class="block-pc">コンテンツ文章</span>

/* CSS */
.block-pc {
  display: block;
}

これだと、ビジュアルエディタの「スタイル」内に追加しておけば、ビジュアルモードで改行を制御出来ます。

タグが複雑になるのが難点。