WordPressで記事を書く時に使える「参考」や「リンク」や「設定」などのバッヂを色違いで作る

CSS, おすすめ

WordPressで記事を書くときに、ただ文字を並べるだけより、ちょっとしたアクセントになる飾りがあるだけで読みやすくなることがあります。

「見出し」もその一つですし、重要な箇所は赤い枠で囲ったり、太字にしたり、箇条書きにして読みやすくなるように工夫しますよね。

バッヂを使った記事のサンプル

アクセントをつける前

※以下の文章はサンプルのため意味はありません
※ WAF やプラグインのせいで保存できない場合に試してみる価値はあるかも
開く「Luxeritas」->「カスタマイズ」->「その他」

  1. 「□ ウィジェット保存ボタンがクルクル回ってセーブできない場合の対策」にチェックを入れる。
  2. 変更を保存する

リンク FileZillaの準備編vol.1

参照(B) 「Program Files」->「TeraPad」->「TeraPad.exe」

アクセントをつけた後

※以下の文章はサンプルのため意味はありません

※ WAF やプラグインのせいで保存できない場合に試してみる価値はあるかも

開く「Luxeritas」「カスタマイズ」「その他」

  1. 「□ ウィジェット保存ボタンがクルクル回ってセーブできない場合の対策」にチェックを入れる。
  2. 変更を保存する

リンクFileZillaの準備編vol.1

参照(B)「Program Files」「TeraPad」「TeraPad.exe」

どちらが読みやすいか

どちらが読みやすい？となると、やっぱりアクセントをつけた方が読みやすいですよね？
ということで、今回は、3色のバッヂの作り方をご紹介したいと思います。

アクセント用バッヂの作り方

3色のバッヂ

badge

HTMLの書き方

<span class="badge_r">赤色</span>これは赤色のバッヂです
<span class="badge_g">緑色</span>これは緑色のバッヂです
<span class="badge_b">青色</span>これは青色のバッヂです

スタイルの書き方

以下のスタイルを子テーマのCSSに追記します。

/* バッヂ */
.badge_r, .badge_g, .badge_b {
	color: #ffffff;
	font-size: 80%;
	padding: 2px 4px 1px;
	border-radius: 3px;
	text-align: center;
	margin-right: 8px;
	vertical-align: 1px;
}
/* バッヂcollar */
.badge_r{
	background-color: red; /* 好きな赤系の色に替えてください */
}
.badge_g{
	background-color: green; /* 好きな緑系の色に替えてください */
}
.badge_b {
	background-color: blue; /* 好きな青系の色に替えてください */
}
Right Caption
コピーした時は応援して帰ってね♡
6

AddQuicktag に登録する

独自のスタイルは、1クリックで記事に挿入できるようプラグインAddQuicktagに登録しておきましょう。
詳しい使い方は以下の記事を参照してください。

関連プラグインAddQuicktagの使い方

関連プラグインAddQuicktagへの登録方法

あとがき

AMP化されている場合は、AMP用のスタイルにも追記しておきましょう。
スタイルはLuxeritasに合わせて書いていますので他のテーマでは少しレイアウトが変わるかもしれません。

今回の記事を書くにあたり、紹介するためスタイルを整理し直しました。
お役にたてると幸いです。

6

各種設定

Posted by どらみ