ワードプレスで使うことができる蛍光ペン

受験勉強の時にしっかり覚えたいところに蛍光ペンを使った記憶があると思います。強調されることで他と違うことがわかり注目します。web上でキーワードを強調したい時にも使うことができるんです。特にネットで記事を書くために使われるワードプレスでも同じような装飾を利用することができます。マーカーのように簡単に装飾することはできませんが、HMLとCSSを編集することでかなり近い表現まで近づけることができます。強調文字や色付き文字では見慣れてしまって注目されなくなっていますので、このような装飾を使うことできれいなサイトにすることができます。

ワードプレスの中でHTMLとCSSで蛍光ペンのような装飾効果を使いたい場合には、「外観」の「テーマの編集」でstyle.cssに記述して、使いたい時にクラス名を指定します。クラスを指定する時にはbackground-colorによってつけたい色を指定します。色の指定は#の後に6桁の16進数で行います。ピンク色なら#ff99cc、黄色なら#ffff99といった感じです。この値は2桁ごとに赤、緑、青を示しているのでそれぞれにffか99かccを組み合わせていくとキレイな発色になります。あまりにきつい色では文字が潰れてしまって強調はできても読みにくくなってしまうため、注意して設定します。そしてそのクラスを呼び出すことで、文字の背景に色をつけることが可能です。スタイルを呼び出す時にはspanタグを使います。指定された文字に色のついたラインがつきます。もし装飾した文字を太文字にしたいならstrongタグを使います。

そのまま呼び出しただけだとラインの色は文字の高さと同じです。もっと凝りたい場合には、線の細さや薄さを変更することができます。線を細くしたい場合にはlinear-gradientを使います。割合を指定することで線の細さを変えることができるので、下線のように下だけ色がつきます。細いため文字を邪魔しないところが特徴です。0%だと全体、50%だと下半分が色付きになります。あとtransparentを使うことで色の濃さを設定することができます。透過率を設定するものでこれでより蛍光ペンに近い装飾になります。これらの設定を変えることできれいなwebページを作ることができます。

ワードプレスで蛍光ペンを使うにはAddQuicktagと言うプラグインを使うと簡単です。