PDFアイコン画像を用意して、あとはCSSファイルのカスタマイズするだけで、WordPressの投稿記事にPDFアイコンを付けて表示できるようです。
かなり便利ですのでシェアさせていただきました。
（１）PDFアイコン画像の用意
自作、あるいはフリー素材などでPDFアイコン画像を用意してサーバへアップします。（２）CSSファイルのカスタマイズ
CSSファイルに以下のような記述を追加します。
PDFアイコン画像のリンク先は、ご利用の環境に合わせて変更します。
また、PDFアイコンをテキストの右側に寄せたいなどの場合は、CSS側でレイアウトを補正してあげます。
※今回は、アイコンはテキストリンクの「右に寄せる」スタイルです。
ただし、a[href $=’.pdf’]はIE6 には対応していないので、どうしてもIE6 対応が必要な場合は
をベースに補正が必要になります。
※上記のままだと、リンクに全部PDFアイコンがついてしまうので補正が必要です。。。
（３）実際にPDF をアップして、フロント画面に出力してみた
実際にWordPress管理画面よりPDFファイルをアップしてみます。メディアアイコンをクリックして、PDF ファイルをドラッグ＆ドロップでほりこんで、PDF のタイトルにテキストを流し込みます。
これで記事を公開して、フロント画面でどのようにみえるかと言うと、こんな感じですね♪
他にもWord、Excelなどのアイコン表示も可能なようですので、この辺は是非またやってみたいと思います。
コメント