このサイトは、WordPressテーマ「スワロー」を使っています。
→ WordPressテーマ「スワロー」
あわせて読みたい 参考 LINK サイト
このような ↑ バッジがあると見栄えもいいし、目立って読みやすくなりますよね。
HTMLとCSSを使ってバッジや背景色を出す方法もありますが、
ここでは、簡単にコピペで使えるバッジ
（HTML内でスタイルを直接指定する方法）を書いています。
Contents
コピペで使えるバッジ
HTML内でコピペするだけで使えるバッジです。
関連記事 ←関連記事のバッジをだすには、これを ↓ コピペ
<span style="background-color:#000000;border-radius: 6px;color:#ffffff;font-weight:bold;padding: 3px 6px;">関連記事</span>
あわせて読みたい ←あわせて読みたいのバッジをだすには、これを ↓ コピペ
<span style="background-color:#ffa500;border-radius: 6px;color:#ffffff;font-weight:bold;padding: 3px 6px;">あわせて読みたい</span>
LINK ←LINKのバッジをだすには、これを ↓ コピペ
<span style="background-color:#58ACFA;border-radius: 6px;color:#ffffff;font-weight:bold;padding: 3px 6px;">LINK</span>
参考 ←参考のバッジをだすには、これを ↓ コピペ
<span style="background-color:#008080;border-radius: 6px;color:#ffffff;font-weight:bold;padding: 3px 6px;">参考</span>
出典 ←出典のバッジをだすには、これを ↓ コピペ
<span style="background-color:#4169e1;border-radius: 6px;color:#ffffff;font-weight:bold;padding: 3px 6px;">出典</span>
参照 ←参照のバッジをだすには、これを ↓ コピペ
<span style="background-color:#ff4500;border-radius: 6px;color:#ffffff;font-weight:bold;padding: 3px 6px;">参照</span>
サイト ←サイトのバッジをだすには、これを ↓ コピペ
<span style="background-color:#ff1493;border-radius: 6px;color:#ffffff;font-weight:bold;padding: 3px 6px;">サイト</span>
公式 ←公式のバッジをだすには、これを ↓ コピペ
<span style="background-color:#9400d3;border-radius: 6px;color:#ffffff;font-weight:bold;padding: 3px 6px;">公式</span>
オススメ ←オススメのバッジをだすには、これを ↓ コピペ
<span style="background-color:#008000;border-radius: 6px;color:#ffffff;font-weight:bold;padding: 3px 6px;">オススメ</span>
ピックアップ ←ピックアップのバッジをだすには、これを ↓ コピペ
<span style="background-color:#ffd700;border-radius: 6px;color:#ffffff;font-weight:bold;padding: 3px 6px;">ピックアップ</span>
PR ←PRのバッジをだすには、これを ↓ コピペ
<span style="background-color:#a9a9a9;border-radius: 6px;color:#ffffff;font-weight:bold;padding: 3px 6px;">PR</span>
背景色
背景色です。
マーカーのような使い方もできます。言葉を入れて使ってください。
このように、ここの色だけをかえて みましょう。背景色を ピンク にするには、
これを ↓ コピペ
<span style="background-color:#ffccff;">ピンク（文字を入れてください。）</span>
背景色を むらさき にするには、これを ↓ コピペ
<span style="background-color:#e2c6ff;">むらさき（文字を入れてください。）</span>
背景色を あお にするには、これを ↓ コピペ
<span style="background-color:#cce5ff;">あお（文字を入れてください。）</span>
背景色を グレー にするには、これを ↓ コピペ
<span style="background-color:#fafafa;">グレー（文字を入れてください。）</span>
背景色を きいろ にするには、これを ↓ コピペ
<span style="background-color:#ffffc6;">きいろ（文字を入れてください。）</span>
背景色を そらいろ にするには、これを ↓ コピペ
<span style="background-color:#e0ffff;">そらいろ（文字を入れてください。）</span>
背景色をみどり にするには、これを ↓ コピペ
<span style="background-color:#dbffb7;">みどり（文字を入れてください。）</span>
バッジの作り方
このようなバッジ→ 関連記事だけでなく、
マーカーのように背景色→ 背景色をつけたい時 にも使えます。
<span style=" "> の中に、背景色や文字色の指定を入れて作ります。
文字色： color
丸い角： border-radius
太字 ： font-weight:bold
このように ↓
<span style="background-color:#000000;color:#ffffff;">関連記事</span>
なります。
背景色を黒にするには、このように ↓
<span style="background-color:#000000;color:#ffffff;">文字を入れてください。</span>
なります。
バッジを作る方法とおなじように、背景色ができます。
背景色で目立たせたり、楽しいバッジを作ってみましょう。
あわせて読みたいこんな使い方もできます。↓
