強調文字を蛍光ペンでラインを引いたような装飾に変更してみた

2016年10月22日

テキスト中心のブログ記事を書いていると、文字に装飾を施すことで文章がより見やすくなったりしますよね。

例えば、太字にしてみたり、大きさを変えてみたり、色を変えてみたり。

もう少し目を引くデザインを取り入れたいと思い、強調したいときに用いるタグを少しカスタマイズして、太字で蛍光マーカー風の装飾がされるように変更しました。

ちょっとオシャレな感じになったでしょうか。

スタイルシート（style.css）にコードを追記

WordPress管理画面で「外観」⇒「テーマの編集」⇒子テーマ「style.css」の編集画面へ

/* 強調文字を蛍光ペン風 */
strong {
    background: linear-gradient(transparent 60%, #ffccff 60%);
}

上記のコードを追記し、「ファイルを更新」をクリック。

このコードを利用すると、このようなピンクの蛍光ペンでラインを引いたようになります。

「60%」「#ffccff」の箇所を変更すると、ラインの幅や色が調整できるので、お好みに合わせて変更してください。

太い蛍光ペン

strong {
    background: linear-gradient(transparent 0%, #ffccff 0%);
}

細い蛍光ペン

strong {
    background: linear-gradient(transparent 80%, #ffccff 80%);
}

黄色の蛍光ペン

strong {
    background: linear-gradient(transparent 60%, #ffff66 60%);
}

緑色の蛍光ペン

strong {
    background: linear-gradient(transparent 60%, #66ff66 60%);
}

青色の蛍光ペン

strong {
    background: linear-gradient(transparent 60%, #99ccff 60%);
}

スタイルシートに追記が済んだら、あとは普段通りにタグを使うだけです。

強調したい箇所を選択し、「B」ボタンを押せばタグが適用されます。

テキストエディタの場合も同様で、

文章中で<strong>ここを強調したいんだ！！</strong>

強調したい箇所をタグで囲むだけです。

こちらの記事を参考にさせていただきました。ありがとうございます。

このカスタマイズを行うことで、過去記事で使用したタグにも蛍光ペン風のラインが適用されています。

頻繁に使うと、どこが大事な箇所なのか分かりにくくなってしまいます。記事内で伝えたい重要なポイントに絞って強調する方がいいでしょう。

蛍光ペンでラインがいっぱい引かれた参考書って、すごく見づらいですよね。

使い方には十分気を付けましょう。