最近文章を見やすくするために、ワードプレス・賢威7テンプレート環境で、蛍光ペン風の文字表示ができるように設定しました！

テンプレートやプラグインの関係で解決まで意外と苦戦したので、導入から実際に利用するCSS表記、タグ追加までを紹介します。

文字を完全に塗りつぶす蛍光ペン風マーカー

蛍光ペンといっても、完全に塗りつぶす場合と、下部のみアンダーラインよりかは少し太めに文字の下半分を塗りつぶす場合の2通りあります。

最初に全部塗りつぶす方法を紹介します。

こちらは蛍光ペンといっても背景色を設定してやればOKです。

「蛍光ペンマーカー」と表示するためのコードは以下の通りです。

「<span style=”background: #ffff99;”>蛍光ペンマーカー</span>」

※background部分はbackground-colorの場合有り。

#ffff99の部分はマーカーの色になるので、ピンク、オレンジ、緑、青など市販されているマーカーの色に合わせて好きなコードを利用すればOKです。

参考カラーコード
ピンク系：#ff99cc
オレンジ系：#ffcc99
黄色系：#ffff99
緑系：#ccffcc
水色系：#ccffff
青色系：#99ccff
紫系：#cc99ff

文字の下部のみを塗る蛍光ペン風マーカー

よりリアルに「このように」表示したい方向けの方法です。

先ほどとは異なり、linear-gradient関数を利用して表記することになります。

linear-gradientの説明

色の指定方法の基本部分は以下の通り。

linear-gradient(開始色 グラジエント開始位置, 中間色 グラジエント切替位置, 終了色 グラジエント終了位置)

試しにいくつかlinear-gradientを使って表示してみます。

サンプル：2色切替
　TEST　：linear-gradient(transparent 0%, #ffff99 100%)
　TEST　：linear-gradient(transparent 25%, #ffff99 75%)
　TEST　：linear-gradient(transparent 60%, #ffff99 60%)

サンプル：3色切替
　TEST　：linear-gradient(#ff99cc 0%, #ffff99 50%, #ccffff 100%)
　TEST　：linear-gradient(transparent 15%, #ffff99 50%, transparent 85%)

transparentは透明を表すので、背景に関係なく設定できます。

また先ほどの全部塗りつぶす場合も、transparent 0%、塗りつぶす色 0%と指定すれば同じように利用できます。

3色で設定すれば真ん中のみ色を付けた蛍光ペン風マーカーも設定可能です。

蛍光ペン風マーカーをCSSに設定して呼び出す方法

ここで多くのサイトで紹介されている方法は、作成した設定をCSSに設定して呼び出すというものです。

以下のようなCSSをスタイルシートに追記

.marker_y {
background: linear-gradient(transparent 60%, #ffff99 60%);
}

次いでHTML上に、以下のように記載します。

<span class=”marker_y”> TEST </span>

強調する場合はspanをstrongに置き換えればOKです。

ここまでを終えると、蛍光ペン表示ができるというものです。

TEST / TEST(strong)

こういった紹介があるページを見つけてコピペで実践してみたのですが、自身はテンプレート・プラグインの関係上、うまく設定ができませんでした。
（HTMLでの記述もエラー）

これまで表示できているように、修正して対応できたので、対応手順～設定までを事項で紹介していきます。

賢威7テンプレートへの蛍光ペン風マーカー修正～設定まで

単純なコピペで解決すると思っていたのですが、様々な理由によりうまくいかなかったので、少しコードをいじったりして対応してみました。

初めに試したのは、蛍光ペン表示のコピペで、ビジュアルエディタに直接貼り付けた後にコード解析しようとしたのですが、蛍光ペン部分はうまくいきませんでした・・・

続いてLivedoorブログで同じようにコピペを駆使して、蛍光ペン表示を反映してくれるものがあるかどうか調査すると、見事コピペで蛍光ペン表示がされました。

HTMLタグ表示を編集し、不要な部分を削っていくと、background⇒background-imageと書き換えることで対応可能ということがわかりました。

HTMLを編集する場合は、background-imageにすればOKですが、CSS編集の設定ではまたも反映されなかったので、テンプレートの修正が必要みたいでした。

修正はあきらめ、文字強調と合わせて以下の表記を採用しました。

・開始タグ
<strong style=”background-image: linear-gradient(transparent 60%, #ffff66 60%);”>
・終了タグ
</strong>

毎回コピペするのが面倒なので、これをAddQuicktagに設定して、導入完了になりました。

AddQuicktagの使い方はこちらを参照ください。

AddQuicktagで作業効率up！定型文の挿入が便利に

WordPressで使える便利なプラグインの1つに、定型文（文章）やタグ、広告コードを簡単に挿入できる「AddQuicktag」があります！ WordPressの通常の編集画面に

投稿日：2017-01-09

20分もあればできると思って実践したところ2時間以上かかってしまったので、知識のないなりの苦労することになりました。

蛍光ペン風マーカーまとめ

蛍光ペン風マーカーの導入までと設定方法を紹介しました！

テンプレートやプラグインの関係で苦戦しましたが、コピペもしくは簡単な設定で導入できるので、蛍光ペン風マーカーを導入してより見やすいサイトを作りたい方は導入してみてはいかがでしょうか。

導入環境によって若干設定が異なってくるので、今回紹介した内容を参考に修正して利用してみてください！