チップの日常

管理人チップの日常の出来事や気になる事を綴るブログ

【はてなブログ】ブログ内検索ボックスをスマホ用ページの上部に表示させる方法

 スポンサード リンク

 どうもこんばんは。

 はてなブログのスマホ用ページに「ブログ内検索ボックス」がありますよね。


f:id:chipsforest:20141104000158j:plain:w300

 ↑これです。


 これがあると記事探すのに便利なんですよねぇ。


 ただね、デフォルトのままだと下の方にありすぎて知っている人じゃないとほとんど使わないですし、置いてある場所が不便だと思うんです。(他の方は知りませんが少なくとも私はそう思ってます)


 ということで、今回は少しでもユーザーの利便性が上がるように「ブログ内検索ボックス」をページの上部に設置する方法をご紹介していこうと思います。

設置方法


<div class="hatena-module search-box">

<div class="hatena-module-body">
<form class="search-form" name="search" role="search" action="ブログのURLsearch" 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>


 上記の赤文字で「ブログのURL」と書かれているところを設置するブログのURLに書き換えて(URLは最後の/まで書く)、はてなブログのスマホデザインのヘッダ部分に書き込むだけです。

例:私のブログの場合は「http://chipspd.hatenadiary.jp/」に書き換え



f:id:chipsforest:20141103225738j:plain:w300

 実際設置してみると↑こんな感じ。

 設置できたら設置した「検索ボックス」を使用してみて、しっかりと動作することを確認してください。


 それと、デフォルトで設置してある検索ボックスも使う方がいるかもしれないので表示したままにしておきました。


 今回はあくまではてなブログで設置する場合の方法なので、他のブログサービスでは動作しないと思います(汗。


 これで少しは直帰率が減ってくれるといいんだけどなぁ…

PAGE TOP