サイト内検索を10倍見やすく&使いやすくする方法

サイト内検索を10倍見やすく&使いやすくする方法

見づらい&使いづらすぎだろ!と常々思っていた公式版のサイト内検索ガジェット。それに加えたまに検索できない(あるはずなのに検索結果が0件になる)こともあり、いつか直さねばと思っておりました。そんな折、見やすい!使いやすい!ちゃんと検索できる!と三拍子そろったサイト内検索の方法を発見しましたのでご紹介:)

ブログに公式版のサイト内検索ガジェットを使っている方、必見です。

SPONSORED LINK

サイト内検索を設置する

設置方法

「ガジェットを追加」をクリック

Blogger管理画面より「レイアウト」→サイドバー一番上の「ガジェットを追加」をクリック。

「HTML/JavaScript」をクリック

一覧から「HTML/JavaScript」をクリック。

サイト内検索の設定をする!

ここにサイト内検索の設定を行います。

タイトル

検索ボックスの上に表示する文字を入力します。

何も表示したくない場合は、空のままでOK。

コンテンツ

入力エリアの右上が「リッチテキスト形式」となっている状態で、以下のソースを張り付けます。

<form id="searchthis" action="/search" method="get" class="cf">
<input id="search-box" value="" name="q" size="30" placeholder="キーワードを入力" />
<input id="search-btn" value="検索" type="submit" />
</form>

テキストボックスの横幅を変更したい場合は2行目のsize="30"の数値を変更すればOKです。

「保存」をクリック

最後に「保存」をクリックして完了!

表示位置を変更するにはドラッグ

サイト内検索の表示位置を変更したい場合は「レイアウト」画面でガジェットを上下にドラッグして移動し、最後に「配置を保存」をクリックすれば簡単に変更できます。

新サイト内検索

ラベルクリック時に似てる

ラベル(カテゴリ)をクリックした時のような表示でとても見やすく、関連性の高い順日付順で並び替えることもできるのでとっても便利。

また、公式版と違いブログ内を一語一句見逃さずしっかり検索してくれるので安心です:)

まとめ

というわけで、サイト内検索を10倍見やすく&使いやすくする方法のご紹介でした。

まだ設置していなかった方も、すでに公式版を設置していた方もぜひお試しあれ:)

SPONSORED LINK

この記事がお役にたちましたらシェアをお願いします:)