昨日、ブログの見た目を少し変えました。

テーマ(テンプレート)自体は「第2次ブログリニューアル」以降の去年8月下旬に変えてある程度カスタマイズしているのですが、そのときに記事にしないまま9ヶ月が経ってしまいました。

今更ですが、この機会に記事にします。

テーマの変更

テーマの名前は「grayzone」。その名前が示すようにグレーを基調とした配色です。

去年8月まで使っていた「Magbook」テーマはマガジンサイトに最適化されたものでしたが、grayzoneはよりブログ向きのデザインになっています。

PC・タブレットでの表示においては無彩色が表示領域の多くを占めるので、写真が映えます。

見出しのリデザイン

見出し2と3、引用の枠はテーマ変更直後にリデザインしています。テーマに合うようにグレー系にしました。

見出し4は今回、色味だけ変更しました。

色味を少し変更

今回はこの部分で一番悩みました。

個人的にはグリーン系が最も好きな色なので、ブログのメインカラーもグリーン系にしてみたのですが、ずっとブルー系でやってきたので違和感があるのです。

ブルー系も好きな色だし、その中で細かい色味を変更するに留めました。

メインカラーは第2次ブログリニューアルまでに使っていたものと近い色に戻し、紫寄りの濃いブルー(#45478e)は記事エリア内におけるリンクのテキスト表示色として残しています。

ちなみにメインカラーの濃淡の配色は以下の通りになっています。

iマークのアイコンがメインカラーの色で表示。枠内の背景や太字部分のマーカーを模したところの色はメインカラーより薄くしています。

アクセントカラーは第2次ブログリニューアルの際に決めたもので、今回は変更していません。

その他変更箇所

他には、プロフィール欄の自己紹介文の追加と、画像表示部分の調整を行いました。

プロフィール写真の上部のブルー(塗りつぶし)はテーマのカスタマイザー画面から設定でき、今回のメインカラーにしました。なお、スマホ版ではこの部分は塗りつぶされていません。

画像表示部分は白い枠の縁取りを外したこと、キャプションの文字を太くしたことが変更点です。

記事タイトル表示部がお気に入り

grayzoneが良いと思ったところは記事タイトルの表示エリアです。

WordPressでは記事内容を図示するための「アイキャッチ画像」の設定項目がありますが、grayzoneではアイキャッチ画像の上にタイトルや投稿日、カテゴリーが表示されます。

ここが一般的なブログのデザインと異なるところで、特にCSSを大きく変更せずとも実現できるところが良き点だと思っています。

アイキャッチ画像はCanvaで作ったもので、基本的にはテーマに合わせてグレー系の色合いにしていますが、マイベス楽曲の紹介記事は趣味の作品ということもあり、他と差別化を図るためにブルー系にしています。

終わりに

テーマ変更後、細かい点のリニューアルはなかなか時間が取れずに先延ばしにしていたのですが、連休で時間に余裕があったのでようやく行えて記事にできました。

これでますますブログに愛着を持てそうです。