問題 × 解決策

PDFにリンクしているaタグにアイコンを付けたい【キャッシュバッシュ対応】

問題

PDFにリンクしているaタグにアイコンを付けたい【キャッシュバッシュ対応】

解決策

cssでaタグに対し、a[href*=“.pdf”] { ~ } と記述する。

 

リンク先に応じて、自動でアイコンを付けて、キャッシュバッシュにも対応させる

PDFにリンクした際に、自動的にアイコンを付けさせる方法を紹介します。キャッシュバッシュ(クエリを付ける)にも問題なく対応できる記述でお伝えします。

CSSの構築

cssのコード例です。

a[href*=".pdf"]:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 25px;
	height: 34px;
	margin-right: 10px;
	background-image: url(../images/common/anchor-pdf.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 25px auto;
}
  • a[href*=“.pdf”]とすることで、pdfにリンクしているaタグに対して、cssを設定することができます。
  • hrefの後に「*」を入れることで、hrefの値の中の”いずれかの場所に”「.pdf」が入っていれば適用されます。
  • PDF以外でも、「.pdf」のpdfの部分を変えれば、WordファイルやExcelファイルにも対応させることができます。

DEMOはこちら

PDFはこちら

Wordファイルはこちら

Excelファイルはこちら

ここに注意!

この方法の紹介の中では、a[href$=“.pdf”] という記述を見かけます。
問題はありませんが、このhrefの後の「$」は、hrefの値の”最後に”「.pdf」がある場合、という記述となります。
これではキャッシュバッシュを仕込んだ際、「.pdf」が最後となりません。
キャッシュバッシュを仕込むとcssが適用されなくなってしまいます。
なのでキャッシュバッシュにも対応できるa[href*=“.pdf”]の記述を推奨します。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

7 + five =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧