vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

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

      2017/01/31

LINEで送る
Pocket

こんにちは、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;
  border-radius: 6px;
  box-shadow: 0 0 3px #ddd;
  white-space: nowrap;
}

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

.sankou-badge {
  background-color: #04B404; /*緑*/
}

CSSの解説

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

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

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

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

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

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

バッジレイアウトの確認

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

badge-css

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

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

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

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

まとめ

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

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

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

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

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

 - CSS

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

「Animate.css + wow.js」でWebサイトにアニメーションをつけてみよう

こんにちは、okutani(@okutani_t)です。みなさんはWebサイトに …

hタグ下に斜めのストライプボーダーを設置&ボーダー画像の作り方解説

デザインセンスが皆無、見よう見まねでWebデザインやってる僕okutani(@o …

ポチレバをCSSで装飾してみた

こんにちは、okutaniです。前回「カエレバをCSSで装飾してみた | vde …

カエレバをCSSで装飾してみた

こんにちは、okutani(@okutani_t)です。Amazonや楽天の商品 …

[WordPress]記事内で使える『連載記事一覧』機能をPHPで作ってみた

こんにちは、okutani(@okutani_t)です。ブログを書いていると、連 …

[CSS] リンクの頭に参考バッヂ付けたらレイアウト崩れた。white-spaceで解決

CSSで可愛いレイアウトが出来るとうれしくなりますよね。Webデザインのお勉強中 …

CSSで“蛍光ペン”っぽく文字にマーカー線を引く方法

こんにちは、okutani(@okutani_t)です。Twitterでこんな質 …

【Win・Mac】Sassを導入&初めてScssを使ってみる

こんにちは、okutani(@okutani_t)です。今まで、Webコーディン …

[WordPress] 記事下の一言コメントをCSSで装飾してみた

こんにちは、okutani(@okutani_t)です。以前、WordPress …

WordPress記事内の画像に影をつける方法

こんにちは、okutani(@okutani_t)です。WordPressサイト …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。