企業サイトを構築していると、ニュース内のテキストリンクに「PDF アイコン」を表示させるカスタマイズが必要になることが多いですので、
今回はWordPressでの投稿を例に、PDFファイルへのリンクテキストに自動でアイコンを表示させる方法に加えて、Word、Excel、ZIP ファイルのリンクにも同様にアイコンを表示させる方法を紹介致します。
アイコン画像とPDFファイルのアップロード
まずはPDFのアイコン画像を用意して、FTPでアップロードしておきます。
WordPressの場合は記事投稿画面よりPDFファイルをアップロードし、リンク先を「メディアファイル」にして公開します。
リンクがPDFファイルの場合の処理をCSSで記述
CSSファイル内に以下の記述を追加します。|
1 2 3 4 5 6 7 8 9 10 11 |
a[href $='.pdf'] { background:url(../img/icon/pdf.png) no-repeat center right; margin:0; padding:2px 32px 2px 0; color:#dd0000; text-decoration:underline; } a[href $='.pdf']:hover { text-decoration:none; } |
リンクテキスト（PDFファイルのタイトル）の「背景画像」としてPDFアイコンを読み込ませるので、環境に合わせてbackgroundのURL を変更してください。
今回はリンクテキストの右側にアイコンを設置しますので、paddingでテキストリンクの右側に余白を取っています。
※上下の余白は、PDFアイコン画像の大きさなどに応じて適宜調整します。
その他必要に応じて、リンクテキストの色や hover 時の色、リンク下線の有無を調整します。
リンクの表示例
こんな感じで表示されます。※ちなみに、a[href $=’.pdf’] はIE6には対応していません。
その他の拡張子のリンクについて
PDF 以外にもエクセルやWordのような文書ファイル、またZIP形式の圧縮ファイルなどにも対応していますので、ぞれぞれアイコン画像を用意してCSSで処理を書いておけば、ファイル（拡張子）に合わせて自動でアイコンが表示されるようになります。| a[href $=’.pdf‘] | |
| Word | a[href $=’.doc‘] |
| Excel | a[href $=’.xls‘] |
| ZIP | a[href $=’.zip‘] |
| http://のリンク（外部リンク等） | a[href $=’http‘] |
コメント