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

WordPress

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

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

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

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

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

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

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

そこで備忘録。

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

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

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

[adsense]

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

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

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

/*media Queries タブレットサイズ(480px以下)
----------------------------------------------------*/
@media only screen and (max-width: 480px) {
br { display:none; }

/*-- ここまで --*/
}

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

子テーマのCSSに追記する

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

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

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

まとめ

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

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

コメント