こんな方におすすめ
- ワードプレスCocoonを使っているブロガーさん
- サムネイルのようなシンプルなモバイルヘッダーを使いたい!
- モバイルヘッダーのメニューボタンに文字を入れたくない
kikiです。
サムネイルのようなモバイルヘッダーは、今や主流ですよね。
ワードプレスの有料テーマである、JINやSWELLではシンプルでスタイリッシュな
モバイルヘッダーメニューがデフォルトです。
無料テーマCocoonでもできる限りを尽くし、
簡単2STEPでできるシンプルでスタイリッシュに見せるモバイルヘッダーを作っていきましょう!
今回の完成イメージ

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段目の.名前{}を丸ごと削除する
みなさんもお好みでカスタマイズしてみてください!
コメント