CSSで文頭にワンポイントの「バッジ」を付けて読者の目を止めろ!

バッジ

さて、今日は「これって、どうやってるんだろう??」シリーズの第三弾として、特に強く注目して欲しい一文の文頭に、「バッジ」を付けてアピールする方法を紹介したいと思います。

↓こういうヤツですね。
参照 明治維新(Wikipedia)
関連 CSSで蛍光ペン風の下線(アンダーライン)を引く方法
注意 上記の画像は所有者の許可を得て撮影しています。

HTML文とCSS

HTML文とCSSは以下の通りになります。

HTML
<span class="badge-gr">参照</span>
<span class="badge-bl">関連</span>
<span class="badge-rd">注意</span>

CSS
.badge-gr, .badge-bl, .badge-rd {
    display: inline-block;
    color: #fff;
    margin-bottom: 5px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: inherit;
}
.badge-gr {
    background-color: #008000;
}
.badge-bl {
    background-color: #0000ff;
}
.badge-rd {
    background-color: #f00000;
}

解説

ご自分のブログのデザインに合わせてバッジの色やサイズをカスタムする場合は、以下の各プロパティの値を調整して下さい。

文字色・・・color: #fff;

バッジ下の余白・・・margin-bottom: 5px;

バッジの大きさ(縦×横)・・・padding: 2px 6px;

バッジの角の丸み・・・border-radius: 4px;

文字の大きさ・・・font-size: inherit;

バッジの色・・・background-color: #008000;

0 Comments