【初心者向け】はてなブログのスマホの文字の大きさを変更

ブログ スマホ 読みやすい

ブログ スマホ 読みやすい

どうもこんにちは。

4児パパです。

 

世間は花の金曜日で、今頃アフターファイブで何をやろうかウキウキしながら、仕事が捗っているのではないのでしょうか?私自身、土日には基本的にお仕事なので、花金だからと言ってさほど影響はありません。

 

ただ休みの前夜はさすがにウキウキしながら過ごしています。頭も冴えます。

 

 

 

ただ次の日が休みだからと言って毎回羽目を外しません。そういう時こそ、自分に磨きをいれて、早期引退を目指します。そもそも少し出世が遅れたので、プライベートで猛勉強し、追い抜く必要がありますからね。まぁ大抵の同僚を追い越す事ができましたが。

 

 

 

 

家事や育児を徹底的に手伝っています。(言い訳はしませんが、料理だけはできません。許してください。)

結婚して14年目ですが下のこ今年で5歳の子なので、後15年は子供達と一緒にいます。幸いですが、上の子(小六)なので手伝いができるようになり、大変助かっております。

 

  

■目次

1.ブログをスマホでの見やすさは生命線

2.記事を書いて、スマホ表示でも確認

3.はてなブログのPCでの文字の大きさを変更

4.はてなブログのスマホでの文字の大きさを変更

5.最後に

 

 

1.ブログをスマホでの見やすさは生命線

ブログのアクセスの大半はスマホから

私のブログにアクセス訪問して頂く人の大半はスマホからです。大体6割〜8割以上がハイエンドモバイルデバイスと呼ばれるデバイスからです。つまりスマホですね。残りはデスクトップとダブレットです。

 

ブログは読者を無視できない

PC版でのデザインをいかに綺麗にしても、スマホからの読者がストレスを抱えて、せっかく訪問してくれたのに、自分のサイトから帰ってしまってはとても残念です。ビジネスにおけるチャンスロスというものですかね。

 

自分のブログを客観的に見つめる

自分の投稿した記事を客観的に見つめ直すのも大切ですよね。もし自分が読者だったらどう思うとか、読者として見やすいのか。変なこだわりが読みづらくしてないか。など

 

ブログを存続する為にスマホの影響は避けて通れない

今後スマホがもっと機能的になったとして、ほとんどが今と同じようにブログのアクセスはスマホからがほとんどとなります。故に自分のブログの存続の為には

 

 

 

2.記事を書いて、スマホ表示でも確認

スマホ表示を確認しながらブログ記事をかく 

大半はスマホから読者が流れてきます。今話題になっているモバイルフレンドリーを心がけていけば、読者にも優しいブログに育っていきます。 

ブログをスマホ表示でも見やすい書き方

スマホ表示にした時に読みづらいのでは、チャンスを逃すようなもの。先ほどお伝えした通り、スマホからのアクセスがほとんどです。スマホでも読みやすいようにポイント抑えます。

 

  1. レスポンシブデザインにする事。これは絶対に避けて通れない。
  2. 改行を多く使って読みやすく。常識の範囲内での改行をおすすめ致します。たまにいるんですよね。めちゃくちゃ改行する人。スクロールするの大変なので、読者には手厳しいです。 
  3. 1ページ1記事です。当たり前ですね。1ページで10記事あったら、わけわからなくなります。

 最低限上記3つはクリアしたいですね。

 

 

ここ最近ではこのブログのスマホでの見易さを追求しています。

 

www.papa-programing.jp

www.papa-programing.jp

 

これからブログを大きくそして改善も兼ねていく方に参考にして頂けましたら幸いです。

 

 

 

3.はてなブログのPCでの文字の大きさを変更

PC表示での文字の大きさを変更

今回スマホメインでお伝えしたいのですが、せっかくなのでPCでの文字表示の変更の仕方もお伝えいたしますね。

 

 

Googleでは16px以上の大きさを推奨されています。残念ながらこのブログのPC版の文字の大きさでさえ、15pxです。ちょっと読みづらいですよね。そしてモバイル面でもこのブログのテーマ【DUDE】はレスポンシブに対応していない為、自分でCSSを入れ込み対応しました。

 

 

 

では手順をおってお伝えします。

  1. まず『ダッシュボード』→『デザイン』→『カスタマイズ』→『デザインCSS』までアクセスしていきます。
  2. 【デザインCSS】をクリックして、コードを記入します。

    ブログ PC表示の文字の大きさ CSS

    ブログ PC表示の文字の大きさ CSS

    /*はてなブログ(PC)での表示の大きさCSS*/
    .entry-content {

    font-size:17px;

    }

    赤文字の数字の部分だけ好みの大きさに変えるだけ。これだけですが、せっかくなのでbefore afterみてみましょう。         こちらが『Before』

    PC表示 文字の大きさ 15px

    PC表示 文字大きさ 15px

    こちらが『After

    PC表示 文字大きさ 17px

    PC表示 文字大きさ 17px

     

 ぜひ簡単なので、少し文字の大きさに悩んでいてモヤモヤしていたのならぜひ試してください!

 

 

4.はてなブログのスマホでの文字の大きさを変更

ブログ スマホ表示 文字

ブログ スマホ表示 文字

スマホ表示での文字の大きさを変更

次にスマホ表示での文字の大きさ変更をしていきます。

  1. まず『ダッシュボード』→『デザイン』→『スマートフォン』→『ヘッダ』までアクセスしていきます。
  2. ヘッダの部分においてコードを記述します。ヘッダをクリックしたら、『タイトル下』をクリックします。

    スマホ はてなブログ CSS

    スマホ はてなブログ CSS
  3. 『タイトル下』をクリック後、CSSを記入します。

    スマホ 文字の大きさ CSS

    スマホ 文字の大きさ CSS

     

    <style type=”text/css”>
    .entry-content {
    font-size:17px;
    }
    </style>

    こちらも赤文字の数字だけ変えるだけです。 

  4. せっかくなのでbefore afterみてみましょう。左が『Before』右が『After』

    f:id:hitoiws:20190705221437p:image

    f:id:hitoiws:20190705221441p:image

 

 

Googleが推奨していますのが16px以上です。正直この数字以下は読みづらいのも確かですね。簡単なのでぜひモバイルファーストを目指して、読みやすい記事を作っていきましょう。

 

 

5.最後に

少しずつブログを大きくしていくのが楽しみの一つですね。始めた頃は量より質を追いかけてしまいがちですが、私は量をこなす事が大切だと思います。

 

 

量をこなす事で、細部にまで目が届くようになります。否が応でも細部に目がいくようになります。プロのブロガーが「あれをやったほうがよい」とか「あれも大事」とか「継続してツイートしなさい」と、すぐに気づけなくともそのうち気づけて、実践するようになります。

 

 

私はプログラミングスクールでプログラミングを学びましたが、ググる力はそこで養いました。大抵の情報はネットに落ちています。適切に選びぬくことも大切ですが、そこもブログをやる醍醐味だですね。

 

 

楽しく、時には厳しく。毎日ブログを更新してます。楽しいですが、この習慣付けは自分への励みと共に、やらないと変わらないと思っているので継続しています。世間は本日花金ですが、寝る間も惜しんでブログを書いてます。努力している人が、必ず報われると信じてます。

 

 

今後も頑張っていきますよ〜

 

だって、

 

人生伸びしろしかないですからね〜

 

 

  

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です