WordPress

【WordPress】ユーザー必見!ブログ記事に蛍光ペン風のアンダーラインを引く方法

更新日:

蛍光ペン

みなさんこんにちは!あしあとです。

この間、書いている記事の情報収集をしているときに、またまた使ってみたいパーツを発見してしまったんです。

それは、蛍光ペン風のアンダーライン!

ベテランユーザーさんからしてみたら、”そんなのもう、とっくに昔から使ってるけど” なんて思うかもしれませんが、始めて間もない素人にはインパクトがあって、是非使ってみたいパーツだなと思い、早速調査を開始してみました。

Sponsor link

蛍光ラインを引く方法を調べた結果

とりあえず「ワードプレス 蛍光ライン」で検索してみた結果、CSSを設定するらしい。

素人の自分にはこの辺りをいじくるのはちょっと苦手、下手にミスってワードプレスが動かなくなってしまうのが、すごーく嫌なんです。

ということで次に「ワードプレス 蛍光ライン プラグイン」で検索。プラグインなら簡単だしね。
自分的には「様々なタイプのラインが引けるプラグイン!」みたいなものがあるかなあと思っていたのだが、これがまったく見当たらない、やはりどのサイトもCSSを設定する方法が書かれていました。

でも、CSSを設定すればいいということだけではなくてCSSに命令を下すhtmlも必要なんです。

実践してみる

CSSの設定

まず始めにCSSの設定をしてみましょう。

例題 ここに、黄色の蛍光風アンダーラインを引いてみる

ワードプレス投稿ページの「外観」「テーマの編集」からスタイルシート(style.CSS)を選択します。子テーマを使っている人は子テーマのスタイルシートに記載して更新をクリック。

通常なら、この方法で問題ないはずなのだが、自分の使用しているテーマ「AFFINGER4」ではスタイルシートのどの位置に直接記載しても反映されず。

それならと、オリジナルカスタマイザーにある「追加CSS」から記載すると、ちゃんと反映されました。原因は分かりませんが、とりあえずOK!

追記するCSSコード

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

・linear-gradient
線形のグラデーション関数

・mk_line_y
クラス名。自分の好きなようにつけてOKです。
ちなみに自分は「マーカー ライン 黄色」の略にしました。

・transparent 60%
文字の高さに対しての透明度の割合を示します。この数字が小さいほど線は太く、大きいと細い線になります。0%とした場合は塗りつぶしのラインになります。

・#fff799 60%
ラインの色です。割合の数字を消して色コードのみの場合はグラデーションのラインになります。
自分好みの色に変更したい場合はこちらを参考にしてみて下さい。

WEB色見本 原色大辞典

メモ

透明度とカラーの数字は同じにしてください。また、ラインの色を濃くし過ぎると記事内のラインが目立ちすぎて、見づらくなってしまうこともありますので、あまり濃い色にはしないようにしたほうが良いでしょう。

HTMLソース

記述するhtml

<strong class="mk_line_y">黄色の蛍光マーカーを引いてみた。</strong>

【strongタグ】
文字を強調させるという意味で、SEO的にも良いことらしい。もし、太文字にしたくない場合は「strong」の部分を「span」に変更して下さい。

【mk_line_y】
クラス名はCSSで記載したものと同じように記述して下さい。少しでも間違っていると表示されません。

Sponsor link

サンプル5色

もし、気に入ったものがあったら自由にコピペして使ってください。

黄色の蛍光ライン

太い黄色の蛍光ラインを引いてみた

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を記述するのはめんどくさいですよね。そういう人のために、1クリックでラインが引ける便利なプラグインがあるんです!

ちょっと今回の記事が長くなってしまったので、そのプラグインについては、また次の機会に紹介したいと思います。

最後まで読んで頂きありがとうございました!

Sponsor link

-WordPress
-

Copyright© あしあと , 2019 All Rights Reserved.