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

PC
  • ワードプレスCocoonを使っているブロガーさん
  • サムネイルのようなシンプルなモバイルヘッダーを使いたい!
  • モバイルヘッダーのメニューボタンに文字を入れたくない

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

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

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

今回の完成イメージ

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

STEP1作業後のイメージ
場所

外観 > メニュー

STEP1の手順

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

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

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

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

手順⑤の入力項目

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

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

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

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

STEP2作業後のイメージ
場所

外観 > テーマエディター > Stylesheet(style.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のモバイルヘッダーは、よりシンプルにロゴとメニューだけにしています。

ロゴとメニューだけの場合

STEP1: 検索ボタンについて入力しない
STEP2: 1,3,5段目の.名前{}を丸ごと削除する


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

コメント

タイトルとURLをコピーしました