少し前からなのですが、本ブログをレスポンシブデザインに対応したものへとリニューアルしました!
ワンソース、ワンデザインでは無理でした;;
まず今回のレスポンシブ対応についてお話する前に前回デザイン(上の画像の左のデザイン)についてお話すると、そもそもこのブログがそのデザインを採用していたのはこちらの記事に書いていたようにhtmlもcssもワンソースで全デバイスいけるのではないか?という仮説に基づくものでした。
なのでPCから見てもスマホから見ても同じようにみえるように作ったつもりではあったのですが、やはり「フォントサイズ」がスマホからだとどうしても小さすぎて見辛さが否めませんでした。
更に広告収益的な意味でも「スマホでもPCサイズ」というのは効率が悪く、実は昨年末ぐらいからはWordPressのデバイス毎にテーマを切り替えられる機能を使ってまったくの別テーマをスマホとPCで別々に適用していたんです。
Googleのモバイルフレンドリーテスト的には前回のデザインでも「問題ありません。 このページはモバイル フレンドリーです。」と、合格はしていたので別テーマ適用でもまったく問題なかったのですが、この方法だとどうしても私のように細かな改善を頻繁に行うには別テーマというのは二度手間で都合がよろしくなかったんですね。
それならばいっそ、ということで今回のレスポンシブデザイン化へと至った次第です。
レスポンシブデザインにまつわる変更点
左が旧デザイン、右が現デザインですが、色構成や大まかなレイアウトは大きく変更していないので気がつかない人もいたかもしれませんね(苦笑)。
主な変更点としてはレスポンシブデザイン対応に合わせて全体的に要素が左寄せになった点と、日付周りぐらいなものです。
「センター寄せ」から「左寄せ」へ
横幅が可変することを前提としたレスポンシブデザインは「中央寄せ、センター寄せ」との相性がすこぶる悪いんですね。
ユーザーの閲覧環境の横幅によっては旧デザインでいうところのサイトロゴなどがかなり中央に寄ってしまい見づらくなってしまうんです。
その点、左寄せになっていれば常にブラウザの左端に合わせて表示されるのでユーザーにとって見やすいというわけです。
日付周りの変更
これは個人的な理由なのですが、こちらの記事に書いたように以前のデザインで日付が大きかったのは「毎日ブログを書くため」だったんです。
タイトルよりも日付を大きくしたり、珍しい六曜を表示(大安など)していたのは、「何を書いたか」よりも「いつ書いたか」に集中するための措置だったんですね。その時はもっと日記的にやるつもりでした。
ところがブログを書いていくうちにモンハン記事を中心とした好き勝手に書き散らかすスタイルを確立してしまい、日記というよりはオウンドメディアと呼ばれる存在へと変容してきました。
なのでもはや形骸化してしまったタイトルより日付が大きいデザインを廃止し、タイトルのほうが目立つというありがちなデザインへと修正しました。
ちょっとした名残りで六曜だけは今でも表示するようにしましたが(笑)。
rem単位によるデザイン
これは制作者向けの情報となりますが、本ブログは一部のボーダーを除いてフォントサイズからパディングやマージンまですべてrem単位で構成しています。
そしてスマホの場合とPCの時ではルートであるhtmlに適用するcssスタイルのフォントサイズを可変させることでそれぞれに最適化しています。
rem単位で指定すると余白なども動的にデバイスによって可変するので便利で良い感じです。
厳密にいえば記事タイトル部分などで更なる最適化の余地はありますが、これだけでも十分に各デバイスで及第点な対応ができたと思います。
ただremを使ったデザインではこちらの記事に書いたようにIEとchromeで表示が異なるというバグ?があるようなので気をつけねばならない点と、IE8以下はそもそも未対応なので切り捨てるか、従来どおりのpx指定などを別途用意する必要があります。
私は面倒だったので良い機会と思ってIE8とは離別することにしました。あんなにIE6の時は離れがたかったのにIE8の時はあっさりしたもんです(笑)。
レスポンシブデザインに変更してしばらく経ちますが、やはりテーマがモバイルとPCで別々だった頃に比べて管理が格段に楽になりました。
今回のリニューアルではこのブログは元々の横幅が700pxということもあってスマホ・PCの二段階のみのレスポンシブ対応ですが、まともにPC版で1000pxくらいあるサイトだとスマホ・タブレット・PCのように3段階くらい設けないとなのでレスポンシブ対応は更に大変かもしれませんね。
シンプルなデザインのブログ程度であればモバイルサイトを別に設けるよりはレスポンシブデザインにしてしまったほうが早い!というのが今回のブログぷちリニューアルを経ての私の結論です。