2007年08月01日

IDやCLASSを設定してみよう 

今回は自分でIDやCLASSを設定して、カスタムスタイルにしてみましょうicon22
ちょっとややこしいですけど簡単です。
まずは予め設定されているCLASSをスタイルシートに追加してみます。
変更するのは、



この検索フォームです。
文字を入力するところは、以前紹介しました「.side .text」というクラスです。
検索ボタンには予め「.button」というクラスが設定されています。
この2つをスタイルシートで設定します。


.side .text」はすでに書かれてあるとおもいますから、そのまま属性や値を設定します。
.button」はスタイルシートでは設定されていませんので、追加して設定します。


設定


上のようにアレンジするには以下のように入力します。


/*検索フォーム*/
.side .text{
color:#ffffff;
background-color:#7BA5FF;
border:3px double #0000cd;
width:115px;
padding-left:3px;
}

/*検索ボタン*/
.button{
color:#ffffff;
background-color:#7BA5FF;
border:3px double #0000cd;
height:24px;
cursor : pointer;
}

それぞれ文字の大きさや色、背景色、ボーダー、幅の設定を行います。
※ブログ内検索の入力欄は、幅が100pxと固定されているようですので変更はできないと思います。
検索フォームは2つで1つってかんじですから、デザインは同じがいいと思います。
これだけで自分好みの検索フォームに変わるのですkao10


設定応用


次に今度は、コメント欄での書込というボタンも変えてみましょう。
これはまず、個別記事内の書込ボタンのところにIDやCLASSを追加します。



個別記事内の下の方を探すと、


<input name="insert" type="submit" value=" 書込 ">


このように書かれているところがあります。
そこへ、


<input name="insert" type="submit" class="button" value=" 書込 ">


このように「class="button"」と付け足します。
この「class="button"」は、先ほどスタイルシートで設定したクラスですから、個別記事で追加するだけで、検索ボタンと同じデザインが反映されます。
また、検索ボタンとは違うデザインにする場合は、スタイルシートと個別記事の両方に、新しくIDやCLASSを追加すればいいのです。
この場合、IDもしくはCLASSのどちらでも構いません。
ただ「#」や「.」の入力ミスに注意しましょう。
それぞれ名前はお好みで付けられますが、日本語や数字ではなく、アルファベットにしましょう。


まとめ


いかがでしたでしょうかiconN05
シンプルなボタンに飽きてた方にはもってこいのカスタムだったことと思います。
いろんなアレンジをして、お好みのボタンにしてみてくださいね。


次回は・・・まだ決めてません・・・。
それではお疲れ様でしたkao08icon23


  

Posted by nory at 22:50Comments(2)TrackBack(0)応用知識