いつまで経ってもわからない、WEBってやつは・・・(´・ω・`)

【jQuery】外部リンクやエクセル、pdfなどにアイコンを付ける方法

いまさらですが、アレ、リンクにアイコンついてなくねΣ(゚д゚)!?って気づいてさっきもろもろ追加したゆでです(*´ω`*)。

自分のサイトだとあんまり気にしないのだめだねとあとで罵っておきますヽ(`Д´#)ノ

そしてついでなのでアイコンつける方法のメモ。

WPならプラグインもあるけどwあえて静的なヤーツをメモ(*´ω`*)
※あくまで参考w

jQueryを読み込ませる

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 jQueryを記述する

フッターにjavascriptを追加(´・ω・`)ノ

外部リンクに「extlink」クラスを追加。ついでに別ウィンドウ(タブ)で開くようにする。

jQuery("a[href^=http]").not('[href*="'+location.hostname+'"]').not(jQuery("a[href^=http]").find('img').parents('a')).addClass("extlink").attr("target","_blank");

 リンク先が「pdf」の場合、「pdf」クラスを追加。ついでに別ウィンドウ(タブ)で開くようにする。

jQuery("A[href*='.pdf']").not(jQuery("A[href*='.pdf']").find('img')).addClass("pdf").attr("target","_blank");

 リンク先がワードの場合、「doc」クラスを追加。ついでに別ウィンドウ(タブ)で開くようにする。

jQuery("A[href*='.doc'],A[href*='.docx']").not(jQuery("A[href*='.doc']").find('img')).addClass("doc").attr("target","_blank");

 リンク先がエクセルの場合、「xls」クラスを追加。ついでに別ウィンドウ(タブ)で開くようにする。

jQuery("A[href*='.xls'],A[href*='.xlsx']").not(jQuery("A[href*='.xls']").find('img')).addClass("xls").attr("target","_blank");

 ※クラスは適当に変更してOK(ノ´∀`*)
※拡張子追加したり変えたりいろいろできますね(*´ω`*)<さすがjQuery

CSSを追加

a.extlink{
	background:url(画像パス) right top no-repeat transparent;
	padding-right:18px;
}
a.pdf{
	background:url(画像パス) right top no-repeat transparent;
	padding-right:18px;
}
a.doc{
	background:url(画像パス) right top no-repeat transparent;
	padding-right:18px;
}
a.xls{
	background:url(画像パス) right top no-repeat transparent;
	padding-right:18px;
}

 (´・ω・`)<「top」のトコは調節して下さいw1行なら「center」でとかー

画像を置くのを忘れずに・・(笑)アイコンフォントとか楽かも(*´ω`*)♪

 こんなかんじになります(´・ω・`)ノ