スマホ閲覧改行の最適化で視認性を高めよう

ブログサイトの閲覧はスマホからの閲覧が6割以上です。

GoogleのSEO順位でも、近年はスマホからのサイト閲覧評価が
重視
されるように変化しましたね。

当然、レスポンシブ対応のテーマを使ってブログを構築している方がほとんどだと思います。
さて、ここまで記事を作成してきて改行や字余りが気になったことはありませんか?

スタイルCSSに、3行貼り付ければ自然とレスポンシブでも綺麗な改行設定が実現できます。
早めに設定しておきましょう。

目次

スマホでの改行をいい感じにする設定

横幅が480px以下の場合は、WordPressのshift+Enterでやっている改行を無視してね。って指示です。
480pxのところは数値を変えれば自由に設定できますが、一般的なのが480pxのようです。

外観>テーマ編集>スタイルCSS(デザインCSS)

子テーマ等を使用していて、スタイルCSSがない場合は親テーマのスタイルCSSを開きます。

一番下に以下のコードを追記し、ファイルを更新を押す

下記3行をそのまま、一番下に貼り付ければ終わりです。

[st-pre-sc myclass=”” text=”code” fontawesome=””]

@media screen and (max-width: 480px) {
br { display : none ; }
}

[/st-pre-sc]

できるだけ早くスマホ改行設定はしたほうがいい

WordPressのビジュアル使って文を書いていると、
見た目が気になって割とShift+Enterの改行を使用しているはずです。

初めから上記設定を意識して文を構成しているなら話は別ですが、
そこまで気にして初心者が記載するのは難しいと思われます。

修正記事が多くなる前に、初めから設定して慣れておくのが一番楽だと思います。

ちなみに、PCの視認性は1行何文字がベスト?

PCでの視認性も大事ですね。
個人的には、大体1行30~35文字程度に納めるのが見やすいです。

イメージ、目の視点を動かさずに読める文字数がベストですね。
なので、フォントサイズによって適切な文字数は変わりますのでご注意ください。

読みやすさは、来てくれたユーザーの滞在時間に大きく影響します。
読みにくいブログでは、どれだけ質のいい内容が記載してあっても
すぐに離脱されてしまいます。

PC閲覧している人だけにわかる例 (笑)…をご紹介

▼改行せずに、記載している場合

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#ccc” bgcolor=”#ffffff” borderwidth=”2″ borderradius=”2″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

FINAL FANTASYが大好きな、名古屋の30代OL『ゆら』と申します。

スキな時に、すきなコトを、好きなだけ』

出来るような生き方を目標に、今より少し『プラス』なライフスタイルを目指した奮闘記をお届けします。美味しいお酒とおつまみとゲーム(FF)があれば毎日幸せ。飲み会は誘われたら断らないスタイルです。究極のインドア派だけど、旅行やお出かけも大好き。

[/st-mybox]

▼改行して、記載している場合

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#ccc” bgcolor=”#ffffff” borderwidth=”2″ borderradius=”2″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

FINAL FANTASYが大好きな、名古屋の30代OL『ゆら』と申します。

スキな時に、すきなコトを、好きなだけ』

出来るような生き方を目標に、
今より少し『プラス』なライフスタイルを目指した奮闘記をお届けします。

美味しいお酒とおつまみとゲーム(FF)があれば毎日幸せ。
飲み会は誘われたら断らないスタイルです。
究極のインドア派だけど、旅行やお出かけも大好き。

[/st-mybox]

初期の段階から、読み手側への配慮もしっかり持って構成できたら嬉しいですね。

[st-mybox title=”メモ” fontawesome=”fa-file-text-o” color=”#757575″ bordercolor=”” bgcolor=”#fafafa” borderwidth=”0″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

たった3行のコード追加で、PCもスマホも最適な改行が実現可能!
箇条書き等『Shift+Enter』の使い方に注意。
記事の修正が増える前に、設定しよう!

[/st-mybox]

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる