Blog・SNS

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

2020-10-07

はげにゃん☆

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

この記事の信頼性
ブログ経歴

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

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

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

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

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

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

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

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

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


  • 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%); という記述は、マーカーの高さを意味しています。数字が大きくなるほど、マーカーの太さが薄くなっていきます。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』の設定が終われば、さっそく使ってみましょう!

クラシック版の段落で、以下の画像のように表示されているのを確認します。

では、文章にマーカーをつけてみましょう。

一見、マーカーが付されていませんね。では、投稿後の記事内で表示されているかを確認しましょう。

プレビューでは、ちゃんとマーカーが付されていますね。大成功です!

アフィンガー5には、数多くの便利な機能があります。僕はブログ開設当初は、無料テーマを使用していましたが、アフィンガー5にテーマ変更して、本当によかったと思います。

以下の参考記事もお読みください。

参考記事
ブログ3か月の初心者がアフィンガー5にテーマ変更してみての感想!

続きを見る

参考記事
ブログ初心者卒業?【3か月が経過しての正直な感想・振り返り】

続きを見る

アフィンガー5は、ブログ初心者から、ベテランブロガーまで、必要な機能を満たしてくれる優れたテーマです。

導入されていない方は、一度ご検討してみてはいかがでしょうか?

アフィンガー5の価格・機能を知る

今回は以上になります。最後までお読みいただき、ありがとうございました。

-Blog・SNS