こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。
ホームページやブログ運営では特定位置で文字を改行したいシチュエーションがありますよね。スマートフォンとパソコンではそもそも文章の折り返し地点が違うのでどちらかは現状維持で片方のみ改行を効かせたい場面があるかもしれません。本来は文章側のリライトで調整するのが望ましいですが厳しい場合もありますよね。
下記でカンタンにご紹介いたします。
スマートフォンだけ文章の特定位置で改行する方法
方法としては改行をどう扱うかを外部からCSSでコントロールすれば解決できます。
パソコンでの改行状態
下記はパソコンでの文章です。改行の折り返しポイントとしてはちょうど良い位置にあります。少しわかりづらいかもしれませんが「WPホームページ研究所」の直後で文章全体が改行で折り返されていますね。
スマホでの改行状態
そして以下がスマホで開いた画面です。念のためわかりやすいように少し拡大しておきます。文章の途中にある「WPホームページ研究所」のカッコが上側に表示されていてパソコンと比べると少し微妙ですよね。
改行位置を指定する方法
解決方法は「あらかじめ改行タグを差し込んでパソコンのみ無効化する」です。つまり、パソコンは現状維持でスマートフォン側のみ折り返し地点を意図的に指定しておくことで期待通りの位置で改行できます。
そのため<br>「WPホームページ研究所」のウェブサイトではカンタンに言えば「パソコン側では改行をスルーさせてスマートフォン側でのみ改行を効かせるだけ」ですね。ただ、上記では他の改行に対してもCSSが効いてしまう可能性があるのでclassを振っておけばOK。
そのため<br class="sp">「WPホームページ研究所」のウェブサイトではそしてCSS側でスマートフォンの解像度に対して有効化する流れとなります。
/* パソコンでは改行しない */
br.sp {
display: none;
}
/* スマホでは改行する */
@media screen and (max-width:768px) {
br.sp {
display: block;
}
}ただ、上記のように解像度でまとめて指定すると768px以下全部で指定箇所の改行が効いてしまうのでもう少し細かく指定する必要があります。ちなみに解像度の範囲を指定しつつ記述するサンプルが下記です。
/* パソコンでは改行しない */
br.sp {
display: none;
}
/* スマホでは改行する */
@media screen and (min-width: 480px) and (max-width: 768px) {
br.sp {
display: block;
}
}細かく洗い出してCSS対応するなら可能ですが実際は文章側のリライトで調整する方が早いのかもしれません。実際に差し込んだ例が以下となります。該当記事のエディターからタグを流し込んでいる状態です。
調整後の改行位置を確認
下記がスマホで開いた画面ですね。しっかり指定した文章位置で改行されています。
CSSの指定範囲を間違えるとスマートフォンの閲覧環境によって予期しない改行になったりと注意も必要です。
折り返し場所を変える方法
もっと自然に仕上げるなら「word-break」というCSSを使う方法もあります。以前英単語の折り返し位置で記事にしています。念のため記事リンクを貼っておきますね。これらを日本語に適用すればOKですね。
具体的には「折り返させない位置でタグを挟んで指定する」という方法になります。
そのため<span class="keeptext">「WPホームページ研究所」</span>のウェブサイトではそしてテキストに対してキープする命令をCSSで追記すれば解決できます。
span.keeptext {
word-break: keep-all;
}文章途中の改行位置１つでもさまざまな解決方法があるので悩みますよね。本記事がご参考になれば幸いです。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
