当ブログでは、Cocoonを初期状態からカスタマイズする方法（コピペ可）をまとめています。
ヘッダーのカスタマイズについてまとめました。
このブログのヘッダーカスタマイズについて
このブログのヘッダーカスタマイズは以下のとおりです。
同じデザインのヘッダーにしたいときは、各カスタマイズで同じようにしてね！
カスタマイズのCSSを追加する場所
カスタマイズでCSSコードを使用するときは、以下の場所にコードをコピペしてください。
数値などは自由にカスタマイズしてください。
【外観】→【カスタマイズ】→【追加CSS】に以下のコードを記述する。
ヘッダーロゴを挿入する
ヘッダーには、ヘッダーロゴ画像をつくって挿入できます。
ヘッダーロゴの画像サイズは、【高さ150ピクセル、幅400～800ピクセル】がおすすめです。
ちなみに、背景透過しなかったらヘッダーの背景を変えたときにこんな感じになっちゃうよ！
ロゴ画像は背景透過しよう！
ヘッダーロゴを挿入する方法・背景透過については「【Cocoon】ヘッダーロゴをCanvaで作成する方法｜画像サイズや背景透過について」の記事でまとめています。
ヘッダーロゴを挿入する方法は以下のとおりです。
【Cocoon設定】→【Cocoon設定】→【ヘッダー】をクリックます。
【ヘッダー】の中にある【ヘッダーロゴ】でロゴ画像を選択します。
メディアライブラリの代表テキストには、ロゴと同じ名前を入力しておきましょう。
もしロゴ画像が表示されなかったときは、代表テキストが表示されるよ！
ヘッダーロゴを挿入しない場合
ヘッダーロゴを挿入しない場合、ヘッダーのタイトルはテキストだけでも問題ありません。
ヘッダーのブログタイトル名を変更するCSSは以下のとおりです。
/* ヘッダーにあるブログタイトルのフォントを変更する */
#header .site-name-text{
font-family: 'ＭＳ 明朝','Century Gothic'; /* フォントは優先順位順に複数指定可能 */
}
フォントの種類はどんなものがある？
システムフォント（デバイスフォント）とWebフォントがあるよ！
システムフォント（デバイスフォント）
端末にインストールされているフォント。端末に指定したフォントがない場合、別のフォントが表示されてしまうので見る人によってフォントが異なってしまうことがある。フォントは優先順位順に複数指定可能なので、複数指定しておくと意図したフォントが表示される可能性が高くなる。
Webフォント（例：Google Fonts）
Webサーバー上にフォントファイルを呼び出して表示させるフォント。どの端末で見ても同じフォントが表示される。おしゃれなフォントが多いが、フォントファイルを呼び出すため、ブログやサイトが重くなることがある。
Google Fontsにはおしゃれなフォントがたくさんあるので、ブログタイトルや見出しにぴったりです。
Google Fontsについては「【Cocoon】Google Fontsを使って文字をおしゃれにする方法」の記事でまとめています。
ヘッダーの背景色と文字色を変える
ヘッダーの背景色と文字色を変える方法は以下のとおりです。
【Cocoon設定】→【Cocoon設定】→【ヘッダー】をクリックします。
【ヘッダー】の中にある【ヘッダー全体色】と【ヘッダー全体文字色】でヘッダー全体の色を変更します。
ヘッダーロゴ部分のみの背景色・文字色を変えたいときは以下の部分の色を変更します。
グローバルナビメニュー部分のみの背景色・文字色を変えたいときは以下の部分の色を変更します。
ヘッダーにグローバルメニュー（ナビゲーションメニュー）を追加する
ヘッダーにグローバルメニュー（ナビゲーションメニュー）がない場合は、ぜひ追加してください。
ヘッダーにグローバルメニューを作成する方法については「【Cocoon】ヘッダーにグローバルメニュー（ナビゲーションメニュー）を追加する方法」の記事でまとめています。
メニューのレイアウト（位置）をカスタマイズする
メニューのレイアウト（位置）をカスタマイズする方法は以下のとおりです。
【Cocoon設定】→【Cocoon設定】→【ヘッダー】をクリックします。
【ヘッダーレイアウト】を変更します。
よく使われているレイアウトは以下の二つです。
画像では背景色を【ヘッダー全体文字色】で水色、【グローバルナビメニュー】で白に変更しているよ！
センターロゴ（デフォルト）
トップメニュー（右寄せ）
ヘッダーロゴの大きさを変える
ヘッダーロゴの大きさを変える方法は、Cocoonフォーラムに解決策がありました。
Cocoonフォーラム：ヘッダーロゴをそのままの大きさで表示させる方法
/* ヘッダーロゴの大きさを変える */
.header-container-in.hlt-top-menu .logo-header {
max-height: 100px; /* ヘッダーの高さの指定 */
}
.header-container-in.hlt-top-menu .logo-header img {
max-height: 100px; /* ヘッダーロゴ画像の高さの指定 */
}
#header {
flex-shrink: 0; /* 要素の縮小率を0にする */
}ヘッダーにブログのキャッチフレーズを表示・非表示する
ヘッダーにブログのキャッチフレーズを表示・非表示する方法は以下のとおりです。
キャッチフレーズが表示されるのは、ヘッダーレイアウトがセンターのときだけだよ！
【外観】→【カスタマイズ】をクリック
【サイト基本情報】→【キャッチフレーズ】にキャッチフレーズを入力します。
【Cocoon設定】→【Cocoon設定】→【ヘッダー】を選択します。
【ヘッダー】の中にある【キャッチフレーズの配置】で表示・非表示を変更できます。
グローバルメニューのホバーアニメーションを変える
Cocoonのスキンなしでは、グローバルメニューをホバーしたときに背景が薄くなります。
グローバルメニューのホバーアニメーションを変えるときは、まず背景が薄くなるアニメーションを消してしまいましょう。
グローバルメニューをホバーしたときに背景が薄くなるアニメーションを消すCSSは以下のとおりです。
/* ヘッダーメニューをホバーしたときに背景が薄くなるアニメーションを消す */
#navi .navi-in a:hover{
background: none;
}以下は、当ブログでグローバルナビゲーションをホバーしたときのホバーアニメーションです。
/* ヘッダーメニューをホバーしたときに下部に中央から線を出す */
#navi .navi-in a:after{
position: absolute;
content: "";
left: 0%;
bottom: 0px;
height: 10px; /*線の高さを指定する*/
width: 100%;
background: #fcbc74; /*線の色を指定する*/
opacity: 0.5; /*線の透明度を指定する*/
transform: scale(0,1);
transition: 0.3s;
}
#navi .navi-in a:hover:after{
transform: scale(1);
}
