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

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

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

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

Sample

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

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

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

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

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

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

トップページへ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

その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つとして疑似要素を使ってみて下さい。

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

ゆーすけ(守屋祐輔)

ゆーすけ(守屋祐輔)

複業サラリーマン

会社員×ブログ×デザイン×講師×投資の5つの働き方・稼ぎ方を実践する複業サラリーマンブロガー ▼経験から学んだノウハウや考え方、自分の人となりがわかる記事をお届けします ▼主力複業のサイン作成では800人以上、5,500点以上の作成実績あり。

FOLLOW

カテゴリー:

\実体験に基づく情報/

ストレス・重圧から開放され、毎月がボーナス月で、強いやりがいを感じる私なりの複業に関する戦略・戦術をまとめた無料Ebookをプレゼント!これから複業を始めたい人、すでに始めている人。幅広くお役立てください。

複業しながらでも1日1冊の読書はできます。その読書術や私が読んで良かった本・学んだこと・活かしたことなど不定期でお届けします。読書は人生を豊かにします。本を読んで1つでも学びがあればいいのです。



関連記事