ある時、このブログを自分で開いてみて思いました・・・
久しぶりに見たら、自分のブログのデザインがダサすぎる…！
そもそも「久しぶりに」開いてる時点でかなりやばいのですが。
このブログ、作った時点からかなりの年月が経過しており、その間ほとんどデザインを初期のままいじってこなかったせいでひどいことになってました・・・。
自分でできる範囲で、サイトのデザインを見直してみました。
ビフォーアフターはこちら
配色の色味を抑え気味にして、くすみピンク系に統一。ヘッダーのロゴ画像デザインと配置を変更して、スッキリとした印象にはなったかなと思います。
もともとのサイトデザインの要素は、こんな感じでした
WordPress無料テーマ「Cocoon」を使用
ブログ立ち上げ時からWordPress無料テーマの「Coccon」を使用しています。
無料でも機能は充実。デザインスキンもたくさんあるので知識ゼロからでもいい感じのブログを作ることができて、とてもありがたいです…！
トップページをサイト型にカスタマイズしていた
Cocoonカスタマイズ方法を多数紹介してくださっているぽんひろさんのサイトから、コピペできるカスタマイズCSSを使わせていただいていました。
その中でも、トップページをサイト型にできるコピペカスタマイズを取り入れました。
このサイト型トップページの設定はそのままに、次のようなポイントを見直していきました。
サイトデザインの見直しポイント
直したいなと思ったポイントはざっくりとこんな感じでした。
こういう点を改善するべく、次のような変更を行いました。
配色のトーンを抑えて、大人っぽいくすみカラーに統一
サイトキーカラーに使っていたピンク色がちょっと悪目立ちする印象に思えたので、抑えたトーンのくすみピンク３色を新たなサイトキーカラーに決めて、設定しました。
ヘッダーのロゴ画像を変更
ロゴ画像の手描き文字を新たに描き直し。自画像のイラストも外しました。
ヘッダーレイアウトを「トップメニュー（右寄せ）」に変更
Cocoonのテーマ設定から変更しました。横長のスッキリとした見た目になりました。
ヘッダー下にカルーセル表示を設置
旧デザインでは「おすすめカード」というCocoon テーマ独自の設定を使って主要カテゴリーへ誘導していましたが、ここを人気記事のカルーセル表示に変更。
過去記事を見てもらいやすくはなったかと思います。
プロフィールのデザインを変更
こちらも、ぽんひろさんのカスタマイズCSSをコピペさせていただきました。
プロフィールがめっちゃ可愛くなる────！！
（わたし的に）苦労したポイント
CSSが読めなすぎて、色変更だけでも時間がかかる
「このボタンの色、どこをいじれば変わるのー！？」というのを繰り返して時間がかかりました…
特に難儀したのが、
◎トップページの「もっと見る」ボタンの色変更
◎モバイルフッターボタンの色変更
でした。知識が無さすぎる────…
それでもなんとか、自分でできる範囲の限りで、納得のいく見た目にはできたと思います。
いつかは有料テーマに移行してみたい…！
現在使っているWordPressの無料テーマ「Cocoon」はとても優秀ですが、いつかは有料テーマに移行したいとも考えています。
使いたいと思っているのは「JIN」と「STORK19」。
ブログデザインを見直し、CSSをいじるのは久しぶりでしたが、技術の有無は置いておいても私はこういう作業がやっぱり好きだな、とも感じました。地道に築いたものがサイトの見た目に現れる瞬間の、達成感。ウェブってたのしい！
コメント