自動アイコン選択表示CSS

当ブログでは 2008年5月29日の パズルの一枚の画像に依るブログ上自動生成 でも参照させていただいた ホームページを作る人のネタ帳 の運営者Yamada氏が他にも運営されている海外発情報発信の為のブログ ITquality の2008年5月1日の記事 ハイパーリンクの拡張子に応じてCSSでアイコン追加のチュートリアル での紹介は Ask The CSS Guy の2006年12月20日と紹介記事にも言及される少し許り以前なるも、 其の有用な内容から長い期間ランクインするようなロングヒット歌謡が如き記事、 Showing Hyperlink Cues with CSS で、当記事中にて紹介されているのが、 リンクの拡張子で判断してアイコン画像を付加する CSS は、当設定を一度施してしまえば EXCELファイルならばEXCELアイコン、 WORDファイルならばWORDアイコン という具合にリンク先が当該ファイルであるならば意識せずともアイコンが付加され、 シンプル乍、実効性が高い為の高評価で、繰り返しネット上の話柄に昇るのでしょう。
スポンサーリンク
下記に IPA(情報処理推進機構) 内の様々なファイルタイプにリンクしてみました。 勿論、 Showing Hyperlink Cues with CSS で紹介されている CSS Tips以外は利用しておらず、リンクは純粋なアンカータグのみですが、 リンク後方にお手製にてヘボさはご寛恕いただきたい当該アイコンが表示されて見えると思います。
また此のTipsにはmailto、 即ちクリックに因りクライアント側の標準設定メーラーを立ち上げるリンクにも対応しているのが以下になり、
Contact Me (HOGE)
加えて以下にはclass属性にも対応しているリンクを表示します。
新しいウィンドウを開く
更にclass属性はスペースを挟み並立の適用も可能で、 当ブログは2008年6月30日のアーティクル ブログ共通 CSS ファイル設定 に於ける具体的設定の/* ---主要なリンク--- */、a.inner_main_link属性を利用すれば
新しいウィンドウを開く(スペシャル)
の様な表示も可能となります。
スポンサーリンク