AFFINGER5

AFFINGER5(アフィンガー5)でスマホ表示を見やすくする方法!

AFFINGER5(アフィンガー5)でスマホ表示を見やすくする方法!

 

誠太
こんにちは、誠太です!
アーサー
アーサーでーす♬

 

ブログをスマホで見た時に、なんかしっくり来ないことってありませんか?

 

ボクもしばらくスマホの表示には頭を悩ませていたのですが、最近良い感じにスマホの表示とPC表示のバランスが取れる様になってきました。

 

特別なことをしなくても、スマホの表示をカンタンに見やすくする方法を今回は紹介したいと思います。

 

本記事の内容

  • CSSを使用し、スマホ表示を見やすくする方法
  • 改行と段落使用のポイント
  • 見やすいとされる文字サイズについて

 

CSSコードを使用してスマホの画面を見やすくする

CSSコードを使用してスマホの画面を見やすくする

 

具体的なスマホ表示の改善策としては、PCで行った改行をスマホでは無効化することです。

 

これだけでかなり読みやすさが変わってくるので、今のスマホ表示に困っている場合はかなり有効な手段になります。

 

スマホ表示の改善方法①:「CSS」にコードを書き込む

最初にCSSのコードを追加する方法を紹介します。

方法としては、「外観」→「カスタマイズ」→「追加CSS」に次のコードを入力するだけでOKです。

 

追加CSSに入力するコード(コピペでOK!)

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

 

コードの意味合いは「横幅480px以下のデバイスで表示する場合、改行を無視する」となっています。

 

CSSコード入力手順

 

アーサー
これだったら手軽に出来るね!

スマホ表示の見やすさを記事のレイアウトで調整する

スマホ表示の見やすさを記事のレイアウトで調整する

 

先程はCSSコードによる改行無視の方法をご紹介しましたが、ここでは記事作成の段階で調整を行います。

 

これもスマホでの見やすさに直結する方法になるので、活用してみてくださいね!

 

スマホ表示の改善方法②:改行と段落をうまく使用する

ぼくがここ最近、PC表示とモバイル表示のバランスを取るための書き方としてこのような工夫をしています。

 

ブログ作成時のライティングポイント

  • 途中で改行を入れずにそのまま入力し続ける
  • 段落を1段必ず開ける

 

今までぼくが書いてきた方法は「、」を区切りにして改行を行ったり、ある程度の文字数に到達した時に目分量で改行していました。

 

しかし、それだとマーカーを使用した時に改行の位置で縦に色が切れていたんです。

 

その点に違和感を感じたのと、PC表示での見栄えがあまりに悪いので今回のこの方法にチェンジしました。

 

今までのライティング方法

 こんにちは、誠太です。

 

昨日は、雨が降っていましたが、
皆さんは体調面などで苦労はしませんでしたか?

 

ボクは頭痛持ちなので低気圧が来襲すると、
とても頭痛に悩まされます。

 

現在のライティング方法

こんにちは、誠太です。

↓(1段落開け)

昨日は、雨が降っていましたが、皆さんは体調面などで苦労はしませんでしたか?

↓(1段落開け)

ボクは頭痛持ちなので低気圧が来襲すると、とても頭痛に悩まされます。

 

少し文章が短めになりましたが「。」に到達するまではこのまま横に流し書きでライティングしています。

 

こうすることによって、文章が不自然なところで切れることを防げますし、文章を読むストレスがかなり軽減されたはずです。

 

ぼくの記事が見やすいと言って頂けるのは、適度な間隔が空いて視覚的に見やすくなるこの2つの方法が効いてくれているのだと思うので、使えそうであれば使ってみて下さい。

 

誠太
記事作成のときでも工夫すれば見やすくなります!

 

ブログの書き方は下記の記事を参考にすると、より理解が深まります!

ブログの書き方|記事のテンプレートを使用して効率よくブログ更新!

  誠太こんにちは、誠太です!   ブログを書くことにまだ慣れていないときは、どうやってブログを書いたら良いかわからずに困ってしまうことが多いです。   解決策は、『ブロ ...

続きを見る

文字サイズを見直す

キーボード

 

文字サイズも視覚的に見やすくするために重要な要素になってきます。

何回か文字サイズを試しましたが、いま一番しっくりきている文字サイズは下記になります。

 

誠太が設定している文字サイズ

  • スマホ:16px
  • タブレット:16px
  • パソコン:17px

 

スマホ・タブレットでは、小さすぎず出来る限り文章が見られるサイズ。

パソコンでは、画面がどうしても大きくなるので1pxだけ大きくしています。

 

小さすぎず大きすぎずの絶妙なラインを設定できていると思うので、文字サイズがデフォルトでしっくり来ない場合は、マネしてみてくださいね♬

 

アーサー
シビアな設定だと思うからどんどん真似してね!

コンテンツ次第ではこの方法を使用しても見づらくなる

コンテンツ次第ではこの方法を使用しても見づらくなる

 

アーサー
スマホの表示を見やすくするにも色々方法があるんだね!
誠太
そうなんだ!ひとつの方法として実践してみてほしいねっ♬

 

今回はAFFINGER5ユーザー向けのスマホでブログが見やすくなる方法を紹介しました!

 

ボクが紹介した方法は、あくまで1つの手段として活用してみて下さい。

 

あなたが記事内のデザインを更に凝ったデザインにしたり、独創性を追求したり、あなたのオリジナリティが記事内に登場することによって情報は増加します。

 

その際は、文章を減らしたり記事内コンテンツの量を減らしたりと更に工夫する必要が出てくるでしょう。

 

この記事での方法が最適ではなく、ここから更にあなたのブログに馴染むようにアレンジをして、自分なりの見やすい表示を追求してみて下さい!

 

\ 合わせて読みたい /

  • この記事を書いた人
  • 最新記事
誠太

誠太

理系の文系ブロガー。理系脳ではプログラミングを、文系脳ではブログの運営についてのHow toを話題にブログで紹介しています。年間で1,600万を売り上げた実績を元にマーケティングにも触れ、プログラミングの学習方法やブログでの稼ぎ方について情報発信中!

よく読まれている記事

1

  AFFINGER5を購入しようか迷っているけど、損をしない特典が付いているところから購入したい。実用特典ってどんな特典なの?   ご覧いただいてありがとうございます。 &nbs ...

2

スポンサーリンク   アフィリエイトに向いているASPってあるのかな?もし稼ぎやすいASPがあるなら登録したいんだけど、おすすめのASPってある?   こんな悩みに解決しようと思い ...

3

  誠太こんにちは、誠太です!   ブログを運営していると、自分の文章をもっと良くしたいと思ってしまうものではないでしょうか。   しかし、ただブログを書いているだけでは ...

4

  ブログのSEO対策はいろんな情報があって、何が正しい対策なのかわからない場合が多く困ってしまいませんか?   本記事では、今回紹介するSEO対策を行い上位表示を確認できたことを ...

5

  誠太こんにちは、誠太です!   はてなブログをお使いのあなたにお伝えしなければいけないことがあります。 はてなブログから『はてなブログPro』に移行するのはやめましょう。 &n ...

-AFFINGER5
-

Copyright© SEITALITY , 2019 All Rights Reserved.