Seesaaブログの検索窓をCSSで表示幅100%にカスタマイズ

たいていのブログはブログ内記事の検索用に検索窓を付けます。

Seesaa ブログのコンテンツに提供されている検索窓は、Yahoo! 検索とブログ内検索がいっしょくたになっていて、しかも Yahoo! 検索がデフォルト。優先を Yahoo!検索から記事検索にするなんて面倒なことをするよりは、独自のコードにしてたほうがラクです。

設置するとき普通は size で幅を決めてサイドバーに収めるわけですが、レスポンシブの場合はサイドバーが下に落ちますので検索窓の幅が画面の3分の1くらいになってしまう。

サイドバーの検索窓はスタイル定義で表示幅を可変にしておくとレイアウトがどう変わってもメンテナンスフリーです。

Sponsored Link

パソコンやスマホで検索する側の操作性

今回のコードには、submit するボタンは付けません。

ボクは Google や Yahoo! などの検索エンジンで検索するとき、キーワードを入力したら [検索]や虫眼鏡などのボタンをクリックしません。単にエンターキーを押すだけです。

みなさんはどうでしょう?

パソコンだけではなくスマホやタブレットでも、キーワード検索するときは必ずキーボードや文字入力のフリックに指を置いているはずで、入力した後にわざわざマウスに持ち替えてボタンをクリックしたり、検索窓のボタンまで行ってタップしたりしないと思います。そのままキーボードのエンターキーか画面キーボードのエンターをタップしませんか。

Google や ヤフーなどの長い物には巻かれろということで Submit ボタンは付けません。

Seesaa ブログ内記事検索用の CSS スタイルシート

今回の Seesaa ブログ内記事検索の検索窓は3つの部品で構成されています。
ひとつめは、自由形式コンテンツに貼り付けるコード
ふたつめは、表示幅を調整するCSS(スタイルシート)
最後に、検索窓の初期値をクリアするスクリプト

順不同になりますが、レイアウトが崩れないように先に CSS を書いておきます。

#searchBox{position: relative; margin: 1em 0; padding: 0; width: 100%;}
#s{width: 99.9%; margin-bottom:20px; padding-top:4px; padding-bottom:4px; padding-left: 2px; box-sizing:border-box; height:32px; background: url(http://lh5.googleusercontent.com/-SA4PUvPw7S0/VKeyWTcI0SI/AAAAAAAE3Tw/7CaUPdjpa0U/s26/search.png) no-repeat; z-index:0; top:3px; right:7px; background-position: 98% 100%;}

#searchBox が検索窓の全体枠になります。サイドバーなりの設置個所に対して100%の幅を確保しています。

#s は検索窓の input text の部分で、文字入力の枠です。
この input text の右側に虫眼鏡を付けました。このボタンは Google の picasa にアップしていますから、ボクの Google アカウントが停止にならない限りリンクは切れませんが、適当な画像を探して差し替えてください。

幅を99.9% にしているのはテキスト枠の右側の線が見切れない対策です。

上記をデザイン>デザイン設定の適用している CSS に貼り付けておきます。

検索窓の初期値をクリアするスクリプト

jQuery で検索窓の text 枠がクリックされたときに、"キーワード検索" という文字をクリアして空白にします。

このコードをデザイン > HTML で適用している HTML の </body> の直前あたりに貼り付けておきます。

<script>
jQuery(document).ready(function(){
var textBox=jQuery("input:text");
textBox.focus(function(){
    jQuery(this).addClass("textFocus");
    if(this.value==this.defaultValue){
        jQuery(this).val('');
    }
}).blur(function(){
    if(jQuery(this).val()==''){
        jQuery(this).val(this.defaultValue).removeClass("textFocus");
    }
});
});
</script>

検索用のコード

最後に本体のコードです。デザイン>コンテンツから自由形式を追加して、そこに記入します。

<form method="get" action="/pages/user/search/" name="seesaaform">
<input type="text" id="s" name="keyword" value="キーワード検索">
</form>


いったん[保存]ボタンで内容を確定してから、「コンテンツHTML編集」リンクをクリックして下のコードを貼り付けます。

<div id="searchBox">
<% content.free.text %>
</div>

sitetitle は付けないので不要です。「ブログ内検索」などタイトルを付けなくてもいいように、検索窓に"キーワード検索"という文字を予めセットしています。

通常、side というクラスセレクタが割り当てられていますが、ここを serchbox にしています。side クラスのままだと左右の余白が広すぎます。サイドバーの幅100% にするために side は除外です。

挿入テキスト上や挿入テキスト下に何かコメントを入れたいのであれば、content.header と content.footer は残しておきます。上下とも挿入テキストは使わないので HTML スペース倹約のためにボクは削除してます。

新規のコンテンツを追加したので、[保存]ボタンで確定すればコンテンツのデザインは終了です。

このブログのサイドバーにあるのが、上記の検索窓の完成品。
検索窓入力枠内の左側に虫眼鏡アイコンを付けているパターンも良く見ますね。 CSS の #sで定義した背景画像と位置を変えるだけですからいろいろバリエーションは楽しめそうです。

まとめ

検索窓などの input text は size="30" などのようにサイズで幅をしていしますから、レイアウトを変えるたびに 30 を 32 にしてみたりと常に監視しないといけません。

また、[検索] などのボタンは、表示されるユーザ側の文字サイズによっては2行目に折り返されていたりして見ていてチョットひっかかります。

レスポンシブになるとサイドバーは下に落ちてコンテンツと同じ幅になります。そのときも画面幅に検索窓の幅を合わせたいという欲求が抑えきれません。なので、ボタンなしで 100% のスッキリデザインにしてみました。

コメント入力欄にも検索窓と同じ input text が使われています。ここも初期値のままだと固定サイズですから、iPhone からの閲覧では入力フィールドの右側が見切れています。

コメント欄は検索窓と違って複数の input text がありますから、#s などの id ではなく .com-text でもなんでもいいのですがクラスを作って割り当てておくと画面幅 100% でサイズ可変になります。

カスタマイズのメインは CSS なのでもちろんシーサーブログ以外にも応用できます。

Sponsored Link

この記事へのコメント

0件
コメントをどうぞ
お名前:[必須入力]

メールアドレス:

ホームページアドレス:

コメント:[必須入力]

Sponsored Link