ブログ練習帳

Word Pressのウィジェット、検索ボックスを追加する

Word Pressでブログを書くようになって、まだ日は浅いですが、少しずつ記事が溜まってきました。分からないことがいっぱいだから、メモることがいっぱい。当初の目的、「仕事場で、前に調べたことを、もう一度調べるのは時間がもったいないので、メモとしてブログ書いちゃえ」からすると、ちょっと不便になってきました。

使い勝手には、それなりに問題があるようですが、ないよりはイイじゃんという見習は、とりあえず、Word Pressのウィジェットですぐに使える検索ボックスを入れてみることにしました。

管理者の権限でログインして、「外観」の「ウィジェット」画面を開き、サイドバーのところに「検索」をドラックして移動させるだけ。基本はこれだけです。

ただ、これだけだと、悲しいまでにレイアウトが崩れてます。いきなり、ボックスがはみ出してるし、「検索」「検索」ってちょっとクドイ。ここだけ何とかしたいです。

先ほどドラックしたサイドバー内にある「検索」の▼をクリックすると、「タイトル」という項目があるので、ここに「サイト内を検索してみる」と入力し、「保存」をクリックします。

これで、他のサイドバーの項目と同じようなレイアウトで「サイト内を検索してみる」が記述されます。

ここで出力されるXHTMLを見ると

XHTML

<li id="search-4" class="widget widget_search"><h2 class="widgettitle">サイト内を検索してみる</h2>

<form role="search" method="get" id="searchform" action="https://pc.beginners-luck.net/pcwp/" >

<div><label class="screen-reader-text" for="s">検索:</label>

<input type="text" value="CSS" name="s" id="s" />

<input type="submit" id="searchsubmit" value="検索" />

</div>

</form></li>

とあります。

CSS

div#sidebar li.widget_search label.screen-reader-text {

display:none;

}

とすることで、ラベルの「検索」という文字を消すことができます。

また、検索ボックスが横にはみ出ているので、これを縮めたいですが、ここではinputに幅を指定すると、「検索」ボタンまで同じ長さになってしまいます。

[属性名="属性値"]を追加記載すると、属性名と属性値が一致したときのみCSSが適用されるので、

CSS

div#sidebar li.widget_search input[type="text"]{

width:95%;

}

とします。

最後にinput同士の間隔を整えると、

CSS

div#sidebar li.widget_search input {

margin:5px auto;

}

なんかそれなりになりました。

Word Pressのお勉強だと思ってましたが、CSSの指定方法で、属性名や属性値も使う方法を始めて使い、ちょっとカンドーな見習です。

ちなみに

CSS

div#sidebar li.widget_search input[type] {

margin:5px auto;

}

と記述しても、同じ結果になります。[属性名]という記述方法だと、その属性名と一致したものに適用されるので、属性値がtextもsubmitも含まれるからです。

2011年12月8日3:25 PM| カテゴリー： HTMLとCSSのコード,スクリーンショット,見習い奮闘記| コメント (0)