店舗物件を探すなら

WordPressは、管理画面からpdfをアップロードすると記事内にテキストリンクが現れ、ダウンロードできるようになりますが、テキストリンクだけなので下記のようにとてもさびしい感じになります。

Webコンサルティングの手引き

今回はテキストだけでなく左側にPDFのアイコンを入れたいというクライアントのご要望がありました。昔はプラグインで実現できましたが今はWordpressのバージョンアップで使えなくなりましたので、CSSにて実現をしてみました。

下記のような感じになります

Webコンサルティングの手引き

導入手順

 
①CSSに以下のソースコードを追加します。

a[href $='.pdf'] {
font-size: 14px;
background:url(images/pdf.png) no-repeat;
margin-top: 30px;
padding-left: 60px;
padding-top: 23px;
padding-bottom: 130px;
}
a[href $='.pdf'] a {
color:#0000FF;
}
a[href $='.pdf'] a:hover{
color:#0000FF;
text-decoration:underline;
}

②PDFアイコンを『名前をつけて画像を保存』する。※ファイル名はpdf.png。
下記のPDFアイコン画像を現在使用中のテーマのimageフォルダに入れる。
 

③あとは、管理画面からpdfをアップロードすると自動でPDFアイコンが出現します。Wordの場合は、a[href $='.pdf'] の.pdfの箇所を.docに変更。エクセルの場合は.xlsに変更してください。※各アイコンは用意してください。