外部サイトへの別タブリンクとPDFへのリンクに自動的にアイコンをつける #CSS #scss 外部サイトへの別タブリンクとPDFへのリンクに自動的にアイコンをつける #CSS #scss

外部サイトへの別タブリンクとPDFへのリンクに自動的にアイコンをつける #CSS #scss

外部サイトへのリンクが別タブで開くように設定しているときやリンク先がPDFファイルだということを指定しといたとき、あらかじめアイコン表示がされていると便利ですよね。いちいち画像のアイコンつけたり、aタグにclassつけて設定するというのも一つの案だと思うのですが、できたらもう少しスマートに楽をしたい。と考えたのがことの始まりです。

Font Awesomeを使えるようにしておく

webフォントのアイコンセットで有名なFont Awesomeを使えるようにしておくのが第一段階です。自分でアイコンセットをつくるのもいいのですが、せっかくイイモノがあるので使えるなら使ってしまったほうがいいに決まってます。

1. Font Awesomeをダウンロードする

Font Awesome

開いたら、Downloadと書いてあるボタンをクリックします。
クリックすると下のような画面になるので、

FontAwesomeダウンロード

なんかごちゃごちゃ書いてありますが、一番下の「No thanks, just download Font Awesome」(いや、いい。ただAwesomeフォントだけダウンロードさせてくれ)の部分をクリックします。そうすると、zipファイルのダウンロードが始まりますので、ダウンロードし終わったら解凍して、アップロードしたフォルダの適当な位置にでも保存しておいてください。

ちなみにごちゃごちゃ書いてある内容ですが、こんなことが書いてあります。

Download ダウンロード

Before you download, check out our latest project: Fort Awesome—
君がダウンロードする前に、うちらの最新のFort Awesome プロジェクトを確かめてくれ。

More Sets もっとセットしたい

Font Awesome not the right look? We’ve got the perfect icon set for your website!
正確に表示されないAwesomeフォントはある?俺たちは、君のサイトのために完璧なアイコンセットを準備してるんだゼ。

Your Icons 君のアイコンも!

Copy & paste your own logo and icons directly into Fort Awesome. Easy peasy.
君自身のロゴをコピペしてみてくれ。そうすれば、 Fort Awesomeの中に直接とりこまれるんだ。めちゃくちゃ簡単だろ。

Fonts Too! フォントだって!

Subset and serve your typefaces too! We’ve got some great ones to start with.
君のフォントセットも使えるしセットできるぞ。俺たちはそれを始めるためのすごいものをゲットしたんだ。

Optimized 最適化

Subsetting your icons and typefaces often shrinks them by 95% or more!
君のアイコンやフォントセットを使うとね、95%かそれ以上縮小できるんだぜ。

Hosted ホスト

No more messing with files! Update and deploy your icons to our CDN.
ファイルをごちゃごちゃしなくてもいい。俺たちのCDNに君のアイコンをアップデートして配置すればいいだけ。

Faster より速く

Optimized and hosted means your icons and typefaces load much faster.
最適化やホストってのは君のアイコンやフォントセットをより早く読み込めるってことさ。

Take your icon game to the next level with
次のレベルに君のアイコンを連れていきたくないかい?

Fort Awesome
それがFort Awesomeなんだよ。

かなり適当な意訳ですが、だいたいこんなことが書いてあります。納得したなら、試しに使ってみるのもありだと思います。

3.ダウンロードしたFont Awesomeをサイトで使えるようにする

ダウンロードして解凍しただけでは、フォントを使うことはできないので、htmlファイルの<head>~</head>のところに

を入れておきます。

これでFont Awesomeを使う準備は完了です。

リンクに自動でアイコンがつくようにCSSをいじる

自分はscssで設定を作ったので、そのソースコードを載せておきますね。前に書いたリンクのテキストカラーを変えるのも合わせて使うと一気にリンク関係設定できて便利かと。

上のscssをコンパイルすると

とこんな感じになります。今回::afterの議事要素に使ったフォントは外部リンクで別タブを開くことを示すアイコンPDFファイルを示すアイコンの2つです。もちろん、これにこだわる必要はないと思うので、変更したい方はご自由にどうぞ。

さて、お気づきの人もいると思いますが、

2行目の &[href$=”.pdf”] の.pdfの部分は拡張子をしめしています。href$ と指定することで、語尾が~で終わるものというふうに表しているわけです。なので、ここは別にpdfだけにこだわらないで、いろんな拡張子を設定してそのたびごとにアイコン設定をすることだってできちゃうんです。

こんなふうにあらかじめアイコンが出るように設定しておくと、いちいちいろんなパターンを考える必要もなくて楽ですね。

188 views/total