WordPress

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

更新日:

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

色は3色まで

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

 

ラインは長すぎないように

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

 

 

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

 

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

 

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

 

蛍光ペンのコード

 

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

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

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

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

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

 

蛍光ペンのコードはこちら

 

<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>

 

 

蛍光ペンの使い方

 

どの色もコードの前半の<span ~>と後半の</span>の間に装飾したい文字を入れればOKです。

 

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

 

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

 

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

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

#92FCFCはカラーコードです。カラーコードはコチラのサイト で確認できます。

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

 

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

 

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

 

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

 

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

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

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

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

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

 

クレヨンのコードはこちら

 

<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>

 

 

 

蛍光ペンと同様、コードの前半の<span ~>と後半の</span>の間に装飾したい文字を入れればOKです。

 

クレヨンのカスタマイズ

 

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

 

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

 

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

 

カラーコードとrgbaはこちらのサイト で変換できます。

 

おじさん
このアンダーラインは、ボックスの影をアンダーラインに見せているので、濃い色は苦手です

 

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

 

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

 

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

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

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

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

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

 

色鉛筆のコードはこちら

 

<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>

 

 

 

蛍光ペンやクレヨン同様、コードの前半の<span ~>と後半の</span>の間に装飾したい文字を入れればOKです。

 

色の変更もクレヨンと同じようにできます
うさぎ

 

 

AddQuicktagで簡単入力

 

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

 

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

 

関連記事
【WordPress】AddQuickTagの設定と使い方!

    他の人のブログを読んでいると、吹き出しや蛍光ペンやカワイイBOXなど、いろんな装飾があってマネしたくなってきませんか?   コードとか調べてやっと使えるようになっ ...

続きを見る

 

動くマーカー

 

このページでも使っている動くマーカーは、Diver など一部のWordPressのテーマでは標準で装備されています

 

その他のテーマでは、「ZEBLINE 」という有料のプラグインで簡単に使うことが出来ます。

 

このブログはZEBLINEを使っています

ZEBLINE 公式サイト

 

まとめ

 

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

 

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

 

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

-WordPress

Copyright© BlogFarming , 2019 All Rights Reserved Powered by AFFINGER5.