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

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

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

バッジの見本(完成バッジ)

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

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

LINK LINK LINK LINK LINK LINK LINK LINK

おすすめ おすすめ

Ctrl + F5

Ctrl + Shift + F5

Ctrl + C(Macの場合  + C )

 

色や大きさは好きに変更できますので、これから紹介するCSSを自分好みにアレンジしてみてください。

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;}

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

CSSは子テーマに追加する

僕のブログでは、CSSをカスタマイズする場合は、LION MEDIAの子テーマに追加することを推奨しています。

テーマのスタイルシートを直接カスタマイズすると、テーマがバージョンアップされた場合、今までカスタマイズしてきたCSSが全て消えてしまいます。
そのため、子テーマにCSSを追加してテーマがバージョンアップされても今までのCSSを引き継いでくれるうようにします。

子テーマをインストールする方法や、子テーマにCSSを追加する方法は以下の記事で書いていますので、参考にしてください。

参考 LION MEDIAに子テーマをインストールする方法!

参考 LION MEDIAカスタマイズ! 子テーマの活用

バッジのHTMLを簡単に入力する方法

バッジのCSSをカスタマイズしたのはいいけど、毎回HTMLを入力するのは大変です。

 

毎回HTMLを入力する場合

<span class=”batch batch-red”>参考</span>

 

このHTMLをバッジをつける度に入力するのは大変ですよね?

そこで、プラグイン(AddQuicktag(アドクイックタグ))をインストールすることで、ワンクリックで好きなバッジを出力することができます。

AddQuicktag(アドクイックタグ)の使い方は後日、記事にします。

まとめ

今回は、LION MEDIAにバッジ(ラベル)のボタンを追加する方法をご紹介しました。

何かとバッジは使う機会が多いと思うので、子テーマにCSSを追加しておくのもいいと思います。

LION MEDIAにCSSで参考-LINK-キーボードキーのバッジを作成
フォローお願いします