【QooQ】ナビゲーションバーの中に検索ボックスを埋め込む

2023/09/067
アイキャッチ

当ブログは QooQ テーマを使用していますが、ZELO みたいな感じで検索ボックスをナビバーの中に埋め込んでいます。

今回はこのカスタマイズ方法をご紹介します。

PCスクショ
モバイルスクショ

テーマ編集は必ず予めバックアップを取ってから行って下さい。

2023/04/30 追記: Safari 環境でレイアウトが崩れる場合があることが判明したため、コードを以前のものに戻しました(を Blogger SVG → Font Awesome に変更)。

CONTENTS

カスタマイズ手順

① Font Awesome アイコン準備

Font Awesome (ver.6x)のアイコンを使用するため、まだ導入されてない場合はテーマ編集画面(HTML)にて下記のコードを </head> の上に設置して下さい。

<link href='//use.fontawesome.com/releases/v6.4.0/css/all.css' rel='stylesheet' type='text/css'/>

② 検索ウィジェットのコードを設置

テーマ編集(HTML)にて <div id='navigation-content'> を検索で探します(編集画面内をクリックでアクティブな状態にして Ctrl + F で検索できます)。

HTML

その下の方にある <div class='widget-content'><ul> の間に以下のコードを挿入します。

<!--検索ボックス-->
<form action='/search' id='search-box-form' method='get'>
<input data-placeholder-end='' id='search-box-text' name='q' placeholder='ブログ内検索' type='text' value=''/>
<button id='search-box-submit' title='検索' type='submit'><i class='fas fa-search'/></button>
</form>
HTML2

③ CSS でデザイン調整

以下の CSS コードを  ]]></b:skin> の上に追記します。
色やサイズ等、各自お好みで微調整して下さい。

#search-box-form {
float: right;
width: 200px;
background: #fff;
}
#search-box-form::placeholder {
color: #aaa;
}
#search-box-text {
width: 87%;
border: none;
outline: none;
font-size: 1em;
padding-left: 3px;
}
#search-box-submit {
color: #888;
font-size: 1em;
background: transparent;
position: absolute;
right: 0;
top: 1px;
border: none;
outline: 0;
}
#search-box-submit:hover {
cursor: pointer;
}

以上です。

さらにウチみたいにナビバーが上に張り付く仕様にすれば、より使い勝手が良くなる…かも?(^^;