LION MEDIAにCSSで「参考-LINK-キーボードキー」のバッジ（ラベル）を作成

LION MEDIAのテーマには、リンク前に「参考」や「LINK」「キーボードのキー」のバッチ（ラベル）がありません。

そこで、LION MEDIAにCSSでカスタマイズを行い、リンクの前に「参考」「LINK」のバッジをつけたり、パソコンの操作説明として「キーボードのキー」を表現するためのCSSを紹介します。

[adcode]

バッジの見本（完成バッジ）

今回は、以下のバッジを作るCSSを紹介します。

参考　参考　参考　参考　参考　参考　参考　参考

LINK　LINK　LINK　LINK　LINK　LINK　LINK　LINK

HTMLとCSSの記述

HTML

<span class="batch batch-red">参考</span>
<span class="batch batch-blue">参考</span>
<span class="batch batch-purple">参考</span>
<span class="batch batch-pink">参考</span>
<span class="batch batch-green">参考</span>
<span class="batch batch-yellow">参考</span>
<span class="batch batch-grey">参考</span>
<span class="batch batch-orange">参考</span>

<span class="batch batch-red2">参考</span>
<span class="batch batch-blue2">参考</span>
<span class="batch batch-purple2">参考</span>
<span class="batch batch-pink2">参考</span>
<span class="batch batch-green2">参考</span>
<span class="batch batch-yellow2">参考</span>
<span class="batch batch-grey2">参考</span>
<span class="batch batch-orange2">参考</span>

CSS

.batch{
  color: #fff;
  background-color: #fc7a22;
  padding: 3px 10px 3px 10px;
  border-radius: 3px;
  font-size: 14px;
}

.batch-red{background-color: #f44336;}
.batch-blue{background-color: #2196F3;}
.batch-purple{background-color: #9C27B0;}
.batch-pink{background-color: #e91e63;}
.batch-green{background-color: #4CAF50;}
.batch-yellow{background-color: #FFEB3B;}
.batch-brown{background-color: #795548;}
.batch-grey{background-color: #9E9E9E;}
.batch-orange{background-color: #fc7a22;}

.batch-red2{background-color: #d86c6c;}
.batch-blue2{background-color: #6992d1;}
.batch-purple2{background-color: #d86ccf;}
.batch-pink2{background-color: #da6d9e;}
.batch-green2{background-color: #7bd36a;}
.batch-yellow2{background-color: #d0cc68;}
.batch-brown2{background-color: #795548;}
.batch-grey2{background-color: #d2d2d2;}
.batch-orange2{background-color: #d8a96c;}

CSSをカスタマイズ

自分の好みに文字色や文字の大きさ、枠のサイズなどCSSをカスタマイズしてみてください。

文字色をカスタマイズ

文字の色を変更するには以下のようにCSSを変更します。

color: #fff;

#FFFを好きな色に変更してください。

　好きな色のRGBを調べる方法

参考　色見本

文字サイズをカスタマイズ

文字サイズを変更するには以下のCSSを変更します。

font-size: 14px;

文字を囲む枠の大きさをカスタマイズ

枠の大きさを変更するには、以下のCSSを変更します。

padding: 3px 10px 3px 10px;

padding: 2px 15px 4px 10px;
このように指定した場合は
順番に上、右、下、左で指定したことになります。
上のpadding=2px、右のpadding=15px、下のpadding=4px、左のpadding=10px

角を丸くする

バッジの角を丸くするには、以下のCSSを変更します。

border-radius: 3px;

バッジの色を追加する

バッジの色（種類）を追加するには、以下のCSSを追加します。

.batch-red{background-color: #f44336;}

この1行を下に追加するだけです。

.batch-red

「red」の部分は、好きな名前にしてください。

　黒色のバッジを追加する場合

.batch-black{background-color: #000000;}

赤字部分を変更して追加していきます。

　ブラックのバッジを追加した例

.batch{
  color: #fff;
  background-color: #fc7a22;
  padding: 3px 10px 3px 10px;
  border-radius: 3px;
  font-size: 14px;
}

.batch-red{background-color: #f44336;}
.batch-blue{background-color: #2196F3;}
.batch-purple{background-color: #9C27B0;}
.batch-pink{background-color: #e91e63;}
.batch-green{background-color: #4CAF50;}
.batch-yellow{background-color: #FFEB3B;}
.batch-brown{background-color: #795548;}
.batch-grey{background-color: #9E9E9E;}
.batch-orange{background-color: #fc7a22;}

.batch-red2{background-color: #d86c6c;}
.batch-blue2{background-color: #6992d1;}
.batch-purple2{background-color: #d86ccf;}
.batch-pink2{background-color: #da6d9e;}
.batch-green2{background-color: #7bd36a;}
.batch-yellow2{background-color: #d0cc68;}
.batch-brown2{background-color: #795548;}
.batch-grey2{background-color: #d2d2d2;}
.batch-orange2{background-color: #d8a96c;}
.batch-black{background-color: #000000;}

最後の行にブラックのバッジを追加しました。

[adcode]