WordPress、Mac、その他日常で覚えておくべきことを備忘録としてメモしています。

saketorock

WordPress

WordPressの人気テーマ「affinger4」でスマホで表示するときだけ記事の改行を無効にする方法

投稿日:

先日、がっちりマンデーを観たときのこと。

糸井重里氏が運営する
「ほぼ日」のことを紹介していた。

ほぼ日では、PCに記載する文章は
幅27文字を最大文字数として
表現しているという。

読みやすさを追求している証拠である。

実際にマネしてみると、
たしかに読みやすい。

しかし、ここで問題発生。

改行を多用すると
スマホで表示した時は
逆に読みにくくなることがある。

そこで備忘録。

スマホでは改行がされない
仕様に変更する方法を紹介する。

たとえばこんな感じに修正する方法だ。

右側のほうが読みやすいでしょう?

スポンサーリンク

GoogleAdSense

cssでスマホの改行を無効にする

やり方は案外カンタンです。

CSSに以下を追記するだけ。

以上ですが、
さすがにこれだけの説明では不親切でしょう。

子テーマのCSSに追記する

WordPressの場合、
「スマホの場合は改行を無効にする」のを反映するなら、
管理画面から、「外観」>テーマの編集を選択。

テーマのスタイルシートを編集する必要があります。

子テーマのstyle.cssを開き、
さきほどコードを追記すればOKです。

まとめ

カンタンだけど、
忘れがちなのでメモしておきました。

スマホの閲覧率が高まる今、
相当重要な施策だと感じています。

GoogleAdSense

GoogleAdSense

-WordPress

Copyright© saketorock , 2017 All Rights Reserved.