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

スポンサーリンク

The following two tabs change content below.

ゆーすけ

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。クラシックミニ専門サイトの32miniドットコム

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

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

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

Sample

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

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

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

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

ボタンだと気付いてもらえるいい方法はないものか・・・

スポンサーリンク

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

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

↑これはクリック(タップ)できるボタンです。トップページに飛びます。

わかりますか?ボタンに書かれてある文字の後ろに矢印アイコンを表示させてみました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

あっとその前に、初めてスタイルシートをカスタマイズする人だったり、スタイルシートを変更しても見た目がかわらなかった苦い経験がある人は、まず先にこちらの記事に目を通しておくことをオススメします。

子テーマを使おう!STORK(ストーク)に子テーマをインストールする方法

2017.03.07

CSSの変更が反映されない時の完璧な対処法、教えます!

2017.03.02

/*————————————–
ボタンに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には次のように書きます。

※次のHTMLはOPENCAGE(オープンケージ) が販売するSTORK(ストーク)テーマで採用されているボタン表示のためのショートコードと併用しています。

[bt n]<a href=”https://mukutto.com”><span class=”arrow”>トップページに戻るよ</span></a>[/btn]

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

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

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

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

beforeを使うと文字の前に表示

今回は afterの疑似要素を使いましたけど、beforeと書き換えると文字の前に画像やアイコンを表示できます。

スポンサーリンク

まとめ

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

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

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

スポンサーリンク

スタイリッシュなサイン、作ります!

世界に1つだけのあなたのオリジナルサインをゆーすけが作成します。

ローマ字、日本語、カタカナ、芸能人のようなサインまで多種多様な用途に応じて作ります。

サインは1件3000円。納品時には書き方のコツ資料、書き順動画、サイン練習帳もお送りします。

クレジットカードや書類にビシッとかっこいいサインが書けたら素敵ですね!

ABOUTこの記事をかいた人

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。クラシックミニ専門サイトの32miniドットコム