🛠️ ブログ構築1日目|ロゴ・カラー・メニューでデザインを整えた
🌱 今日のテーマ
WordPress(Cocoon)で作成したサイトの見た目を整えるために、
配色・レイアウト・ロゴデザインなどの初期設定を進めました。
✅ やったことまとめ
- トップ画像の設定
- とりあえず、スマホの画像フォルダにあった森の写真を背景に採用。明るい森の中の感じが良くて好きです。今後もっとイメージに近いような画像があれば変えていきたいかな
- ロゴの作成&設置
- ロゴマークをCanvaで作成
- Chat GTPで元のイメージを作ってもらったけど、優秀で助かります!
- ロゴマークをCanvaで作成


-
- 背景と馴染むよう、ロゴに透過処理+背景装飾を追加
- とりあえず、top画像の真ん中に配置。CSSで軽く透明度・ホバーエフェクトを設定
- モバイルメニューの調整(未完成)
- Cocoonのハンバーガーメニュー内の項目を右寄せ&余白追加
.slicknav_nav
クラスを使って、スマホ表示時の整形- 三本線メニューの右上固定・展開型メニューは今後のタスクに!
- カラー設定の統一(Cocoon > 全体タブ)
- サイトキーカラー:#4CAF50(緑)
- 背景色、リンク色、選択時の色など、全体に統一感を持たせた
- 見出しデザイン(h2 / h3)の装飾
.entry-content h2
:左ライン+淡グリーン背景+モスグリーン文字.entry-content h3
:下線スタイル+落ち着いたグリーン文字.entry-title
(記事タイトル)と見出しの違いを確認しながらカスタム
- メニューの作成・固定ページ構成
- トップページ/お問い合わせ/プロフィールのページを作成
- グローバルメニューに固定ページを割り当てて、ナビゲーション整備
💬 感想・今後の予定
ロゴや色が決まったことで、少しづつサイトに“らしさ”が出てきた気がします。
WordPressでのサイト構築初めてやったけど、細かいCSS調整もできるの面白いですね。思ったより「自分で自由に整えられる」ことが楽しい!
今後は以下を進めていく予定:
- トップページの文章や構成見直し
- フッター・サイドバーの調整
- モバイルメニューの右上固定+右スライド展開(構想中)
- 各カテゴリページの充実化・テンプレ構築
おまけ
初日だったので、なんでこのようなブログを立ち上げたのかとか、経緯なども本当は触れたかったのですが、それらはおいおい書いていこうと思います。
とりあえず、自分の好き勝手に扱えるページがあることが楽しい!!
コメント