このサイトは、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
文字色: color
丸い角: border-radius
太字 : font-weight:bold
例えば 関連記事 のようなバッジを作る時は、
このように ↓
<span style=”background-color:#000000;color:#ffffff;”>関連記事</span>
なります。
背景色を黒にするには、
このように ↓
<span style=”background-color:#000000;color:#ffffff;”>文字を入れてください。</span>
なります。
バッジを作る方法とおなじように、背景色ができます。
背景色で目立たせたり、楽しいバッジを作ってみましょう。
あわせて読みたい
ワードプレスのコピペで簡単!【表の作成・HTMLタグ】
Vivid Sydney このサイトは、WordPressテーマ「スワロー」を使っています。いました。 → WordPressテーマ「スワロー」 表をHTMLで作ってみます。 コピペで、簡単に表を作ることができますよ~。 table・・・表...
ワードプレスにコピペで簡単バッジ(CSS不要)関連・参考・あわせて読みたい・出典・おすすめ
このサイトは、WordPressテーマ「スワロー」を使っています。いました。 → WordPressテーマ「スワロー」 あわせて読みたい 参考 LINK サイト このような ↑ バッジがあると見栄えもいいし、目立って読みやすくなりますよね。...
スワローで下線・太字・マーカーの【AddQuicktag】設定タグ
このサイトは、WordPressテーマ「スワロー」を使っています。いました。 → WordPressテーマ「スワロー」 スワローで文字をこのように、 ・下線、・赤太字、・文字を小さく、文字を大きく、文字をもっと大きくしたり、マーカー 装飾し...
【コピペで簡単】スワローショートコード(53種類)Swallow
このサイトは、WordPressテーマ「スワロー」を使っています。いました。 → WordPressテーマ「スワロー」 スワローショートコードまとめです。 ショートコードは、HTMLコードを呼び出す短縮コードです。 ブログカード ブログカー...