こんにちは。スタッフ＆スピーカー＆スポンサーとして関わっていましたWordCamp Tokyo 2012が終わり、徐々に日常業務に戻していっている、株式会社コミュニティコムの星野邦敏です。

さて、今日は、WordPressにおいて、特定のファイルをアップロードした時や、特定のリンクURLの時に、自動的に指定のアイコン画像を付ける方法について、以下で説明します。

例えば、PDFファイルを、WordPressでは、初期の状態でアップロードしてリンクを貼ることができます。ただ、通常であればそれは、ただのテキストリンクとなってしまうことでしょう。また、クリックすると、いきなりPDFファイルが開く形になり、閲覧者はビックリしてしまうかもしれません。

このような感じです。

この点において、PDFファイルをアップロードした際には、自動でPDFであることを示すアイコンが前に付くと、Webサイトの閲覧者は分かりやすいかもしれません。

このような感じです。

この効果は、Webサイトの制作者と運営者が別の場合には、メリットとなるかと思います。

この実装方法として、HTMLで、アイコン画像を都度付けることは、もちろん可能です。しかし、その場合には、運用ベースでの方針が必要となります。

予め制作者側で、特定のファイルをアップロードした時には、指定のアイコンを付ける、ということをしておけば、運用側では、ファイルをアップしてリンクするだけの作業となりますから、一手間減らすこともできます。

さて、このようなアイコンを自動で付けることは、WordPressに限ったことではありませんが、CSSに以下のようなソースコードを書くことで対応することができます。
WordPressにおいては、必ず、style.cssが存在しますから、style.cssにでも書いておくと、このようなことが実現できます。（style.cssでなくとも、紐付いているCSSであれば、どの箇所に書いても問題ありません。）

a[href $='.pdf'] {
	background:url(images/pdf.png) no-repeat;
	margin: 0 0 0 0;
	padding: 20px 0px 20px 60px;
	display:block;
}
a[href $='.pdf'] a {
	color:#0000FF;
}
a[href $='.pdf'] a:hover {
	color:#0000FF;
	text-decoration:underline;
}

もちろん、別途、PDFアイコン画像は用意しましょう。それを、WordPressテーマにimagesフォルダなどを作って、その中に入れておくと良いと思います。

具体的に説明をしますと、

a[href^=○○○]

と書くことで、「○○○」で始まるリンクには、そのCSSを適用する。

a[href*=○○○]

と書くことで、「○○○」という文字列を含むリンクには、そのCSSを適用する。

a[href$=○○○]

と書くことで、「○○○」で終わるリンクには、そのCSSを適用する。

という意味になります。

従って、今回の上記の例は、PDFのリンクは拡張子の関係で「.pdf」で終わりますので、上記のような書き方になっているわけです。

以上を踏まえますと、例えば、WordファイルやExcelファイルなども拡張子が決まっているので、同様のことができます。
また、特定のサイトへのリンクの時に、指定のアイコンを付けるなども、「○○○」という文字列を含むリンクにはそのCSSを適用する、という形にすれば、実現することができるでしょう。
具体的には、例えば、Amazonへのリンクの時は自動でAmazonへのリンクを付けるとか、Yahooへのリンクの時は自動でYahooへのリンクを付けるとか、楽天へのリンクの時は自動で楽天へのリンクを付けるとか、そういうこともCSSで可能です。色々と応用が効くかと思います。

以上となります。もしそういう必要があった際には、参考になればと思います。

（追加）
「WordPressにおいて、」と書きましたが、CSS側の処理ですので、よくよく考えたら、WordPress以外でも汎用的に使うことができます。ということを、追加で記載しておきます。

（追加）
その後のFacebookで五十嵐さんとのやり取りで、PDFアイコンなどAdobeのアイコンについては、
Adobe Systems Incorporated Permissions and Trademark Guidelines
に公式アイコンがあると教えていただきました。
また、WordやExcelはマイクロソフトが許諾していないので、OSでよく見るアイコンをそのまま使うのはNGということを教えていただきまして、その場合には、
Iconize Textlinks with CSS – pooliestudios
などのフリーのアイコンを使うか、自分で作る、ということを教えていただきました。