問題
解決策
リンク先に応じて、自動でアイコンを付けて、キャッシュバッシュにも対応させる
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はこちら
ここに注意!
この方法の紹介の中では、a[href$=“.pdf”] という記述を見かけます。
問題はありませんが、このhrefの後の「$」は、hrefの値の”最後に”「.pdf」がある場合、という記述となります。
これではキャッシュバッシュを仕込んだ際、「.pdf」が最後となりません。
キャッシュバッシュを仕込むとcssが適用されなくなってしまいます。
なのでキャッシュバッシュにも対応できるa[href*=“.pdf”]の記述を推奨します。
コメント