ワードプレスにコピペで簡単バッジ(CSS不要)関連、参考、あわせて読みたい、出典、おすすめ、


このサイトは、WordPressテーマ「スワロー」を使っています。

→ WordPressテーマ「スワロー」


あわせて読みたい 参考 LINK サイト

このような ↑ バッジがあると見栄えもいいし、目立って読みやすくなりますよね。

HTMLとCSSを使ってバッジや背景色を出す方法もありますが、

ここでは、簡単にコピペで使えるバッジ
HTML内でスタイルを直接指定する方法)を書いています。

コピペで使えるバッジ  

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>

FFR
文字と色をかえているだけです。

背景色

背景色です。

マーカーのような使い方もできます。言葉を入れて使ってください。

このように、ここの色だけをかえて みましょう。


背景色を ピンク にするには、

これを ↓ コピペ

<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="  "> の中に、背景色や文字色の指定を入れて作ります。

背景色: background-color 

文字色: color 

丸い角: border-radius

太字 : font-weight:bold

例えば 関連記事 のようなバッジを作る時は、

このように ↓

<span style="background-color:#000000;color:#ffffff;">関連記事</span>

なります。

背景色を黒にするには、

このように ↓ 

<span style="background-color:#000000;color:#ffffff;">文字を入れてください。</span>

なります。

バッジを作る方法とおなじように、背景色ができます。

背景色で目立たせたり、楽しいバッジを作ってみましょう。

あわせて読みたい

こんな使い方もできます。↓