WordPress|CSSを使わず蛍光ペンやクレヨンや色鉛筆のアンダーラインをひく!

7月 27, 2019

蛍光ペン風の文字装飾で記事を読みやすくしたブログが増えてきました。

テーマに最初から入っているものも増えてきましたが、線が太すぎたり、色が好みでなかったり、という場面も多いのではないでしょうか。

今回は、蛍光ペンの他、クレヨン風や色鉛筆風のアンダーラインで文字装飾する方法を紹介します

紹介する方法はCSSを使わないので、すぐその場で使用できます。

おじさん
わたしはCSSを使ってラインを引いてたんですが、ビジュアルモードで線が反映されず、困った思い出があります
editor-style-CSSにもコードを書き込めば反映されるはずですよ
うさぎ
おじさん
その辺のややこしいことは苦手です

アンダーラインで装飾する注意点

アンダーラインを使用して文字装飾した記事が増えてきましたが、やりすぎるとかえって読みにくくなります。次の点に注意しましょう

色は3色までアンダーラインの色はどれだけでも増やせますが、多すぎると読みにくくなります。多くても3色までがおススメです。

ラインは長すぎないように3行4行と長いアンダーラインは、どこが重要なのか分かりにくくなります。ほどほどの長さにしておきましょう。

蛍光ペンのアンダーライン

蛍光ペンは、WordPressのテーマに最初から設定してあるものが増えてきました。

気に入った色が無いときに追加してみてください。

蛍光ペンのコード

使い方

テキストモードにコードをコピペして、コードの前半の<span ~>と後半の</span>の間の「ここに本文」の部分に文字を入れればOKです。

このコードを毎回入力するのは面倒なので、下で説明するようにプラグイン「AddQuicktag」に登録しておくとすぐに呼び出せます。

ピンクの蛍光ペン風アンダーライン

<span style="background: linear-gradient(transparent 60%,#faa2b1 0%);">ここに本文</span>

ブルーの蛍光ペン風アンダーライン

<span style="background: linear-gradient(transparent 60%,#6ceff4 0%);">ここに本文</span>

グリーンの蛍光ペン風アンダーライン

<span style="background: linear-gradient(transparent 60%,#8cff7d 0%);">ここに本文</span>

イエローの蛍光ペン風アンダーライン

<span style="background: linear-gradient(transparent 60%,#f9ff52 0%);">ここに本文</span>

オレンジの蛍光ペン風アンダーライン

<span style="background: linear-gradient(transparent 60%,#f9b737 0%);">ここに本文</span>

ペンの太さをカスタマイズ

コードの中に 60%, #92FCFC 0%と書かれた部分があります。この部分を変更することで色やマーカーの太さを変更できます。

 60%=ペンの太さを調整できます。0%が一番太く、100%でラインが消えます。

 #92FCFCはカラーコードです。カラーコードは原色大辞典などのサイトで確認できます。

 0%=マーカーにグラデーションを付けられます。グラデーション0%グラデーション100%のように変化します。

蛍光ペンは色を濃くしすぎると読みにくくなるのでほどほどが良いですね
うさぎ

クレヨン風のアンダーライン

クレヨンに見えるかな。ちょっとふんわりした感じのアンダーラインです。

蛍光ペンと同様、テキストモードにコードをコピペして、ここに本文の部分に装飾したい文字を入れればOKです。

ピンクのクレヨン風アンダーライン

<span style="box-shadow: 0px -6px 5px -3px rgba(242,163,202,0.6) inset,0px 8px 4px -2px #fcc2cc;">ここに本文</span>

ブルーのクレヨン風アンダーライン

<span style="box-shadow: 0px -6px 5px -3px rgba(209,251,251,0.6) inset,0px 8px 4px -2px #d1fbfb;">ここに本文</span>

グリーンのクレヨン風アンダーライン

<span style="box-shadow: 0px -6px 5px -3px rgba(225,251,209,0.6) inset,0px 8px 4px -2px #e1fbd1;">ここに本文</span>

イエローのクレヨン風アンダーライン

<span style="box-shadow: 0px -6px 5px -3px rgba(240,250,79,0.6) inset,0px 8px 4px -2px #f0fa4f;">ここに本文</span>

オレンジのクレヨン風アンダーライン

<span style="box-shadow: 0px -6px 5px -3px rgba(247,198,104,0.6) inset,0px 8px 4px -2px #f7c668;">ここに本文</span>

クレヨンのカスタマイズ

色を変更したい時は、たとえばオレンジでしたら rgba(247,198,104,0.6) と カラーコード#f7c668の数字を変更してください。

rgbaは(レッド、グリーン、ブルー、透明度)の順になっています。

透明度は0~1.0の数字を入れ、0は透明、1は不透明になります(初期値は0.6)。透明度を使わなくても良ければ、どちらも#f7c668を入れてもOKです。

カラーコードとrgbaは原色大辞典などのサイトで確認できます。

おじさん
このアンダーラインは、濃い色は苦手です

色鉛筆風のアンダーライン

クレヨンを細くしたアンダーラインです。細いぶん、クレヨンよりも濃い色が見やすいかも知れません。

蛍光ペンやクレヨン同様、ここに本文の部分に装飾したい文字を入れればOKです。

ピンクの色鉛筆風アンダーライン

<span style="box-shadow: 0px -6px 4px -4px rgba(254,182,195,0.8) inset,0px 7px 5px -8px #feb6c3;">ここに本文</span>

ブルーの色鉛筆風アンダーライン

<span style="box-shadow: 0px -6px 5px -3px rgba(158,251,251,0.8) inset,0px 7px 5px -8px #9efbfb;">ここに本文</span>

グリーンの色鉛筆風アンダーライン

<span style="box-shadow: 0px -6px 5px -3px rgba(117,249,154,0.8) inset,0px 7px 5px -8px #75f99a;">ここに本文</span>

イエローの色鉛筆風アンダーライン

<span style="box-shadow: 0px -6px 5px -3px rgba(240,250,79,0.8) inset,0px 7px 5px -8px #f0fa4f;">ここに本文</span>

オレンジの色鉛筆風アンダーライン

<span style="box-shadow: 0px -6px 5px -3px rgba(247,198,104,0.8) inset,0px 7px 5px -8px #f7c668;">ここに本文</span>
クレヨンと同じように色の変更もできます
うさぎ

AddQuicktagで簡単入力

ここに紹介したコードを記事作成のたびにコピペするのは時間が勿体ないです。

必要なアンダーラインのコードの前半部分<span style="~>と後半部分</span>をそれぞれプラグイン「AddQuicktag」に登録しておけば、すぐに呼び出すことが出来ます。

まとめ

今回は、CSSを使わずに蛍光ペンやクレヨン風の文字装飾の方法を紹介しました。

CSSを使わないとコードが長くなるので、CSSを覚えたら徐々に切り替えていくと良いと思います。

今回の記事で分かりにくいところがありましたら、ご質問をお待ちしております!

プラグインの記事一覧