<< 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 | │├コメント欄 | Trackback | Comments(14)
トラックバックURL : http://potto.exblog.jp/tb/3322485
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Commented by blue_moon_rabbit at 2006-03-11 12:48
この方法だとさらにわかりやすくていいですね
Macで試してみます^^ありがとうございます
Commented by potto37 at 2006-03-11 17:18
blue_moon_rabbitさん、こんにちは
コメントありがとうございます。コメントもらえて嬉しいです^^
試して遊んでくださいね。
Commented by blue_moon_rabbit at 2006-03-11 20:46
再び^^
使わせていただきました♪いつもありがとございます^^
Macブラウザでは普段Safari&Firefoxを使用しています
オリジナルの画像を入れられるのがいいですね
MacでもIEはだめでしたが使っている人は減る一方ですよ
Commented by potto37 at 2006-03-12 17:31
blue_moon_rabbitさん、こちらこそありがとうございます。
Macの貴重な情報をありがとうございます。
画像が入れられるのいいですよね、私も気に入ってます^^
Commented at 2006-03-14 22:57
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2006-03-21 08:26
鍵さん はじめまして
今、多忙のため3つの質問に答えることができません。
ごめんなさい。

両端に余白を持たせる方法は色々あります。
私の方法は、containerを作成し、containerに横幅を指定します。
containerを中央配置し、bodyに画像を配置するようにしています。詳細については、以下のアドレスをご覧下さい。

実際に私が利用している、雛形です。
初めての方には扱い難いですが、なれると扱い易いです。

http://potto.exblog.jp/2985117/
http://potto.exblog.jp/3018875/

HTMLとCSSの最低限の知識は以下のサイトから学ぶことができますので、こちらをご覧下さい。
http://www.tohoho-web.com/www.htm

Commented by RinsCafe at 2006-04-30 06:49
ぽっとさん、ご無沙汰してます。
やっぱり、スキンのカスタマイズに関してはこちらが一番すごいなって
思います。あまりにも専門的すぎて、???なことも多いのですが、
少しずつカスタマイズできたらなって、思っています。といいつつ、
実際にやれたのはコメント欄だけなのですけど・・・。

GW・・・少しいじってみようかなと思ってます。
出来たらまたご報告ししますね。プリントアウトして、ファイリングした
ぽっとさんのマニュアル・・・ずいぶん分厚くなりました(^^♪
いつも詳しく丁寧な説明ありがとうございます♪  
                                       凛でした。
Commented by potto37 at 2006-04-30 18:25
凛さん、おひさです。
可愛い、名刺ができましたね。絵が得意な方が羨ましいです。

スキンのカスタマイズは楽しいので、GWにいじってみるのもいいですね。
こちらこそ励ましのコメントありがとうございます(*^。^*)
Commented by lee_milky at 2007-08-18 10:25
こんにちは。
いつもお世話になっています。
以前のブログのとき、コメント入力欄についてご質問し、わざわざ記事をアップして頂いたpeko55665です。
実は、昨日非コメ欄にアイコンが表示できるように設定してみたところ、非公開ではないところにもアイコンが出て来てしまいます。
更に、ログインしてコメントすると、HNの横にもアイコンが表示されます。
→  http://leemilky.exblog.jp/6138279/
理由がもし分かれば、教えて下さい。
また、リンクも貼らせて頂ければ、嬉しいです。
以上2件、よろしくお願いします。
Commented by potto37 at 2007-08-18 20:45
lee_milkyさん、こんにちは。
もちろん、リンクはOKですよ。

DIV.COMMENT_TAIL IMG部分を以下のように修正しして下さい。これでできると思います。

DIV.COMMENT_TAIL IMG{
height:15px;
width:15px;
}

DIV.COMMENT_TAIL IMG[src="http://md.exblog.jp/img/eg/post_security3.gif"]{
padding-left:20px;
background-image:url("http://pds.exblog.jp/pds/1/200708/17/86/aikonn.gif");
background-position:left;
background-repeat:no-repeat;
}

今回のケースのDIV.COMMENT_TAIL IMGはコメント欄のタイトル部分の画像に対して動作します。しかしDIV.COMMENT_TAIL IMGだけではどの画像も反応してしまいます。そこで、CSS2のテクニックとして、画像ファイルも指定しています。([src= 以降の部分です。)

いちど試して下さいね。
Commented by lee_milky at 2007-08-19 03:52
ぽっとさん、おはようございます。
早速のお返事ありがとうございます。
リンクさせて頂きました。今後ともよろしくお願いいたします。

さて、アイコンの件ですが、私の説明不足で申し訳なかったのですが、昨夜、[src="http://md.exblog.jp/img/eg/post_security3.gif"]を入力すると、アイコンが表示されなかったのです。
今回、上に書いて下さったものをコピペして再挑戦したのですが、やはり、アイコンが表示されませんので、今、また元に戻しています。
Commented by potto37 at 2007-08-19 07:27
lee_milkyさん、おはようございます。

確認のため、先日のコードは非公開コメントのみのアイコン表示です。
CSS2に対応したものなので、Firefoxなどの新しいブラウザでないと表示されません。
ブラウザをFirefoxなどに変えてご覧下さい。

私のところではlee_milkyさんのサイトを書き換えて試したところ、非公開コメントの表示がされています。

OS:Windows XP+SP2
ブラウザ:IE 7 or Firefox 2.0

変更内容を元に戻してしまうと、こちらで確認できないので、どのように変更したのかが分かりません。
 変更場所によってはうまくできないと思います。最後の部分に追加した場合は、TEXTAREA.TXTFLD{の括弧を閉じ忘れがあるので、TEXTAREA.TXTFLD以降に書いても機能しないと思います。他にもあるかもしれないので、どのように書き換えたかが重要になります。
CSS2対応のブラウザでNGであれば、前後のコードの問題なども考えると解決できるかもしれません。

変更後のイメージ:http://pds.exblog.jp/pds/1/200708/19/63/fig01.gif
対象ページhttp://leemilky.exblog.jp/6098007/

画像はしばらくしたら消します。

Commented by lee_milky at 2007-08-19 21:08
ぽっとさん、何度もありがとうございました。
DIV.COMMENT_TAIL IMG部分を上に書いて下さったものに再度書き換え、ブラウザをFirefox 2.0に変えてみましたが、やはり上手くいきません。

なにせ、PCのことがあまり分からないままに設定しているので、色々不都合が生じているのかもしれません。

それでも、こちらに時々立ち寄り、自分で背景なども変えることができるようになりました。

本当にありがとうございました。
Commented by potto37 at 2007-08-20 21:20
lee_milkyさん、こんばんは。
 私のところでは問題なく表示されているので、なにかちょっとしたことかもしれませんね。(ブラウザやOSなどのバージョン違いの差とか)
こちらこそ、遊びに来ていただいてありがとうございます。
<< GTDやLife Hackが気... Portable Firefo... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。