C55 40代の資産運用,投資ブログ 

米国株を中心に,40代の資産運用,投資について書いています

はてなブログのスマホ画面を,見やすく改変しました.

ブログを書くときや,他のブログを拝見するときはPCもしくはiPadを使っています.

 自分のブログを見直すときも,PCで誤字脱字など確認しています.

 

ですので,スマホでブログを書いたり読んだりする習慣がありませんでした.

 

しかし,google で確認すると,当ブログへ訪問して頂いているかたの半数以上がスマホ経由であることを知りました.

 

未だ最低振込額に達せず,振り込まれていないアドセンスの収入も,ほとんどがスマホの広告からです.

 

スマホで自分のブログを見てみると・・・

 

見にくいですね〜

 

今までゴメンナサイ

 

心よりお詫び申しあげます.

 

ということで,少しでも見やすくなるように変更しました.

 

 

 

見にくい理由

大きく分けて以下の4つの原因が考えられました.

  1. 使うことのないボタン
  2. 目次と認識しづらい
  3. 区切りがない
  4. 字が小さい

 

不要なものでゴチャゴチャしているし,区切りがないのでメリハリがありません.

 

当然のことながら広告を挿入していましたが,記事と広告との境もわかりにくく,

「記事の文章を探しながら」

読む必要がありました.

 

フォントの大きさをデフォルトのままにしていたので,字が小さく,いくら拡大できるとはいえ字が細かすぎて見ていられません.

 

ユーザーのことなど全く考えていなかった証拠です.

 

深く反省いたします

 

 

変更点

今,皆さんにご覧頂いているのは変更後です.

当ブログで表示される上から順番に変更点を紹介していきます.

 

最初に表示される部分

一番上にあった,はてなブログの欄を消しました

グランドキャニオンの写真とサブタイトルを消去しました.

 

f:id:cgogohero:20170827201108p:plain

 

 

赤丸で囲んだ部分を消去した結果,下のようになりました.

 

f:id:cgogohero:20170827201204p:plain

 

 

すっきりしました.

 

記事を読んで頂くのに,画面をスライドする距離も短くなりました.

 

この部分はこのブログを参考にしました.

はてなブログ、スマホサイトの不要な項目を徹底的に非表示にしてみた - KsMemo

 

 

目次

目次はつけていたのですが,わかる人にはわかる状態でした.

 

f:id:cgogohero:20170827201627p:plain

 

はてなブログのスマホ版では,目次が目次として認識しにくいです.

「もくじ」と名前を入れ背景に色をつけることで,「もくじ」とわかるようにしました.

 

f:id:cgogohero:20170827201842p:plain

 

 

枠がずれているような気がするのは,ご愛嬌です.

 

目次に関しては下記のブログを参考にしました.

スマホ対応!はてなブログの目次を見やすくカスタマイズしよう - えふじん

 

ズレはC55のブログ特有の問題です.

 

見出し

目次同様,「見出し」と認識しにくいため記事の中での区切りがつきにくく,メリハリがなく見づらかったです.

 

f:id:cgogohero:20170827202348p:plain

 

見出しに飾りをつけ見出しとわかるようにしました.

 

f:id:cgogohero:20170827202406p:plain

 

 見出しに関しては下記のブログを参考にしました.

コピペで簡単!CSSではてなブログの見出しをカスタマイズ! - NO TITLE

 

不要なパーツの削除

はてなの標準装備のパーツがあります.

ほとんど使われることのないボタンやリンクですが,必ず表示されます.

 

これらのパーツは下にスクロールした先にありますので,あまり影響は無いのかもしれませんが,冗長なので削除しました.

 

f:id:cgogohero:20170827202955p:plain

 

f:id:cgogohero:20170827202728p:plain

 

 

PC版など消さない方がいいのかなとも思いましたが,部分的に削除できなので削除しました.

 

不要パーツの削除はこちらのブログを参考にしました.

はてなブログ、スマホサイトの不要な項目を徹底的に非表示にしてみた - KsMemo

 

フォントの大きさの変更

フォントの大きさを 16 pt に変更しました.

参考にしたブログです

 

はてなブログのスマホ画面文字サイズを調節する【ブログ超初心者向け】 - 新・中途半端男の逆襲

 

字は見やすくなった反面,改行が頻繁に行われるので文章としては若干読みにくくなった印象があります.

 

これに関しては文章を書くテクニックを身につける必要があると思うので,すぐには改善できません.

ご了承ください.

 

関連コンテンツを追加

Google様より関連コンテンツを貼り付ける許可が下りましたので,追加しています.

 

f:id:cgogohero:20170827203215p:plain

 

 

関連する記事など,のぞいていただければ,と思います.

 

ちなみに,この部分への広告はまだ許可されていません・・・.

 

まとめ

スマホから訪問して頂いている皆様,今までとても見づらくて申し訳ありませんでした.

 

改変によって,

画面表示も少し早くなったと思いますし,見やすくなったのではないでしょうか?

 

今後も勉強して,さらに見やすくなるよう改善していきます.