■後日談
いろいろ試した結果、以下URLの方法が一番洗練されていた。
①下準備で「レスポンシブルデザイン」のチェックをはずしてしまうと、はてな記法で記述したシンタックスハイライトの効いたコード部分等の表示が効かなくなってしまうため、①以降の方法でのスマホ表示の際の検索窓の挿入はお勧めできない。
↓このURLの方法がお勧め
【はてなブログの検索窓】をスマホ表示の際にサイドバー以外にも表示させてみよう - たつブロ
①下準備
以下のURLを参照し、「レスポンシブルデザイン」のチェックをはずしておく
※これをやらないといくら編集しても反映されない
スマホ表示編集の前の下準備(重要)これをやらないといくら編集しても反映されない - ray88’s diary
②貼り付け用コードを準備
以下コードの自分のサイトのURLの箇所のみ編集する
※自分の場合はブログURLが「https://ray88.hatenablog.com」なので、"https://ray88.hatenablog.com/search" のようになる
<div class="hatena-module hatena-module-search-box"> <div class="hatena-module-title"> </div> <div class="hatena-module-body"> <form class="search-form" role="search" action="自分のサイトのURL/search" method="get"> <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required> <input type="submit" value="検索" class="search-module-button" /> </form> </div> </div>
③コードを貼り付け