AI副業実践記 #5 ｜サイトロゴ作成とヘッダーメニュー配色をカスタマイズ

2025年8月31日

はじめに

ブログを公開したものの、初期状態のままだと「自分のブログ感」があまり出ず、少し物足りないなと感じていました。
調べてみると、サイトロゴとヘッダーメニューのデザインを調整するだけで一気に印象が変わるとのこと。

今回はロゴを作成して、メニューの配色を変更してみたので記録します😊

サイトロゴを作成してみた

調べてみると、ブログのロゴは サイトの顔 になる重要な部分。
無料ツールのCanvaでも作れますが、今回はAIで生成したロゴを使ってみました。

配色：青（#003366）＋金（#D4AF37）
フォント：エレガントな筆記体
「M」を金にして、それ以外は青で統一
背景は透過PNGにして、ヘッダーに自然になじむように設定

実際に設定してみると、サイト全体の雰囲気がぐっと引き締まって「自分のブログができた感」が出ました✨

ヘッダーメニューの配色をカスタマイズ

次に、ヘッダーメニュー（ナビゲーション）の色を変更しました。
初期状態だと文字だけで少し寂しかったので、ホバー時に背景色と文字色が切り替わるようにしました。

やったこと（追加CSS）

/* ヘッダーメニュー1階層目 / header [class="menu"] > li > a,
.global-nav > ul > li > a,
.header-menu > li > a {
transition: all 0.2s ease;
}

/* ホバー時と現在ページ / header [class="menu"] > li > a:hover,
.global-nav > ul > li > a:hover,
.header-menu > li > a:hover,
header [class="menu"] > li.current-menu-item > a, .global-nav > ul > li.current-menu-item > a, .header-menu > li.current-menu-item > a { background: #D4AF37 !important; / ゴールド背景 / color: #003366 !important; / 青文字 */
}