2STEPで簡単！シンプルなモバイルヘッダーの作り方〜WordPress・Cocoon編〜

kikiです。
サムネイルのようなモバイルヘッダーは、今や主流ですよね。

ワードプレスの有料テーマである、JINやSWELLではシンプルでスタイリッシュな
モバイルヘッダーメニューがデフォルトです。

無料テーマCocoonでもできる限りを尽くし、
簡単2STEPでできるシンプルでスタイリッシュに見せるモバイルヘッダーを作っていきましょう！

今回の完成イメージ

STEP1.　ヘッダーモバイルボタンを設定

①「新しいメニューを作成しましょう」をクリック

②メニュー名「モバイルヘッダー」（任意の名前でOK）を入力します

③メニューの位置は、□ヘッダーモバイルボタンにチェックを入れます。

④右下の青いボタン[メニューを作成]をクリック

⑤メニュー項目を追加する
メニュー項目＝モバイルヘッダーの表示される項目です。
ここでは検索ボタン、ロゴ、メニューボタンを表示させたいので3つ以下のように追加します。

	検索ボタン	ロゴ	メニュー
URL	#search	#logo	#menu
リンク文字列	検索	ロゴ	メニュー
CSS class （オプション）	入力しない	入力しない	入力しない

⑥右下の青いボタン[メニューを保存]をクリック

STEP2.　CSSをコピペして、文字無し設定と位置を調節

/*SPメニューボタンの調整*/
.search-menu-caption.menu-caption {
  display: none;
}

.navi-menu-caption.menu-caption {
  display: none;
}

.search-menu-icon.menu-icon {         
  height: 50px;
  padding-top: 9px;
}
.navi-menu-icon.menu-icon {
  height: 50px;
  padding-top: 9px;
}

.fa-search:before {
 font-size: 1.5em;
}

.fa-bars:before{
  font-size: 1.7em;
}

コピペができたら、確認してみてください！

完成イメージのようにできましたか？

kikiblogのモバイルヘッダーは、よりシンプルにロゴとメニューだけにしています。

みなさんもお好みでカスタマイズしてみてください！