Entries

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

heteml
月額1500円で大容量2GB!Flash Media Server、ColdFusionが使えます。
その他、PHP4・PHP5・MySQL・Ruby・Perl・Pythonなども使える納得の高機能。

グループチューブを使えば簡単にSNS(ソーシャルネットワーキングサイト)を作ることができます。
社内の情報共有をはじめ、家族用、サークル用のものなど、いろんなタイプのSNSを簡単に作成できます。
お申し込みからわずか数分であなたのオリジナルSNSの完成です。

-件のコメント

コメントの投稿

新規
投稿した内容は管理者にだけ閲覧出来ます

-件のトラックバック

トラックバックURL
http://cfdn.blog1.fc2.com/tb.php/31-5a3cbc40
この記事に対してトラックバックを送信する(FC2ブログユーザー)

外部リンクにアイコンを付ける

CSSの実装が貧相なInternet Explorerを使っている人はなかなか気づかないと思うのですが、少し前から外部リンクに対してアイコンが付いている事にお気づきでしょうか?普段からMozilla FirefoxなどのCSS2実装が進んでいるブラウザを常用にしている方であれば既にお気づきだと思います。

CSSにはcontentという要素の直前、または直後に新しく追加する内容を設定出来るプロパティがあります。非常に便利なプロパティですが残念な事にInternet Explorerは実装していません。

このcontentプロパティを使うとこのような事が出来ます。

div.section a[href^="http:"]:before,
div.section a[href^="https:"]:before {
  content : url("使用する外部リンクアイコン画像のパス");
  vertical-align : middle;
}

div.section a[href^="自分のサイトのアドレス"]:before {
  content : "";
  vertical-align : baseline;
}

簡単に説明するとまず記事エリアでaタグを使用しており、href="xxx"の値がhttp:もしくはhttps:のリンクに対して要素の直前(before)にアイコン画像を追加します。そしてvertical-alignで高さを合わせるためにmiddleを設定しています。

これだけだと記事エリア内のリンクには全てアイコン画像が追加されてしまいますので、次の設定で自分のアドレス(つまり内部リンク)の場合は設定したアイコン画像をクリアしています。

結果、本文で外部へリンクを張る場合やトラックバック先など内部リンク以外のリンクに対してアイコン画像を追加する形になります。

応用すれば拡張子が「.pdf」ファイルへのリンクに対してはPDFアイコンを表示するなど色々と使い道があります。

div.section a[href*=".pdf"]:before {
  content : url("使用するPDFアイコン画像のパス");
  vertical-align : middle;
}

結果が気になる方はMozilla Firefoxなど対応したブラウザでご確認下さい。

heteml
月額1500円で大容量2GB!Flash Media Server、ColdFusionが使えます。
その他、PHP4・PHP5・MySQL・Ruby・Perl・Pythonなども使える納得の高機能。

グループチューブを使えば簡単にSNS(ソーシャルネットワーキングサイト)を作ることができます。
社内の情報共有をはじめ、家族用、サークル用のものなど、いろんなタイプのSNSを簡単に作成できます。
お申し込みからわずか数分であなたのオリジナルSNSの完成です。

0件のコメント

コメントの投稿

新規
投稿した内容は管理者にだけ閲覧出来ます

0件のトラックバック

トラックバックURL
http://cfdn.blog1.fc2.com/tb.php/31-5a3cbc40
この記事に対してトラックバックを送信する(FC2ブログユーザー)

Appendix

AdSense

heteml

世界標準のブログソフトウェア「Movable Type」発売中!!

ロリポップならMovableType設置マニュアルも充実。あなたも月々263円でブログデビューしてみよう!!

Profile

CHOU-FLEUR

東京・名古屋を中心にWEBデザイン業をしています。個人・法人を問わずアクセシブルなサイト制作を賜ります。お気軽にお問い合わせ下さい。尚、FC2ブログに関するお問い合わせ・カスタマイズのご質問は当方でお答えする事が出来ません。予めご了承ください(有料カスタマイズ等、仕事に関する件はお気軽にお問い合わせください)。

お問い合わせ先
info@chou-fleur.net

Powered by FC2ブログ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。