LION MEDIAにCSSで参考-LINK-キーボードキーのバッジを作成

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

 

CSS

 

CSSをカスタマイズ

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

 

文字色をカスタマイズ

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

color: #fff;

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

 

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

LINK 色見本

 

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

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

font-size: 14px;

参考 LION MEDIAの文字サイズを変更する方法-CSSでカスタマイズ

 

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

枠の大きさを変更するには、以下の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;} 

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

 

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

最後の行(黄色マーカー部)にブラックのバッジを追加しました。

 

CSSは子テーマに追加する

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

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

 

 子テーマのインストール

 

 子テーマの活用

 

 その他 LION MEDIAのカスタマイズ

 

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

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

 

 毎回HTMLを入力する場合

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

 

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

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

 

参考 【WordPress】プラグインAddQuicktagのインストール方法と使い方(タグをボタン化)

 

まとめ

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

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

 

この記事が気に入ったら
いいね ! しよう

LION MEDIAカテゴリの最新記事