1. 🏠ホーム
  2. CSS
  3. ブログ運営
  4. CSSで文頭にワンポイントの「バッジ」を付けて読者の目を止めろ！

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: #90d581;
}
.badge-bl {
    background-color: #4f9df4;
}
.badge-rd {
    background-color: #f88080;
}

解説

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

各プロパティの初期値

【文字色】color: #fff;

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

【バッジの大きさ（縦×横）】padding: 2px 6px;

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

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

【バッジの色】background-color: #f88080;

サイズを変えてみた例（小）


Safe Out!
font-size: 13px;
padding: 1px 4px;

サイズを変えてみた例（大）


Safe Out!
font-size: 18px;
padding: 2px 8px;

色を変えてみた例


おすすめ
background-color: #f39800;

角を丸くしてみた例


掲載例
border-radius: 16px;

以上、特に強くアピールしたい一文の文頭に挿入して、確実に読者の目を止めましょう！

QooQ