ANAマイルでまったりハピタス生活

お小遣いサイトのハピタスを活用した生活に役立つ情報やANAマイルで特典航空券を手に入れて行く家族旅行などを発信しています。

スマホ&PCのレイアウトデザインを変更しました。

当ブログは「DUDO」という素敵なテーマを使わせてもらっているのですが、スマートフォンで表示した時のレイアウトを少し調整してみました。

きっかけは、Google Analyticsで表示されているアクセスデバイスなのですが、だいたい以下の様な内訳で、PCとスマホの割合が半々ぐらいになっています。

  • mobile : 47.97%
  • desktop : 47.49%
  • tablet : 4.54%

私自身もスマートフォンでアクセスすることが多く、他の方のブログなどを見るときにも非常に見やすいサイトも時々見かけますので、ここも今より見やすいものにしてみようと挑戦してみました。

トップページ(一覧画面)の変更

全体の見た目としては以下の様に変えてみました。

ヘッダー部分をスッキリとさせて、記事の一覧部分が見やすいように配慮し、またサムネイルの写真も少し大きく表示されるようにしてみました。

記事一覧中に表示されていた記事本文の抜粋も、ここで細かく読む人もあまりいないだろうし、文字が増えるとごちゃごちゃ感があるようなしたので削除しました。

f:id:urds:20180112093209p:plain

ひつじの雑記帳」さんのサイトを非常に参考させていただきました。ありがとうございました!

その上でさらに、Google Chromeのデベロッパーツールでひとつひとつ要素を確認して変更していきます。

HTMLやCSSにそんなに精通しているわけではないのですが、デベロッパーツールでどこをどう変えたら見た目がどう変わるのかを確認しながら、分かったところから、その変えたコードをデザイン設定のところに登録してまた確認ということを繰り返していきました。

なかなか大変な作業でしたが、一つずつやるたびに「写真表示が大きくなった!」「日付表示の背景が青くなった!」と小さな達成感があるので、楽しみながら変更作業をやっていました。

記事ページの変更

また記事本文のページも変更しています。

一覧ページよりも、記事本文のページの方が結果としてカスタマイズした箇所は多くなりました。

f:id:urds:20180112094952p:plain

ヘッダー部分のように、一覧ページを変更したことで同時に変更になっている部分以外に、ざっと以下のようなところを変更しています。

  • カテゴリ表示&パンくずメニューの表示調整
  • 箇条書き(リスト)表示の形式変更
  • 目次の表示形式の変更
  • 引用表示の形式変更
  • 大中小見出しの表示形式変更
  • 全体的に文字サイズと行間の拡大

などなど。

パソコン表示も合わせて変更

このスマホレイアウト変更に合わせてパソコン表示も変更しました。

皆さんがパソコンを使うときに、どのくらいのディスプレイで見ているのか分からないのですが、全体的に大きく見えるように横幅を拡げて調整しました。

f:id:urds:20180112100740p:plain

スマホと同じように、日付部分を見やすくしたりサムネイル画像を大きくしたりもしています。

また、記事本文についても、スマートフォン表示で行なった変更に近い形でパソコン版も変更しました。

もう少し変えてみたいところや、もしかしたらちょっと表示がおかしくなってしまっているところなどもあるかもしれませんので、引き続き時間のあるときに調整を進めたいと思っています。

 

皆さんにとって、「見やすいな」と思ってもらえたら嬉しいです。