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


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

→ WordPressテーマ「スワロー」


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

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

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

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

PVアクセスランキング にほんブログ村

コピペで使えるバッジ  

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>

なります。

 

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

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

 

あわせて読みたい

ワードプレスのコピペで簡単!【表の作成・HTMLタグ】
Vivid Sydney このサイトは、WordPressテーマ「スワロー」を使っています。いました。 → WordPressテーマ「スワロー」 表をHTMLで作ってみます。 コピペで、簡単に表を作ることができますよ~。 table・・・表...

ワードプレスにコピペで簡単バッジ(CSS不要)関連・参考・あわせて読みたい・出典・おすすめ
このサイトは、WordPressテーマ「スワロー」を使っています。いました。 → WordPressテーマ「スワロー」 あわせて読みたい 参考 LINK サイト このような ↑ バッジがあると見栄えもいいし、目立って読みやすくなりますよね。...

スワローで下線・太字・マーカーの【AddQuicktag】設定タグ
このサイトは、WordPressテーマ「スワロー」を使っています。いました。 → WordPressテーマ「スワロー」 スワローで文字をこのように、 ・下線、・赤太字、・文字を小さく、文字を大きく、文字をもっと大きくしたり、マーカー 装飾し...

【コピペで簡単】スワローショートコード(53種類)Swallow
このサイトは、WordPressテーマ「スワロー」を使っています。いました。 → WordPressテーマ「スワロー」 スワローショートコードまとめです。 ショートコードは、HTMLコードを呼び出す短縮コードです。 ブログカード ブログカー...
タイトルとURLをコピーしました