スマホのレイアウトデザインを変更しました。ANAマイルでまったりハピタス生活スマートフォン用の表示で見るANAマイルでまったりハピタス生活ハピタスでANAマイルを効率的に貯める方法やANAマイルを貯めるのにおすすめのクレジットカード情報など、生活に役立つ情報をお届けしています。ハピタスなどのポイントサイトやANAカードを活用することで年間数十万マイルを貯めることが簡単に出来ます。ANAマイルで特典航空券を手に入れて家族で海外旅行に行っています。スマホ&PCのレイアウトデザインを変更しました。2018-01-11スマホ&PCのレイアウトデザインを変更しました。日常-当サイト当ブログは「DUDO」という素敵なテーマを使わせてもらっているのですが、スマートフォンで表示した時のレイアウトを少し調整してみました。Analyticsで表示されているアクセスデバイスなのですが、だいたい以下の様な内訳で、PCとスマホの割合が半々ぐらいになっています。4.54%私自身もスマートフォンでアクセスすることが多く、他の方のブログなどを見るときにも非常に見やすいサイトも時々見かけますので、ここも今より見やすいものにしてみようと挑戦してみました。全体の見た目としては以下の様に変えてみました。ヘッダー部分をスッキリとさせて、記事の一覧部分が見やすいように配慮し、またサムネイルの写真も少し大きく表示されるようにしてみました。記事一覧中に表示されていた記事本文の抜粋も、ここで細かく読む人もあまりいないだろうし、文字が増えるとごちゃごちゃ感があるようなしたので削除しました。「ひつじの雑記帳」さんのサイトを非常に参考させていただきました。Chromeのデベロッパーツールでひとつひとつ要素を確認して変更していきます。HTMLやCSSにそんなに精通しているわけではないのですが、デベロッパーツールでどこをどう変えたら見た目がどう変わるのかを確認しながら、分かったところから、その変えたコードをデザイン設定のところに登録してまた確認ということを繰り返していきました。大変な作業でしたが、一つずつやるたびに「写真表示が大きくなった!」「日付表示の背景が青くなった!」と小さな達成感があるので、楽しみながら変更作業をやっていました。記事ページの変更また記事本文のページも変更しています。一覧ページよりも、記事本文のページの方が結果としてカスタマイズした箇所は多くなりました。ヘッダー部分のように、一覧ページを変更したことで同時に変更になっている部分以外に、ざっと以下のようなところを変更しています。文字サイズと行間の拡大などなど。パソコン表示も合わせて変更このスマホレイアウト変更に合わせてパソコン表示も変更しました。皆さんがパソコンを使うときに、どのくらいのディスプレイで見ているのか分からないのですが、全体的に大きく見えるように横幅を拡げて調整しました。スマホと同じように、日付部分を見やすくしたりサムネイル画像を大きくしたりもしています。記事本文についても、スマートフォン表示で行なった変更に近い形でパソコン版も変更しました。変えてみたいところや、もしかしたらちょっと表示がおかしくなってしまっているところなどもあるかもしれませんので、引き続き時間のあるときに調整を進めたいと思っています。皆さんにとって、「見やすいな」と思ってもらえたら嬉しいです。21:00スマホ&PCのレイアウトデザインを変更しました。関連記事2019-08-05ANAマイルを貯めるおすすめ13の方法【2019年最新】ANAマイルを貯める方法について、すべてを余すことなく紹介して...2018-04-17ハピタスでポイントを貯める、ANAマイルに交換する方法ANAマイルを貯めるのに最適なポイントサイト「ハピタス」。ハピ...2018-03-12しっかりANAマイルを貯めるクレジットカード選びクレジットカードを使ってANAマイルを貯める方法を解説。はてなブログProANAマイルを効率的に貯める方法やお小遣いを簡単に稼ぐ方法など、生活に役立つ情報をお届けしています。読者になるPopularスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。