閉じる
閉じる

あまめも

HTMLで簡単に拡張子に合ったアイコンを設定する方法【css】

アイコン

こんにちは! あますた(@amaguristar)です。

  • 「サイトでファイルをダウンロードさせたい時に拡張子で表示するアイコンや文字を変えたい」

そんな時ありませんか? 属性セレクタを使用すると簡単に作成可能です。

 

cssの設定で簡単に対応

今回は試しにリンク先がpdfファイルだった時に下記アイコンをリンクの先頭に表示する様に設定します。

pdf-icon
pdf-icon

css編集

a[href$=".pdf"]{
    padding: 10px 20px;
    border: 1px solid #1396c0;
    background-color: #e0f4ff;
    border-radius: 3px;
    text-decoration: none;
}

a[href$=".pdf"]::before{ 
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 5px;
  background-image: url(https://tsuredure.info/icon/icon-pdf.png);
  background-size: contain;
  vertical-align: middle;
}

上記cssを適用すると、

ダウンロード >> sample.pdf

この様にiconが表示される様になります。

自分の場合はアイコンのサイズを指定したいので直接幅と高さを指定しましたが、文字のサイズに合わせて表示したい場合は単純に、

a[href$=".pdf"]{
    padding: 10px 20px;
    border: 1px solid #1396c0;
    background-color: #e0f4ff;
    border-radius: 3px;
    text-decoration: none;
}

a[href$=".pdf"]::before{ 
  content: '';
  display: inline-block;
  width: 2em;
  height: 2em;
  margin-right: 5px;
  background-image: url(https://tsuredure.info/icon/icon-pdf.png);
  background-size: contain;
  vertical-align: middle;
}

ダウンロード >> sample.pdf

と文字の2倍位のサイズになる様に設定した方が、何かと楽だと思います。

画像は少し大きめを縮小すると綺麗に表示されます。

まとめ

リンクでファイル形式を判断する場合は、

a[href$="拡張子"]        例) a[href$=".pdf"]

セレクタを使用して判断する。

判断したファイルで画像を表示する場合は、

a[href$="拡張子"]::before
a[href$="拡張子"]::after

を設定する。

関連記事

  1. お店の「お知らせ」を開いたら記事ページに飛ぶようにした方が良いん…

  2. [甘]とりあえず、グローバルメニューの作成完了?

  3. edit

    「Git」のコミットメッセージを間違えた、そんな時の修正方法

  4. HTML

    <ol>タグの表示を変更する際のtype一覧リスト

  5. WordPressで『Twitter Cards』を設定するプラ…

  6. 特殊文字

    特殊記号を数字参照(コード直打ち)して文字化けを回避する方法

こんなメモもありますよ♪

  1. take035-beer-thumbnail
  2. take055-thumbnail

Twitter

ページ上部へ戻る