CSSでリンク横に「参考・LINK」バッジをつけてみよう
2017/01/31
こんにちは、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を置くことで、色違いのバッチにしています。
#を使った色の指定方法は「カラーコード」で調べてみてください。お好みの色のバッジを作成することができます。
では、きちんとバッジの形になっているか確認してみましょう。
バッジレイアウトの確認
次のように表示されました。
とってもかんたんに「参考・LINK」バッジをつけることができました！
ちなみに、リンクの右隣についてる矢印はWordPressプラグインを使っています。
外部リンクに対して自動的に矢印アイコンをつけてくれる便利なやつなので、興味のある方は一緒に使ってみてください。
参考[WordPress] 外部リンクに自動でアイコンをつける「External Links」プラグイン | vdeep
まとめ
HTMLのspanタグとCSSを使ってかわいいバッジを作ることができました。
大抵のレイアウトはCSSでおこなうことができますので、すこしCSSを覚えてみて、自分の好きなレイアウトが組めるようになると世界が広がって良いですね。
また、大抵はプラグインを使わずにCSSを使ったほうがサイトの表示速度は速いはずです。オリジナルのレイアウトにもできますし、この機会にCSSを使っていろいろカスタマイズしてみましょう。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
