ブログのデザイン変更で注意したコトとは

はじめに

このブログはJetThemeを使用してますが、導入時に少しだけデザインをいじり、それ以来ずっと放置してました。

2年以上経過したので、気分転換でデザインを一部変更することにしました。

HTMLとCSSのお作法を忘れ、Bootstorapの対応にも手こずり、変更後のデバックに数日かかりましたが、やっと公開できるレベルに達したのでテンプレートを更新いたしました。

今回のブログデザイン変更で注意した点を備忘録として記事にまとめましたので、興味がある方は暇つぶしにご覧下さい。

ブログのデザイン変更で注意した点

第１に注意したのはPageSpeed Insightsのパフォーマンススコアです。

優れたユーザーエクスペリエンスを提供するため、サイトは良いスコア0.9～1.0（90 ～ 100ポイント）の獲得に努めるようGoogleは推奨してます。

スコア0.5（50ポイント）以上がデータの25％、スコア0.9（90ポイント）以上がデータの8％と説明しており、スコア0.96（96ポイント）以上を取るには高い改善が必要と言ってます。

「Lighthouse のパフォーマンス スコアリング」から抜粋

見栄えを良くするために、画像や複雑な要素を多用すると読み込みスピードに影響が出るので、速度低下となるレイアウトにならないよう気を付けました。

従って、ヒーローヘッダーは全く修正せず、ヘッダー以下の部分について一部変更しました。

しかし、いろいろ気をつけたにも関わらず、ある外部要因でパフォーマンスが悪化してます。詳しくは下記記事をご覧ください。

【注意】Bloggerの画像はGoogleに勝手に書き換えられているかも - after work lab

はじめに 管理人はBloggerでブログを運用してますが、最近衝撃的な出来事に遭遇しました。 それはBloggerに画像をアップロードすると、新しいドメイン blogger.googleusercontent.com にアップロードされるのです。 ...

  www.heavy-peat.com

2番目に注意したのは視認性の向上です。

特にファーストビューで表示される記事のタイトルは、フォントのサイズや太さを変更し、以前より強調しました。

見栄え優先で今まで記事のアイキャッチ画像にタイトルテキストをオーバーラップさせて表示してましたが、これは止めました。

3番目に注意したのはレイアウトの最適化です。

今までフッターにいくつかコンテンツを配置してましたが、トップから一番遠い場所で探しずらく不便でした。

当ブログは2カラムの構成なので、フッターに配置していたコンテンツは消し、必要なものだけサイドバーに取り入れる形に変更しました。

最後に悩んだのは広告の設置です。

どんなに素晴らしいデザインでも、広告の出現で台無しになる場合があります。

当ブログは、独自ドメインの年会費をアドセンス収入に依存しているので広告を設置してますが、昨今のPV減少に伴い収入も減り続けてます。

インプレッション報酬（１円～３円）のみの日もあり、独自ドメインを維持するため、止むを得ずトップページ以外はアンカー広告を許すように変更しました。

その他の変更点

・管理人の好みできれいなお姉さんのシルエット画像をページ変移時に表示してましたが、これは固定ページのみに限定するように変更しました。

・他のブロガーの方のデザインをパクリ、オススメリンクと管理人のヒトリゴトをサイドバーに設置しました。

・変更しなかったところ（サボったところ）

　シェアボタンとTOPに戻るボタンはオリジナルから全く弄ってません。どうせ使われないと思い背景の一部で良いと思ってます。…と言うは言い訳で、変更するのが面倒臭いからです。

最後にデザイン変更前後のスクショを貼っておきます。

変更前後のスクショ

TOPページ：変更前（ヘッダー部）

TOPページ：変更後（ヘッダー部）

TOPページ：変更前（フッター部）

TOPページ：変更後（フッター部）

POSTページ：変更前（ヘッダー部）

POSTページ：変更後（ヘッダー部）

まとめ

デザインをプチリニューアルしたブログですが、気に入って頂けたでしょうか。

本当はJetThemeから別の新テーマに乗り換えようかと思ったのですが、JetTheme以上にページスピードが早い無料のテンプレートは無いので、JetThemeを少しカスタマイズしてお茶を濁しました。

JetThemeはとてもシンプルなテンプレートなので、初心者の方もHTML,CSS,JavaScriptを少し勉強すれば、自分好みにカスタマイズできると思います。

リモスキさんのサイトには、いろいろカスタマイズの方法が解説されているので、とても参考になると思います。

気軽に足跡残してね！

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

それでは今回の記事はこれでおしまい。