検索ボックスのカスタマイズ

j161223-01.gif

Seesaaブログでは現在、旧テンプレートと新テンプレートがあります。
もちろんいろんな点で違うんですけど、検索ボックスも違うんですね。今回取り上げるのは、旧テンプレートの検索ボックスを新タイプの検索ボックスのような見た目になるよう、カスタマイズする方法です。

まず、旧タイプのテンプレートを確認しておきましょう。
検索ボックスはラジオボタンでウェブと記事を選択するシステムになっています。

j161223-02.gif

これ、ユーザビリティからいくと不親切な気がするんですよ。記事内検索ができる形にしておくのが良いし、他社のいろいろなブログを見ると、現在はそうなっているのが主流だと思います。

次に、新タイプのテンプレートの仕様と比べてみると…

j161223-03.gif

こんな具合に変更しようというわけ。

実はこのブログでもすでに、カスタマイズ済みです。

ほとんどコピペだけで完成するので安心してね。









まずは、メニュー一覧から「コンテンツ:PC」をクリックします。

j161223-04.gif


次に、検索ボックスの設定を開きます。

j161223-05.gif

これは各人違うので、自分の画面で該当箇所を探して下さい。


j161223-06.gif

「コンテンツHTML編集」をクリックします。


j161223-07.gif

初期値が入力されていますが、全部削除して、下記のコードをコピー&ペーストしてください。上の画像はペースト後のイメージです。

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<form method="get" action="<% blog.page_url %>pages/user/search/" id="form<% content.id %>">
<table style="border-collapse:collapse;overflow:hidden;font-size:12px;text-align:left;width:90%;">
<tr>
<td>
<input value="" name="keyword" type="text" size="20" style="width:160px;" placeholder="ブログ内を検索" /> <input value="検索" type="submit" class="input-submit"/>
</td>
</tr>
</table>
</form>
<% content.footer -%>
</div>


ペーストしたら、「検索の設定に戻る」をクリックします。


j161223-08.gif

タイトルに「ブログ内検索」と入力します。
このタイトルは、検索ボックスのタイトルとして表示されます。

下のほうにスクロールして、保存ボタンをクリックします。

保存ボタンはもう1回あるから忘れないでくださいね。次は…

j161223-09.gif

コンテンツ編集画面の下のほうにある保存ボタンもクリックします。


はい、これで完成です!^^

こんな検索ボックスが…

j-161223-10.jpg

↓↓↓


j-161223-11.jpg

すっきり今風になりました♪
入力するスペースも少し広くなって、使いやすさがアップしたのではないでしょうか。


窓の大きさや「ブログ内を検索」という言葉を他の言葉に変えたい場合は、コードの該当箇所を書き換えてください。

それでは、今回はこのへんで~。(^_^)ノシ



↑いつもクリックで応援してくれてありがとう!
 とても励みになっています♪

この記事へのコメントが 0 件あります


この記事へのトラックバック