スマホからWEBサイトを閲覧することはもう当たり前です。
サイトを制作する側も、スマホからの見え方を必ず意識する必要があります。WordPressを活用する際もレスポンシブ対応のテーマを使って終わりではありません。デザインや大枠の部分は最適化されて表示されても、テキスト部分はどうでしょうか？変なところで改行されて字余りになったり、バランスが悪くなっていたりしませんか？
弊社で販売しているテーマでもスマホとPCで表示するコンテンツを別々に設定することができるテーマはございます。しかし、デバイスごとのテキストの改行位置まで自動認識できる機能は、まだございません。
というわけで、今回はHTMLとCSSを少しだけ使って、閲覧するデバイスによってテキストの改行位置を変更する簡単な方法をご紹介したいと思います。
スマホでのみ改行したい時に使える一番シンプルな方法
さっそくスマホで見た際にのみテキストの改行位置を変更する方法をご紹介いたします。
例えば、スマホでのみ以下のように改行して表示したい場合は、改行タグを任意の箇所にセットして、PCでそれを無効にすればOKです。
あいうえお
かきくけこ
HTMLの例はこんな感じです。
<p>あいうえお<br class="br-sp">かきくけこ</p>このようにまずは「<br class="br-sp">」を改行したい位置に設置します。クラスはスマホでのみ適用されるように、わかりやすく"br-sp"としていますが、任意で変更しても大丈夫です。
あとは、指定したクラスに対してCSSで以下のように記述いたします。メディアクエリを使って、768px以上のサイズだと.br-spが無効化されるという意味の記述になります。
@media screen and (min-width: 768px){
.br-sp {display: none; }
}上記の場合、iPad以上のサイズのデバイスでは改行が無くなるというブレイクポイントの一例ですので、参考に応用してみてください。とくにこだわりがない場合は、上記の例をそのままコピーしてお使いいただけると思います。ブレイクポイントや、メディアクエリについて知りたい方は、以下の記事が参考になると思いますので、よろしければどうぞ。
昨今はスマホの普及により、ウェブサイトを制作する上でもモバイルファーストの風潮がどんどん強くなっています。スマホ環境で見られることを想定して制作されたウェブサイトでない限り、PC用のウェブサイトをスマホ用やタブレット用の表示に切り替える必要があります。それがレスポンシブWebデザインと呼ばれる仕様で...
デバイスごとに改行位置を変更することは必要なのか？
読者に正しく情報を伝えるのは当たり前ですが、ただ単に伝えるのだけでなく、見た人が美しく感じることがより良い印象を残すと私たちは考えます。SEO的なテクニックだけでなく、読みやすい箇所で改行されていて、かつ美しいと感じられることも大切です。
デバイスごとの改行位置の設定の有無を比較してみた
まずこちらを見てみてください。PCでもスマホでも同じ位置で改行している場合は以下のような感じです。
PCでコンテンツを制作することが多いと思いますが、PCの画面サイズにフィットさせてテキストの長さなどを考えると、スマホではこのような表示になりがちです。この例では、PCとスマホで中央寄せにして表示しているので、読みにくさというより見た目のバランスが悪いですね。見出しは字余りになっています。
続いてスマホ環境でバランスのいい位置で改行したこちらはどうでしょう？
こうして比較すると後者の方が美しくまとまっていると思いませんか？
確かにテキストの中央寄せを外したり、フォントサイズを変更することで、キレイに表示させることも可能でしょう。しかし、サイズが小さいと逆に読みにくくなったり、ページ全体のバランスを考えた時に一部だけサイズ感がおかしくなったり、別の箇所が改行されてしまったりするからですね。
上の例のようにデバイスによって改行位置を変更すれば、PCで閲覧時の雰囲気に合わせることもでき、全体のサイズ感やバランスを損なうことはありません。
ではどのような箇所でデバイス別の改行を設定した方がいいのか
方法がわかってしまえば作業自体は簡単ですが、すべてのページでこの設定を行うのはかなり骨の折れる作業です。では、最低限どういったページで設定しておくべきなのか。
- トップページ
- ランディングページ
基本は上の2種類のページでいいと思います。どちらもユーザーが最初に流入する可能性が高いページですね。トップページはサイトの玄関口なので、スマホ環境で読みにくい箇所で改行されているとイメージダウンします。ここ数ヶ月以内にリリースした「Tree」「HAKU」「EGO.」では、テーマオプション内でトップページのコンテンツをスマホとPCで分けて設定可能なので、この作業は必要ありません。
ランディングページについては、商品やサービスの内容をしっかりと伝える必要があるので、スマホからの読みやすさや美しさが重要になることは当然ですよね。あなたの制作したサイトのトップページやランディングページもスマホからその見え方を確認してみてください。
まとめ
スマホからWEBサイトを閲覧するユーザーも多いので、この辺りの対策は結構重要だと思います。細かい部分の見え方や読みやすさを意識した対策になりますが、決して軽視はできません。今回ご紹介した方法あれば、HTMLで記述した箇所にページごとに反映されるCSSなどを反映できれば自在に改行位置をコントロールできます。ぜひ活用してスマホから見ても美しい文章を実現してみてください。
