Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
リンクするファイル・拡張子を区別してファイルアイコンを自動で表示 - CodingMania

2011/5/15

リンクするファイル・拡張子を区別してファイルアイコンを自動で表示

.pdf,.doc,.xls,.pps,.zip,.exehref属性の値が“何”で終わるかによってスタイルを適用しています。

最低限の高さを確保する記述をいれています。

HTMl

<p><a href="sample.pdf" target="_blank">PDFへリンク</a></p>
<p><a href="sample.doc" target="_blank">Wordへリンク</a></p>
<p><a href="sample.xls" target="_blank">Excelへリンク</a></p>
<p><a href="sample.pps" target="_blank">PowerPintファイルへリンク</a></p>
<p><a href="sample.zip" target="_blank">zipファイルへリンク</a></p>
<p><a href="sample.exe" target="_blank">zipファイルへリンク</a></p>

CSS

a[href$=".pdf"] {
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_pdf.gif) no-repeat center right;
}
a[href$=".doc"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_doc.gif) no-repeat center right;
}
a[href$=".xls"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_xls.gif) no-repeat center right;
}
a[href$=".pps"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_pps.gif) no-repeat center right;
}
a[href$=".zip"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_zip.gif) no-repeat center right;
}
a[href$=".exe"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_exe.gif) no-repeat center right;
}