第一印象は大事！ヘッダーのデザインをカスタマイズしちゃおう

※この記事の作成者

この記事は以下の内容を書いています

• 誰でも簡単にできるヘッターデザイン変更
• Cocoonのちょっとしたカスタマイズ
• まとめ

ブログ運営をしている方はブログデザインをどうすれば良いのか悩むことが多いのではないでしょうか？

現在、私はWordpressの無料テーマ「Cocoon」を利用しています

ここまでするのに独学で学んで試行錯誤を繰り返し整えてきました。さすがに独学だったので時間がかかってしまいましたが、できれば早く自分が納得するブログデザインに仕上げたいですよね

そこで、今回は「ヘッダデザイン」についてカスタマイズの方法をご紹介していきます

まず、今の私のブログデザインは以下です

ヘッダー画像やグローバルメニューは色を統一して全体的にまとまりを出してます

これから細かい変更方法やカスタマイズ方法は紹介していきますが

この記事を読んでもらって少しでも皆さんの悩みを解決することができたら嬉しいです

ヘッダーデザインの変更について

ヘッダー部分の変更内容は以下です

• ヘッダー画像の作成
• グローバルメニューのカスタマイズ
• おすすめブログカードの設定方法

ヘッダー画像の作成

まずはヘッダー画像の作成についてですが

画像作成であれば「Canva」が最適です

Just a moment...

www.canva.com

テンプレートや写真などもあるので自分好みに画像を作成することができます

私自身は単色に文字を入れているだけのシンプルなデザインです。なぜ、シンプルにしているかというと、あまりデザインのセンスがないからです

ヘッダー画像のデザインなどのアドバイスはできません。自分の好きなようにまずは作成をしてみてください

グローバルメニューのカスタマイズ

次にグローバルメニューのカスタマイズについて説明をします

まずは外観＞テーマエディターを選びます

そうすると、「Style.css」が開くのでここに以下のCSSコードを入力してください（コピペもOK）

nav#navi, .menu-header .sub-menu{
	font-weight: bold;
	box-shadow:0 5px 15px -5px rgba(0,0,0,.4);/*ヘッダーメニューの下に影を追加 */
}
.navi-in a:hover{
  background:none;
	border-bottom:3px solid #ffffff !important; /*ヘッダーメニューを選ぶと下線が出る */
}
.navi-in>ul .sub-menu :hover{
	border-bottom:none !important;
}

入力が終わったら「ファイルを更新」をクリックして保存します

上記のCSSコードを追加するとメニューの下側に白い線が出るようになります

おすすめブログカードの設定方法

最後におすすめブログカードの設定方法について説明をします

まず、はじめにメニューを作成します。１.外観＞メニューを選んでメニュー画面を表示させます

２　「新しいメニューを作成しましょう」をクリックします
３　「メニュー名」に任意の名前を付けてください
４　「メニューを作成」をクリックして作成します

５　おすすめカードで表示したいカテゴリーにチェックを入れ、「メニューに追加」をクリックします
６　メニュー構造に追加されたら「メニューを保存」をクリックします

ここでの設定は以上です

次にCocoon設定に移ります

ここでは以下のように設定をします

1. おすすめカードの表示　→ フロントページのみで表示
2. メニューの選択　　　　→ 先ほど作成したメニュー名を選ぶ
3. 表示スタイル　　　　　→ 画像のみ（好みあり）
4. カード余白　　　　　　→ おすすめカード毎に余白を設けるにチェックを入れる
5. カードエリア左右余白　→おすすめカードエリアの左右に余白を設けるにチェックを入れる
6. 設定が完了したら「変更をまとめて保存」をクリックする

最後にちゃんと表示されているか確認をしてみてください

補足：おすすめカードの画像の設定方法

今までの設定はおすすめカードをホーム画面に表示させるための設定ですが

前提条件として、画像が設定されてないと枠表示だけで、画像が表示されません

その時は以下のように設定してください

まずは投稿＞カテゴリを開きます。おすすめカードで表示をするカテゴリーをクリックして「編集」を選択します

編集画面にいき、「アイキャッチ画像」の選択をクリックし、表示させたい画像を選びます

画像が選び終わり、設定が完了したら「更新」をクリックし保存します

設定は以上です

最後にホーム画面に戻り、画像が表示されていて、今までの設定に不具合がないかを確認します

特に不具合がなければ、これにて設定完了です

まとめ

いかがでしたか？

今回はブログの顔でもあるヘッダー周りのカスタマイズ方法について紹介をしました

ヘッダーは読者が訪れた時に一番最初に見る場所で、第一印象が決まります

第一印象で読者の心を掴むためにも自分のオリジナル性を出していきましょう

それから、もしつまずいたり、上手く動作できなくてどうすれば良いのかわからない時は気軽にコメントをください

どうすれば良いのか一緒に考えて良いものにしていきましょう

それでは、また

@Sho_Ceed