before, after疑似要素を使ってアイコンを表示させる方法

こんにちは、パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。

ブログの中でリンク先を貼る時、おしゃれに表現したいなという人はCSSをカスタマイズしてこんなボタン表示をすることがあります。

↓こんなの↓（画像なのでクリックしても飛びません）

ブログを普段から読んでる人が見たらこのボタンをクリックしたりタップすることでページが移動することが自然にわかります。

でもあまりボタンに馴染みがない人からすると、ボタンをボタンだと認識してもらえないことがあります。

つまり上のようなカスタマイズしたボタンが普通の画像か何かだと思いこんでしまい、リンク先だと気付かないまま記事を読み進めることがあるというわけ。

これじゃあせっかくリンク先に読んで欲しい内容があったとしても到達する可能性は低くなってしまいます。

after疑似要素を使って解決！

そこで僕が採用したのはこんな方法です。

トップページへ

文字の後ろに矢印アイコンを表示させてみました。

こうやって矢印があるだけでもクリックすると何かあるんだろうなと思ってもらえる確率が高くなりますよね。

絵もアイコンもなく、単純に文字だけ書いてあるよりかは見た目もおしゃれです。

これは1つ1つに画像を挿入しているわけではなく、ごく簡単な「after疑似要素」というものを使って表示させています。

after疑似要素の具体的な使い方

僕が実践しているようなアイコンを挿入したい！という人は次のやり方を参考にしてみてください。

表示させるアイコン/画像を見つける

最初のステップは使いたいアイコンや画像を見つけましょう。

僕のようにボタンに対して疑似要素を使いたい人は一目でボタンだと気付いてもらえるような、例えばクリックしたらページが変わるんだなということを連想させる矢印や指のアイコンがおすすめかも。

WEBフォントなんかも指定することができますね。

僕がよくアイコン探しでお世話になるサイトはこちら。

icooon-mono.com

アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO

続きを読む>>

版権フリー、商用利用可能なアイコンをたくさん取り扱っているサイトです。

自由に大きさや色の指定もできるので重宝します。

アイコン/画像をアップロードしておく

使いたい素材が見つかったらアップロードしておきましょう。

そのURLをひかえておきます。

スタイルシートに書き込む

スタイルシートに次のコードを加えます。

/*————————————–
ボタンにarrowアイコン挿入
————————————–*/
.arrow:after {
content: “”;
display: inline-block;
width: 35px;
height: 35px;
margin: -3px 0 0 10px;
background: url(“https://mukutto.com/wp-content/uploads/2017/03/fast-forward.png”) no-repeat; background-size: contain;
vertical-align: middle;

クラス名は自由に変更可能

文頭の.arrow は自分の好きな言葉に変更して使って下さい。

画像の大きさを変更可能

疑似要素だと本来は画像の大きさを指定することができません。

つまり自分がアップロードした画像の大きさでしか表示できないのが普通なんです。

でも今紹介したコードのように「display: inline-block;」を使うことで大きさの指定が可能になります。

画像の大きさを変えたい時は「width: 35px」「height: 35px」の数字を好きな値に変更してください。

アイコン/画像のURLを貼る

さっき自分で見つけた好きなアイコンや画像のURLを「background: url(“http…)」のところに貼り付けます。

HTML

文章のHTMLには次のように書きます。

＜a href=”https://mukutto.com”><span class=”arrow”>トップページに戻るよ</span></a＞

赤字で色付けしたように span classでさっきのCSS先頭の単語を指定します。

するとこちらのボタンのように特定の文字の後ろ（after）にアイコンを表示することができました。

トップページに戻るよ

文字とアイコン/画像の組み合わせはまさに無限大。

色々な組み合わせを考えてうまく活用してみましょう。

まとめ

ブログってコンテンツを充実させるのはもちろん大事なんですが、デザインやフォントなどわかりやすく表示するUI（ユーザーインターフェイス）の部分も大事です。

読まれるための工夫の1つとして疑似要素を使ってみて下さい。

ちなみにこの記事の始まりと終わりの関連記事で「いまココ」というこんなアイコンをつけてますけど、これも擬似要素を使ったテクニックです。