CSSでリンクファイルに応じてアイコンを表示させる

CSS
スポンサーリンク

急遽必要になったので、メモ残しです。

リンクファイルに応じてアイコン表示

通常、WordPressなどで直接PDFファイルにリンクした場合、

こんな感じで、普通にリンクが貼られますので後ろにPDFファイルですよーと注意事項を書いたりします。

ぱぷれさん
ぱぷれさん
記事の内容はツッコミ不可。
ぱぷれさんの別ブログの記事ですことよ。

いちいちこういった注意事項を手動で付け足すのは面倒なので、自動で示せるようにしたいと思います。

こういった感じになるように。

CSSでリンクファイルに応じてアイコンを表示させるやり方

CSSでリンクファイルに応じてアイコンを表示させるには、アイコンを用意して、CSSに追記するだけです。
とりあえずやってみましょう。

1.アイコンを用意する

まずは表示させたいアイコンを用意します。

今回使ったのは、こういったPDFっぽいファイルアイコンの24×24サイズ。
他にもいろいろとアイコンの候補はあるかと思いますので、お好きなサイズでご用意ください。

もちろん、PDF以外にも出来ますのでその他ファイルのアイコンが必要であれば(WordとかExcelとか)、そちらもご用意ください。

こちらをテーマの画像フォルダにFTPでアップロードします。

2.CSSファイルに追記する

テーマのスタイルシートに、以下のコードを追記します。

a[href $='.pdf']    {
background:url(images/pdf.png) no-repeat center right;
margin:0;
padding: 10px 26px 10px 0;
line-height: 28px;
}
ぱぷれさん
ぱぷれさん
paddingとかline-heightはお好みで変更してください。
url(xxxx/xxxx.png)の部分は、アップロードした画像に合わせて変更してください。

FTPアップロードが出来ない場合

FTPでのアップロードが出来ない、もしくはCSSファイルの直接編集が出来ないという場合は、以下のようにすれば同じことが出来ます。

  1. アイコン画像をWordPressのメディアに追加する。
  2. [外観]-[カスタマイズ]の[追加CSS]にコードをコピーする。
  3. url(images/pdf.png)のパスを、メディアのURLに置き換える。

PDF以外のファイルにアイコンを指定したい場合

PDF以外の、WordやExcelのファイルをアップロードしてアイコンを指定したいときは、それぞれにコードを追記します。

a[href $='.doc']    {
background:url(images/word.png) no-repeat center right;
margin:0;
padding: 10px 26px 10px 0;
line-height: 28px;
}
といった感じで、拡張子の部分を書き換えます。WordやExcelは、バージョンによって拡張子が.docだったり.docxだったりする場合があるので、混在しそうなときには以下のように併記しておきましょう。
a[href $='.doc'],a[href $='.docx']    {
background:url(images/word.png) no-repeat center right;
margin:0;
padding: 10px 26px 10px 0;
line-height: 28px;
}

まとめ

たまーに必要になって、そのたびに「どうだったっけ?」と過去のコードを引っ張り出すのが面倒くさいと言えば面倒くさいので、メモです。

アイコンはいろんなサイトさんで配布されているのでそちらを利用してもいいかと思います。

32ピクセル四方と24ピクセル四方で、ぱぷれさんが何かのときに作ったやつの焼き直しで良ければこちらを使うのは一向に構いませんです。サイズ展開したりとか、他のファイルを作ったりとかは、今のところ予定はないですが。

ぱぷれさん
ぱぷれさん

お仕事で必要だったら作るので、その機会があれば追加はするかもしれない。

コメント

タイトルとURLをコピーしました