みなさんこんにちは！あしあとです。
この間、書いている記事の情報収集をしているときに、またまた使ってみたいパーツを発見してしまったんです。
それは、蛍光ペン風のアンダーライン！
ベテランユーザーさんからしてみたら、”そんなのもう、とっくに昔から使ってるけど” なんて思うかもしれませんが、始めて間もない素人にはインパクトがあって、是非使ってみたいパーツだなと思い、早速調査を開始してみました。
Sponsor link
目次
蛍光ラインを引く方法を調べた結果
とりあえず「ワードプレス 蛍光ライン」で検索してみた結果、CSSを設定するらしい。
素人の自分にはこの辺りをいじくるのはちょっと苦手、下手にミスってワードプレスが動かなくなってしまうのが、すごーく嫌なんです。
ということで次に「ワードプレス 蛍光ライン プラグイン」で検索。プラグインなら簡単だしね。
自分的には「様々なタイプのラインが引けるプラグイン！」みたいなものがあるかなあと思っていたのだが、これがまったく見当たらない、やはりどのサイトもCSSを設定する方法が書かれていました。
でも、CSSを設定すればいいということだけではなくてCSSに命令を下すhtmlも必要なんです。
実践してみる
CSSの設定
まず始めにCSSの設定をしてみましょう。
例題 ここに、黄色の蛍光風アンダーラインを引いてみる
ワードプレス投稿ページの「外観」「テーマの編集」からスタイルシート（style.CSS)を選択します。子テーマを使っている人は子テーマのスタイルシートに記載して更新をクリック。
通常なら、この方法で問題ないはずなのだが、自分の使用しているテーマ「AFFINGER4」ではスタイルシートのどの位置に直接記載しても反映されず。
それならと、オリジナルカスタマイザーにある「追加CSS」から記載すると、ちゃんと反映されました。原因は分かりませんが、とりあえずOK！
追記するCSSコード
background:linear-gradient(transparent 60%, #fff799 60%);
}
・linear-gradient
線形のグラデーション関数
・mk_line_y
クラス名。自分の好きなようにつけてOKです。
ちなみに自分は「マーカー ライン 黄色」の略にしました。
・transparent 60%
文字の高さに対しての透明度の割合を示します。この数字が小さいほど線は太く、大きいと細い線になります。０％とした場合は塗りつぶしのラインになります。
・#fff799 60%
ラインの色です。割合の数字を消して色コードのみの場合はグラデーションのラインになります。
自分好みの色に変更したい場合はこちらを参考にしてみて下さい。
メモ
透明度とカラーの数字は同じにしてください。また、ラインの色を濃くし過ぎると記事内のラインが目立ちすぎて、見づらくなってしまうこともありますので、あまり濃い色にはしないようにしたほうが良いでしょう。
HTMLソース
記述するhtml
【strongタグ】
文字を強調させるという意味で、SEO的にも良いことらしい。もし、太文字にしたくない場合は「strong」の部分を「span」に変更して下さい。
【mk_line_y】
クラス名はCSSで記載したものと同じように記述して下さい。少しでも間違っていると表示されません。
Sponsor link
サンプル５色
もし、気に入ったものがあったら自由にコピペして使ってください。
黄色の蛍光ライン
太い黄色の蛍光ラインを引いてみた
CSS
.mk_line_y{ background:linear-gradient(transparent 60%, #fff799 60%); }
HTML
<strong class="mk_line_y">太い黄色の蛍光ラインを引いてみた</strong>
細い黄色の蛍光ラインを引いてみた
CSS
.mk_line80_y{ background:linear-gradient(transparent 80%, #fff799 80%); }
HTML
<strong class="mk_line80_y">細い黄色の蛍光ラインを引いてみた</strong>
赤色の蛍光ライン
太い赤色の蛍光ラインを引いてみた
CSS
.mk_line_r{ background:linear-gradient(transparent 60%, #ff9393 60%); }
HTML
<strong class="mk_line_r">太い赤色の蛍光ラインを引いてみた</strong>
細い赤色の蛍光ラインを引いてみた
CSS
.mk_line80_r{ background:linear-gradient(transparent 80%, #ff9393 80%); }
HTML
<strong class="mk_line80_r">細い赤色の蛍光ラインを引いてみた</strong>
青色の蛍光ライン
太い青色の蛍光ラインを引いてみた
CSS
.mk_line_b{ background:linear-gradient(transparent 60%, #9eceff 60%); }
HTML
<strong class="mk_line_b">太い青色の蛍光ラインを引いてみた</strong>
細い青色の蛍光ラインを引いてみた
CSS
.mk_line80_b{ background:linear-gradient(transparent 80%, #9eceff 80%); }
HTML
<strong class="mk_line80_b">細い青色の蛍光ラインを引いてみた</strong>
緑色の蛍光ライン
太い緑色の蛍光ラインを引いてみた
CSS
.mk_line_g{ background:linear-gradient(transparent 60%, #b2ffb2 60%); }
HTML
<strong class="mk_line_g">太い緑色の蛍光ラインを引いてみた</strong>
細い緑色の蛍光ラインを引いてみた
CSS
.mk_line80_g{ background:linear-gradient(transparent 80%, #b2ffb2 80%); }
HTML
<strong class="mk_line80_g">細い緑色の蛍光ラインを引いてみた</strong>
オレンジ色の蛍光ライン
太いオレンジ色の蛍光ラインを引いてみた
CSS
.mk_line_or{ background:linear-gradient(transparent 60%, #ffce9e 60%); }
HTML
<strong class="mk_line_or">太いオレンジ色の蛍光ラインを引いてみた</strong>
細いオレンジ色の蛍光ラインを引いてみた
CSS
.mk_line80_or{ background:linear-gradient(transparent 80%, #ffce9e 80%); }
HTML
<strong class="mk_line80_or">細いオレンジ色の蛍光ラインを引いてみた</strong>
最後に
いろいろな色のラインがあると、サイトが華やかになりますね。でも、使い過ぎに注意です、くどくなって見づらいページになってしまいます。ほどほどにしておきましょう。
HTMLソースは「ビジュアルモード」ではなく「テキストモード」に記述することをお間違いなく。
このアンダーラインを使いたいけど、毎回HTMLを記述するのはめんどくさいですよね。そういう人のために、１クリックでラインが引ける便利なプラグインがあるんです！
ちょっと今回の記事が長くなってしまったので、そのプラグインについては、また次の機会に紹介したいと思います。
最後まで読んで頂きありがとうございました！