ロゴ
【note:検索上位を狙うブログ理論】一騎当千SEO

【Manablog Copy】スマホのハンバーガーメニュー内に検索窓を設置する方法

その他の追加設定

こんにちは、ごま吉(@Lv1gomakichi)です。

この記事では、スマホのハンバーガーメニュー内に検索窓を設置する方法をご紹介します。

注意念のため必ずコードのBackupを取っておいてください。※トラブル等あった場合は責任は負えませんので必ず自己責任でお願いします。

当ブログについて

マナブログさんに参考マニュアルとして掲載して頂きました😆
本家認定のマニュアルです。

【マナブログコピー】スマホのハンバーガーメニュー内に検索窓を設置する方法

設置イメージは、こんな感じです。



スマホのハンバーガーメニュー内に検索窓を設置する方法は以下です。

管理画面外観テーマエディターnav-menu.phpを開きます。
最終行付近の</nav>の前に下記のコードを追加します。

	<div class="mb-hb">
		<div class="hb-menu-search ">
		<form method="get" action="<?php echo home_url('/'); ?>" class="search-form">
			<div class="form-group has-feedback">
				<input type="text" name="s" id="s" placeholder="Search for..." class="form-control">
				<span class="glyphicon glyphicon-search form-control-feedback"></span>
			</div>
		</form>
			</div>
	</div>

次にカスタマイザー追加CSSに下記CSSを追記します。

※すでにPCプレビューでは、検索窓は実装されているので「スマホでのみ表示する」ようにCSSを記述します。


.hb-menu-search {
	margin-right:20px;
margin-top:-20px;
}

/*PCの場合*/
.pc-hb	{ display:inline!important; }
.mb-hb	{ display:none!important; }
@media screen and (max-width: 768px) {
/*タブレット、スマホの場合*/
.pc-hb	{ display:none!important; }
.mb-hb { display:inline!important; }
}

参考レスポンシブサイトで、PCだけ表示・スマホだけ表示ってできるの?【PCとスマホで改行位置や画像を切替える方法】


画像提供:Studiogstock – jp.freepik.com によって作成された food ベクトル



注目こちらも合わせてどうぞ▼
アフィリエイトを始めるための手順を紹介しています。マナブログコピーのカスタマイズが終わったら『ASP登録』をしましょう。

note


注目こちらも合わせてどうぞ▼
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。マナブログコピーと合わせて運用すると効果大です。

note

人気記事【マナブログコピー(WordPressテーマ)】文字装飾プラグインの設定