こんにちは、カワルンです。
先日、ブログデザインを変更しました。
雰囲気が変わったので、驚かせてしまった方はごめんなさい!
ここ数週間、ヘッダー画像をコロコロ変更したり
ブログテーマを変えたり
沼にハマってしまった私です。
やっと気に入ったデザインができたので、ご報告します。
これでしばらくは落ち着くはず!
きっかけは表示速度を改善するためのメンテナンス
ブログデザインを大幅に変更するきっかけになったのが、サイト速度改善のためのメンテナンスです。
ここ半月ほど、コツコツメンテナンスをつづけています。
PCはスコア90を超えるようになりました!
残念ながらモバイル版はなかなか改善しません。
そこで改善方法のひとつとして、ブログテーマを変更することにしました。
ブログテーマをBrooklynに変更
いろいろなテーマを試してみて、デザインが好みで
軽くて表示速度が改善したと口コミのあったBrooklynへテーマ変更しました。
元々シンプルなデザインなので、カラーや細かい部分のデザインはカスタマイズしました。
見出しはすでに設定しているデザインが使えるように、初期設定をリセットしました。
ヘッダー画像とグローバルメニューの変更
テーマがシンプルになったことで、ヘッダー画像やアイコンもテーマに合わせたくなりました。
テーマの設定をカスタマイズしながら、ヘッダー画像に試行錯誤する日々。
何度変えたことでしょう。笑
そして先日、ようやく完成しました!
気づいてコメントをくださった方々、ありがとうございます♡
パソコン版
モバイル版
デザインをいじってばかりでも仕方ないので、しばらくはこのデザインで行こうと思います。
ちなみにヘッダー画像はcanvaを使って作成しました。
メンテナンスの進捗
ここ半月ほど、サイト速度を上げるためにメンテナンスをしています。
モバイル版はなかなか改善されず、難しいですね。
前回の方法にくわえて現在、行っているメンテナンスは以下のとおりです。
iframeを撤去
内部リンクを貼るときに使用していたiframeをなくしました。
iframeは以下のようなリンクカードです。
つぎのように書き換えています。
画像圧縮と縮小
全部の画像を修正するのはなかなか大変です。
過去にさかのぼりながらやっと3分の1が終わりました。
まだまだ果てしない枚数が残っています。
画像に幅と高さを指定する
すべての画像に高さと幅を指定しています。
サーチコンソールでCLSのエラーが出ているためです。
CLSはレイアウトのずれがどれぐらい発生するかの値です。
画像の幅と高さを指定したら改善が見られたので、設定しなおしています。
これもなかなか大変な作業です。
果てしないです。
⇒その後CLSのスコアは良好になりました!くわしくはこちらをチェック
www.kakuhashiru.com
そのほか
ブログテーマの変更により、ページごとに目次などの細かいデザインも変更する箇所がでています。
こちらも地道に変えていこうと思います。
まとめ
ブログのデザインを大幅に変えたので、わたしは新鮮な気持ちで自分のブログをながめています。
メンテナンスは大変な作業ですが、その分愛着もわいてきました。
まだまだ時間はかかりそうですが、コツコツ続けていきます。
どれぐらい数値が改善するかを楽しみに、心折れずにメンテナンスしていきます。