ブログリニューアル！レスポンシブデザインに変更しました！

この度、いろいろと思うところがあり、当ブログのデザインをレスポンシブデザインに変更しました！
レスポンシブデザインはPCに依存するので、あまり好きではないのですが、はてなブログのスマートフォン専用ページでは機能面でちょっと物足りなく感じる部分があったので思い切ってレスポンシブデザインに変更しました。

本当は昨日変更しようと夜な夜な頑張っていたのですが、CSSをいじってたりしてたら間に合いませんでした^^;

そしてこのタイミングでテーマも変更しました。

以前のテーマ「Simple Gray」も好きだったのですが、レスポンシブに変更しようとテーマを探している中で僕のイメージにピッタリのテーマがあったのでJOEさん (id:dreamark)が作られた「CONTENTS」というテーマに変更しました。

ただ、あまり見た目を変えたくなかったので、以前のデザインをある程度残した形でテーマだけを変更した感じです。

変更点

大きな変更点はありませんが、ソーシャルボタンとAdSense広告を変更しました。
ソーシャルボタンについては立体的なデザインからフラットなデザインに変更し、AdSenseはサイズ指定からレスポンシブに変更しました。
そして広告の配置を「記事上：1+記事下：2」から「記事上：1+記事下：1+サイド：1」に変更しました。
広告の配置についてはスクリプトを使えば記事下2箇所をスマートフォン時に移動することも可能ですが、極力スクリプトを使わない方法にしたかったので配置を変更した次第です。
あと広告を以前より少～しだけ減らしましたｗ

PC：変更前デザイン

変更前は極力シンプルに！を心がけ色もあまり使っていませんでした。

PC：変更後デザイン

変更後はヘッダーのメニューに濃い目の色を付けてメリハリを付けました。

SP：変更前デザイン

変更前はPCと同じようにシンプルが基本で上部にメニューバーを付けていました。

SP：変更後デザイン

変更後はメニューをロゴ下に置いて、タイトルや全体の文字サイズを少し大きくしました。

変更して良かったこと

レスポンシブデザインに変更してよかった点は、ずばり無駄なスクリプトの削除ですね！
スマートフォンでもPCと同じような機能を実装するために無駄なスクリプトをいろいろと入れていましたが、それを削除しただけでもだいぶんスッキリしました。
そして公式の「パンくずリスト」もPCにしか対応していませんが、レスポンシブデザインを採用することでスマートフォンでも表示出来るようになりました。

実際の表示速度についても調べてみました。

◆PageSpeed Insights調べ

◆GT metrix調べ

どちらも、そこまで大きな変化はありませんが、リクエスト数が大きく減少しただけで結構満足しています。
ただこの結果はテーマやレスポンシブによるものではなく、今まで無駄なものを入れすぎていたことが原因ですね^^;

はてなブログ｜表示速度が遅いので改善するまで足掻いてみた！

はてなブログが遅いと言うのは感じていましたが、それに加え、自分でも機能を拡張するために、Javascript等を使用して更に重くしている現状です。はてなブログでもAMP対応は進んでいますが、まだ様子を見た方が良いと思っています。そこで、はてなブログを高速化するために自分でできることをいろいろと試してみましたので紹介します。

www.aritai.net

変更後の感想

今回使用したテーマ「CONTENTS」では他にもフッターやリコメンド枠、対話形式CSSなどいろんな便利機能があっておすすめです！
他にもカエレバのカスタムCSSもデフォルトで入っているので本当に助かりました。

普通なら、テーマを変更して完成！なのですが以前のテーマの時にいろいろと面倒なことをしていたので、別のブログを作ってそこでテスト実装などして結構大変でした^^;
それでも変更して満足しています！デザインはもちろんですが、ブログを初めてもうすぐ1年が経つ節目の時期に変更できて良かったです。
これからもデザインに負けないように、皆さんに読んでいただけるような記事を書いていこうと思いますのでこれからもどうぞよろしくお願いいたします！