CSSでリンク横に「参考・LINK」バッヂをつけてみよう

こんにちは、okutani(@okutani_t)です。今回は、リンク横にCSSでかわいいバッヂをつける方法を解説いたします。

バッヂを作るだけなので拍子抜けするぐらいかんたんです。CSSがあんまりよく分からない方でもコピペで作れますので、お気軽に試してみてください。

HTML+CSSで作っていくので、WordPress等のCMSでも同じように表示されるはずです。WordPressで運営している当サイトでも、本記事の方法でバッヂを設置しています。

ではさっそくCSSでバッヂをレイアウトしてみましょう。

スポンサーリンク

バッヂを並べるにはspanタグを使おう！

文字の横に並べて何かを表示したいときは、spanタグを使うと良いです。

CSSでレイアウトできるように、classもつけておきましょう。

<span class="sankou-badge">参考</span>

この右隣にテキストリンクを置いておけば、「このリンクは参考リンクですよ」とユーザーにわかりやすく伝えられますね。下記は一例です。

<span class="sankou-badge">参考</span><a href="http://vdeep.net" target="_blank">okutaniが運営するブログ vdeep</a>

「参考」の文字と、classの指定を変えてあげれば、自分の好きなバッヂをかんたんに複製することができます。

<span class="link-badge">LINK</span>

では、このHTMLタグに対してCSSでレイアウトをつけていきます。

CSSでバッヂのレイアウトを行う

spanタグに対して、次のとおりCSSでレイアウトしてみましょう。WordPressを使っている方は、お使いのテーマにある.cssファイルに記述してください。

.sankou-badge, .link-badge {
  padding: 3px 6px;
  margin-right: 8px;
  margin-left: 1px;
  font-size: 75%;
  color: white;
  background-color: #04B404; /*緑*/
  border-radius: 6px;
  box-shadow: 0 0 3px #ddd;
  white-space: nowrap;
}

.link-badge {
  background-color: #58ACFA; /*青*/
}

CSSの解説

paddingで内側の余白をつけてバッヂ感を出してます。box-shadowをつけることでバッヂに影をつけることができます。

border-radiusを使うことでバッヂを丸角にすることができます。四角いバッヂにしたい場合はborder-radiusの記述を削除してください。

white-space: nowrapは、長いリンクを張ったとき、改行位置がバッヂにならないように指定しています。これをつけることでバッヂが崩れてしまうことを防げるので、保険としてつけておきましょう。

上のCSSで「sankou-badge」「link-badge」両方にスタイルを適応しているので、その下に背景の色を変えたlink-badgeを置くことで、色違いのバッチにしています。

#を使った色の指定方法は「カラーコード」で調べてみてください。お好みの色のバッヂを作成することができます。

では、きちんとバッヂの形になっているか確認してみましょう。

バッヂレイアウトの確認

次のように表示されました。

とってもかんたんに「参考・LINK」バッヂをつけることができました！

ちなみに、リンクの右隣についてる矢印はWordPressプラグインを使っています。

外部リンクに対して自動的に矢印アイコンをつけてくれる便利なやつなので、興味のある方は一緒に使ってみてください。

参考[WordPress] 外部リンクに自動でアイコンをつける「External Links」プラグイン | vdeep

まとめ

HTMLのspanタグとCSSを使ってかわいいバッヂを作ることができました。

大抵のレイアウトはCSSで行うことができますので、すこしCSSを覚えてみて、自分の好きなレイアウトが組めるようになると世界が広がって良いですね。

また、大抵はプラグインを使わずにCSSを使ったほうがサイトの表示速度は速いはずです。オリジナルのレイアウトにもできますし、この機会にCSSを使っていろいろカスタマイズしてみましょう。

okutani (@okutani_t) のヒトコト

@twitterさんをフォロー

CSSはちょっと覚えれば自分の好きなレイアウトにできて良いですね。周りとデザインがかぶることも防げるので、かんたんな記述だけでも覚えられるようにしてみましょうー。