<< GTDやLife Hackが気... Portable Firefo... >>
 

鍵コメントを判りやすくする方法 pert2

はじめに

 以前、鍵コメントのアイコンを大きく表示して判りやすくする方法を書いたので試された方もいらっしゃるのではないでしょうか。
 今回は、前回よりももっと分かりやすくする方法として、図1に示すように鍵コメントのアイコンの手前に別のアイコンを表示してみました。この手法は、FirefoxなどCSS2に対応しているブラウザで利用できるのですが、IEなど対応していないブラウザでは試すことができません。
でも、鍵コメントであるのかを判断するのは、サイト主である自分なので、FirefoxなどCSS2に対応しているブラウザを利用されている場合は簡単に判断することができるようになります。

a0031863_121220.gif

図1


IEの方は、以下のリンクを試されるとよいと思います。
鍵コメントを判りやすくする方法

難易度:★





試す前の簡単なお勉強

CSS2では、属性セレクタがあります。この属性セレクタは要素の属性を絞り込むときに使います。要素attrがvalと一致した場合のみにスタイルを適応したい場合などに利用します。

[attr="val"]


今回の場合は、鍵コメントのイメージファイルがある時にスタイルを適応し、鍵コメントの横にアイコンを表示させています。従って、エキサイト側でhttp://md.exblog.jp/img/eg/post_security3.gif ファイル名を書き換えた場合は、そのファイル名を使用する必要がありますので、ご注意下さい。

参考までにCSS2の仕様書(W3C勧告)のリンクです。詳しく知りたい方はご覧下さい。

CSS2の仕様書(W3C勧告) Matching attributes and attribute values
CSS2の仕様書(W3C勧告)


CSS編集

CSS編集で以下のように設定するだけです。
padding-leftでイメージファイルを入れる場所を確保しています。大きすぎるアイコンだと表示しきれないので気をつけて下さいね。

CSS編集


/*鍵コメント判りやすくする CSS2対応*/
DIV.COMMENT_TAIL IMG[src="http://md.exblog.jp/img/eg/post_security3.gif"]{

padding-left:20px;
background-image:url("イメージファイルURLアドレス");
background-position:left;
background-repeat:no-repeat;

}





改良方法

この手法を応用すると色々と楽しめそうですね。今回はイメージを横に表示する方法ですが、バックグランドの色を変えたりして判りやすくする方法などもありますので、皆さんで工夫して楽しんで下さいね。


参考




今日のポイント
  • 属性セレクタは要素の属性を絞り込むときに使います。CSS2に対応したブラウザでのみ利用できます。今回のようなケースに利用するには最適な方法ではないでしょうか。





最後に


 JavaScriptが利用できる場合、はIE対応の表示方法もできるのですが、残念ながら利用できない状態です。
エキサイトさんがJavaScriptを使えるようにして頂けると嬉しいですね。
JavaScriptなど利用できるようになると、各自で使いにくい点をフォローできるのでいろいろとメリットもあるのだけど、無理かなぁ。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-03-11 12:01 | │├コメント欄
<< GTDやLife Hackが気... Portable Firefo... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。