【ワードプレステーマ：アフィンガー５の追加タグ】マーカーにお好みの色を追加するカスタマイズ

はげにゃん☆

アフィンガー５にお好みの新しいマーカー色を追加するカスタマイズについて、解説していきます。

この記事の信頼性

この記事を書いている僕は、アフィンガー５を使用してこのブログを運営している、アラフィフ・ハゲ・ブロガーです。あ、ハゲは関係ないですね。(笑)

今回は、アフィンガー５のマーカーに、お好みの色を追加するカスタマイズについて、解説していきます。

これまでに、アフィンガー５の機能として以下のような記事をご紹介しています。

アフィンガー５の機能についての記事

＜＜WordPressテーマ：アフィンガー５の便利な機能　その２【切替タブ】＞＞

＜＜WordPressテーマ：アフィンガー５の便利な機能　その１【スライドショー】＞＞

アフィンガー５を詳しく知る

デフォルトのマーカーは４色しかないので、あと２，３色欲しいところですね。僕の場合、オレンジと黄緑は特に使いたい色でした。

効果的にマーカーを使用することで、伝えたいこと、重要ポイントを視覚的に表現することができます。記事全体も引き締まった感じになりますね。早速、黄緑マーカーを使ってみました(笑)

それでは始めていきますね。

1 アフィンガー５【マーカー色追加のカスタマイズ方法】

アフィンガー５【マーカー色追加のカスタマイズ方法】

マーカー色追加のカスタマイズの流れは、以下の通りです。

step.1

追加CSSへ、コードを記述

step.2

プラグイン『AddQuicktag』の入手・設定

step.3

追加したマーカーが、記事内で使用できるかの確認

1つずつ解説していきますね。

追加CSSへ、コードを記述

まずは、ワードプレスの管理画面から、『外観』⇒『カスタマイズ』⇒『追加CSS』へいきましょう。

以下のようにコードを記述します。

下のコードをコピーして貼り付けましょう。

 shortcode
.ygmarker,
.ygmarker-s,
.ormarker,
.ormarker-s
{
font-weight:bold;
}
.ygmarker {
background:#66FF33;
}
.ygmarker-s {
background:linear-gradient(transparent 80%,#66FF33 0%);
}
.ormarker {
background:#FF9900;
}
.ormarker-s {
background:linear-gradient(transparent 70%,#FF9900 0%);

ygmarkerは、文字全体にマーカーを付します。ygmarker-sは、アンダーライン（下線部）のように、マーカーを付します。

(transparent 80%,#66FF33 0%); という記述は、マーカーの高さを意味しています。数字が大きくなるほど、マーカーの太さが薄くなっていきます。８０％と７０％の違いを以下にご紹介しておきますね。

●８０％　　はげにゃん☆は、hagenyan blogを運営しています。

●７０％　　はげにゃん☆は、hagenyan blogを運営しています。

８０％のほうが、７０％よりもビミョーに細い線になっていますね。お好みで調整してください。

プラグイン『AddQuicktag』の入手・設定

プラグイン『AddQuicktag』を入手しましょう。

ワードプレス管理画面の『プラグイン』から、『AddQuicktag』を検索し、インストール、有効化しておきます。

以下の設定画面を参考に、必要な項目を記述していきましょう。

僕の場合、ボタン名は、オレンジマーカー（細）、黄緑マーカー（細）と記述しています。

開始タグと終了タグは、以下のコードを使用してください。マーカー色に応じて改変してください。

 shortcode
●オレンジマーカー（細）の開始タグと終了タグ
【開始タグ】<span class="ormarker-s">　　【終了タグ】</span>
 
●黄緑マーカー（細）の開始タグと終了タグ
【開始タグ】<span class="ygmarker-s">　　【終了タグ】</span>

AddQuicktagを表示させたい場所に、上記画像のように、チェックを入れておきます。（すべての項目にチェックを入れても大丈夫です）

『AddQuicktag』は大変便利なプラグインです。しかあし。僕の知る限り、４つ目のタグの登録がど～やらできない様子。１０色くらいマーカーを作ってやろうと思っていたのに(笑)

もしかしたら、４つ以上のタグ登録ができる方法があるかもしれないので、調べておきますね。ご存じの方がいらっしゃれば、お教えください<m(__)m>