デザイン変更のお知らせ!はてなブログのBrooklynへテーマを変えました

\ 読者登録おねがいします/

こんにちは、カワルンです。

先日、ブログデザインを変更しました。
雰囲気が変わったので、驚かせてしまった方はごめんなさい!

ここ数週間、ヘッダー画像をコロコロ変更したり
ブログテーマを変えたり
沼にハマってしまった私です。

やっと気に入ったデザインができたので、ご報告します。
これでしばらくは落ち着くはず!

<スポンサーリンク>


きっかけは表示速度を改善するためのメンテナンス

ブログデザインを大幅に変更するきっかけになったのが、サイト速度改善のためのメンテナンスです。

■ サイト表示速度の改善方法 ■


ここ半月ほど、コツコツメンテナンスをつづけています。
PCはスコア90を超えるようになりました!
f:id:kawarun:20200912165741j:plain:w450:h250

残念ながらモバイル版はなかなか改善しません。

そこで改善方法のひとつとして、ブログテーマを変更することにしました。

ブログテーマをBrooklynに変更

いろいろなテーマを試してみて、デザインが好みで
軽くて表示速度が改善したと口コミのあったBrooklynへテーマ変更しました。
f:id:kawarun:20200912165628p:plain:w450:h300

 Brooklynのおすすめポイント  ✔デザインがシンプル
✔見出しタグやサイドバーのデザインが最初から設定されている
✔はてなブログテーマ利用者数2位でカスタマイズ方法を載せている人が多い
✔作者さん自身がカスタマイズ方法を載せている


元々シンプルなデザインなので、カラーや細かい部分のデザインはカスタマイズしました。
見出しはすでに設定しているデザインが使えるように、初期設定をリセットしました。

ヘッダー画像とグローバルメニューの変更

テーマがシンプルになったことで、ヘッダー画像やアイコンもテーマに合わせたくなりました。
テーマの設定をカスタマイズしながら、ヘッダー画像に試行錯誤する日々。
何度変えたことでしょう。笑

そして先日、ようやく完成しました!
気づいてコメントをくださった方々、ありがとうございます♡

パソコン版
f:id:kawarun:20200912165757j:plain:w450:h350

モバイル版
f:id:kawarun:20200912165606p:plain:w350:h250

デザインをいじってばかりでも仕方ないので、しばらくはこのデザインで行こうと思います。

ちなみにヘッダー画像はcanvaを使って作成しました。

■ canvaの使い方はこちらをチェック ■


メンテナンスの進捗

ここ半月ほど、サイト速度を上げるためにメンテナンスをしています。
モバイル版はなかなか改善されず、難しいですね。

前回の方法にくわえて現在、行っているメンテナンスは以下のとおりです。

iframeを撤去

内部リンクを貼るときに使用していたiframeをなくしました。
iframeは以下のようなリンクカードです。
f:id:kawarun:20200912165658p:plain:w450:h150

つぎのように書き換えています。

■ あわせて読みたい ■


画像圧縮と縮小

全部の画像を修正するのはなかなか大変です。

過去にさかのぼりながらやっと3分の1が終わりました。

まだまだ果てしない枚数が残っています。

画像に幅と高さを指定する

すべての画像に高さと幅を指定しています。

サーチコンソールでCLSのエラーが出ているためです。
CLSはレイアウトのずれがどれぐらい発生するかの値です。
画像の幅と高さを指定したら改善が見られたので、設定しなおしています。
これもなかなか大変な作業です。

果てしないです。

そのほか

ブログテーマの変更により、ページごとに目次などの細かいデザインも変更する箇所がでています。
こちらも地道に変えていこうと思います。

<スポンサーリンク>


まとめ

ブログのデザインを大幅に変えたので、わたしは新鮮な気持ちで自分のブログをながめています。

メンテナンスは大変な作業ですが、その分愛着もわいてきました。

まだまだ時間はかかりそうですが、コツコツ続けていきます。

どれぐらい数値が改善するかを楽しみに、心折れずにメンテナンスしていきます。