ray88’s diary

お仕事で困ったとき用の自分用の覚書

スマホ表示するときにタイトル下に検索窓を表示させる

■後日談
いろいろ試した結果、以下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>

③コードを貼り付け
f:id:ray88:20210619113549p:plain