BFuture

こんにちわ、もんじです。

本日は、このサイト 【BFuture】 でも取り入れている、
リンクにアイコンをつける方法をご紹介したいと思います。



↓ この矢印アイコン（スマホはアイコン表示していないので見えません(；´∀｀)）
BFuture トップ

最初にCSS に定義することで、Aタグのリンクは全て自動的にアイコンがつく方法をご紹介します。
ただこの場合だと、アフィリリンクを作成する場合にちょっと困ったちゃんになってしまいます。

Aタグ全てに自動的にアイコンをつける方法だと、
アフィリリンクが文字のみのリンクだと問題ないのですが、
画像もある場合に、画像の横にアイコンが付いちゃうんですね。

普通の Aタグのリンクと、アフィリリンクの Aタグを判別する方法が
私には思い付かなかったので、悩んだ挙句の、アフィリ対応版の方法もご紹介します。

アフィリをしない人は、自動的にアイコンをつける方が楽なので、そっちを適用して下さい。

スポンサードリンク


１．リンクアイコンの画像を用意する。

お好きな画像を２つ用意して下さい。

なぜ２つ必要かというと、リンクの上にマウスカーソルを重ねた場合、
リンクの色がちょっと変わりますよね？

上のサンプルで確認すればわかりますが、
このサイト 【BFuture】 では青色から水色に変わります。
それに伴って、アイコンの色も青色から水色に変わってるのがわかると思います。

この変化は２つの画像アイコンを使って実現しています。

リンクの上にマウスカーソルを重ねた時に、画像を入れ替えているんですね。

用意する画像はなんでもいいですが、以下のサイトなんかがオススメです。

完全無料で会員登録などの必要もありません。
アイコン・イラストフリー素材画像-無料素材倶楽部

会員登録すれば無料素材が使用できます。とても高品質です。
写真・イラスト・動画素材販売サイト【PIXTA（ピクスタ）】


画像を準備したら次の手順に進みましょう！
次の手順からは２つに分かれますので、目的に合った方を適用して下さい。

１．リンクアイコンを付ける範囲を特定する。

リンクアイコンをサイトのどの範囲に適用するのかを決めます。
全てのリンクに適用しちゃうとうざったいので、基本的には記事の本文だけで良いと思います。

ここでは、「<div class="article">」 に対して適用すると仮定して話を進めます。

２．CSS の設定

CSS に以下の記述を追加して下さい。


2行目の【background:url】 には、
リンクの上にマウスカーソルを乗せていない時に表示させたい画像を選択して下さい。

3行目の【padding-left】 には、アイコン画像の横幅サイズ ＋ 3px ほどを目安に設定して下さい。
この3px を入れないと、文字がアイコンにくっつきすぎてしまい、見難くなります。

4行目の【background:url】 には、
リンクの上にマウスカーソルを乗せた時に表示させたい画像を選択して下さい。

5行目の【padding-left】 は、3行目と同じですが、
マウスカーソルをリンクに乗せた時と、乗せてない時で違うサイズの画像を表示させたい場合は、
値が異なってくるので注意して下さい。


以上でCSS で自動的にリンクにアイコンをつける設定は完了となります。

こちらの方法では、リンクアイコンを入れる場所にリンクアイコン用のタグを入れるようにします。
要するに人が判断するということですね (；´∀｀)

１．CSS の設定

CSS に以下の記述を追加して下さい。


2行目の【background:url】 には、
リンクの上にマウスカーソルを乗せていない時に表示させたい画像を選択して下さい。

3行目の【padding-left】 には、アイコン画像の横幅サイズ ＋ 3px ほどを目安に設定して下さい。
この3px を入れないと、文字がアイコンにくっつきすぎてしまい、見難くなります。

4行目の【background:url】 には、
リンクの上にマウスカーソルを乗せた時に表示させたい画像を選択して下さい。

5行目の【padding-left】 は、3行目と同じですが、
マウスカーソルをリンクに乗せた時と、乗せてない時で違うサイズの画像を表示させたい場合は、
値が異なってくるので注意して下さい。

また、クラス名 【arrow】 はお好きな名前に変更しても良いですが、
次の HTML に記述するクラス名と合わせるようにして下さい。

２．HTML （又はブログ記事内の設定） の設定

記事内でアイコンを表示したいリンクの Aタグに
<span class="arrow"></span> を設定して下さい。

以下、サンプルです。



以上でアフィリ版の対応も完了です。

ちょっとかっこ悪いですね。もうちょっと勉強します (；´Д｀)


いかがでしたでしょうか？

これでまた一段とアナタのサイトも豪華っぽくなることでしょう！(ﾟ∀ﾟ) ﾖｶﾀﾈ!


でわでわ ( ´Д｀)ﾉ~