CANPAN ブログ検索
Loading
  • もっと見る
2012
Apr
28
サイト内検索フォームをカスタマイズする
    

CANPANブログにはサイト内検索機能が実装されています。
マイページ > スキンサイドバー > コンテンツ で「検索」を設定することで、
ブログ内の文字列を検索するフォームを表示することができます。
シンプルで使い勝手のいい検索フォームです。

しかし、見た目的にはいささか微妙。
しっかくい入力欄に、愛想のない[検索]ボタン。

これをカスタマイズし、よりサイトのデザインにマッチするようにしてみました。
以下、解説です。

まず、コンテンツ「検索」の「コンテンツHTML編集」を表示したところ、
検索フォームの HTML はデフォルトでは以下のようなものでした。

コンテンツHTML編集
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td class="side"><div align="center">
<img src="/template/<% css_id %>/img/side_title_header.gif" align="absmiddle">
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td class="side_title"><% content.title | html %></td></tr></table>
<div align="center">
<img src="/template/<% css_id %>/img/side_title_footer.gif" align="absmiddle">
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td><div class="side_text"><% content.header | nl2br -%>検索語句<br />
<form action="<% blog.page_url %>search/">
<input value="" name="keyword" type="text" size="20" />
<input value="検索" type="submit" class="input-submit" />
</form>
<% content.footer | nl2br -%></div></td></tr></table></td></tr></table>
<div align="center">
<img src="/template/<% css_id %>/img/spacer.gif" align="absmiddle" width="5" height="10">
</div>

このうち、余計な装飾等を排除し、以下のとおり、
検索フォームとして必要な部分だけピックアップしました。

<form action="<% blog.page_url %>search/">
<input value="" name="keyword" type="text" size="20" />
<input value="検索" type="submit" class="input-submit" />
</form>

 さらに、[検索]ボタンは左のような虫眼鏡アイコンを作成・配置することとし、
 テキスト入力部分・画像部分にそれぞれ CSS を設定すると、以下のようになります。

<form action="<% blog.page_url %>search/" />
<input name="keyword" type="text" class="form1"/>
<input type="image" src="/ooe/img/search.gif" class="form2" />
</form>

「コンテンツHTML編集」はこの4行だけで完成です。
次に、マイページ > スキンサイドバー > デザイン一覧
以下のような CSS を設定しました。

デザイン一覧 (CSS)
.form1 {
color:#818181;
border:1px solid #bbbbbb;
background:rgba(255,255,255,0.4);
padding:7px 10px;
margin:0px 0px 20px 15px;
font-size:12px;
-moz-box-shadow: 0px 0px 5px #bbb;
-webkit-box-shadow: 0px 0px 5px #bbb;
box-shadow: 0px 0px 5px #bbb;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
width:180px;
}
.form2 {
position: relative;
top: 6px;
left: -30px;
}
.form2:hover {
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}

テキスト入力部分には form1 という設定。
 透明度40%の白を配置し、背景に対して少しアクセントをつけています。
 横幅は、180px に固定。
 枠には 6px の角丸を設定し、丸みを帯びさせます。
 それから枠全体を覆うような薄いシャドウを5px。

検索ボタンとして機能する虫眼鏡アイコンには form2 という設定。
 テキスト入力欄の内部に配置するため
 ポジションを 上 6px、左 -30px と設定しています。
 本来テキスト入力部の右側に配置されるものを、大幅に左にずらしているわけです。
 最後に、マウスカーソルが重なったときの透明度を70%に設定し、視認性を高めます。

以上で完了です。
このサイト内検索機能は、過去の記事を手軽に検索でき、
便利な事この上ないので、自分らしくカスタマイズして使ってみてください。
17:30 | ブログ活用 | comment 0 | trackback 0
【Trackback URL】 トラックバックの受付は終了しました
COMMENT
POST A COMMENT
Archive
Category
Comments
https://blog.canpan.info/ooe/index1_0.rdf https://blog.canpan.info/ooe/index2_0.xml
Copyrights © 2009-2012 だんだんのグッドニュース All Rights Reserved.