
アフィンガー5にお好みの新しいマーカー色を追加するカスタマイズについて、解説していきます。
.jpg)
この記事を書いている僕は、アフィンガー5を使用してこのブログを運営している、アラフィフ・ハゲ・ブロガーです。あ、ハゲは関係ないですね。(笑)
今回は、アフィンガー5のマーカーに、お好みの色を追加するカスタマイズについて、解説していきます。
これまでに、アフィンガー5の機能として以下のような記事をご紹介しています。
アフィンガー5の機能についての記事
デフォルトのマーカーは4色しかないので、あと2,3色欲しいところですね。僕の場合、オレンジと黄緑は特に使いたい色でした。
効果的にマーカーを使用することで、伝えたいこと、重要ポイントを視覚的に表現することができます。記事全体も引き締まった感じになりますね。早速、黄緑マーカーを使ってみました(笑)
それでは始めていきますね。
もくじ
アフィンガー5【マーカー色追加のカスタマイズ方法】

マーカー色追加のカスタマイズの流れは、以下の通りです。
step.1
追加CSSへ、コードを記述
step.2
プラグイン『AddQuicktag』の入手・設定
step.3
追加したマーカーが、記事内で使用できるかの確認
1つずつ解説していきますね。
追加CSSへ、コードを記述
まずは、ワードプレスの管理画面から、『外観』⇒『カスタマイズ』⇒『追加CSS』へいきましょう。
以下のようにコードを記述します。
.png)
下のコードをコピーして貼り付けましょう。
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%); という記述は、マーカーの高さを意味しています。数字が大きくなるほど、マーカーの太さが薄くなっていきます。80%と70%の違いを以下にご紹介しておきますね。
●80% はげにゃん☆は、hagenyan blogを運営しています。
●70% はげにゃん☆は、hagenyan blogを運営しています。
80%のほうが、70%よりもビミョーに細い線になっていますね。お好みで調整してください。
プラグイン『AddQuicktag』の入手・設定
プラグイン『AddQuicktag』を入手しましょう。
ワードプレス管理画面の『プラグイン』から、『AddQuicktag』を検索し、インストール、有効化しておきます。
以下の設定画面を参考に、必要な項目を記述していきましょう。

僕の場合、ボタン名は、オレンジマーカー(細)、黄緑マーカー(細)と記述しています。
開始タグと終了タグは、以下のコードを使用してください。マーカー色に応じて改変してください。
shortcode
●オレンジマーカー(細)の開始タグと終了タグ
【開始タグ】<span class="ormarker-s"> 【終了タグ】</span>
●黄緑マーカー(細)の開始タグと終了タグ
【開始タグ】<span class="ygmarker-s"> 【終了タグ】</span>
AddQuicktagを表示させたい場所に、上記画像のように、チェックを入れておきます。(すべての項目にチェックを入れても大丈夫です)
『AddQuicktag』は大変便利なプラグインです。しかあし。僕の知る限り、4つ目のタグの登録がど~やらできない様子。10色くらいマーカーを作ってやろうと思っていたのに(笑)
もしかしたら、4つ以上のタグ登録ができる方法があるかもしれないので、調べておきますね。ご存じの方がいらっしゃれば、お教えください<m(__)m>
追加したマーカーが、記事内で使用できるかの確認
追加CSSへのコード記述、『AddQuicktag』の設定が終われば、さっそく使ってみましょう!
クラシック版の段落で、以下の画像のように表示されているのを確認します。

では、文章にマーカーをつけてみましょう。
)-600x209.png)
一見、マーカーが付されていませんね。では、投稿後の記事内で表示されているかを確認しましょう。

プレビューでは、ちゃんとマーカーが付されていますね。大成功です!
アフィンガー5には、数多くの便利な機能があります。僕はブログ開設当初は、無料テーマを使用していましたが、アフィンガー5にテーマ変更して、本当によかったと思います。
以下の参考記事もお読みください。
-
-
ブログ3か月の初心者がアフィンガー5にテーマ変更してみての感想!
続きを見る
-
-
ブログ初心者卒業?【3か月が経過しての正直な感想・振り返り】
続きを見る
アフィンガー5は、ブログ初心者から、ベテランブロガーまで、必要な機能を満たしてくれる優れたテーマです。
導入されていない方は、一度ご検討してみてはいかがでしょうか?
今回は以上になります。最後までお読みいただき、ありがとうございました。