広告 WordPress

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

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

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

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

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

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

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

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

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

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

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

参考 WEB色見本 原色大辞典 - HTMLカラーコード

ラインの幅サンプル

太い蛍光ペン

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%);
}

蛍光ペン付き強調文字の使い方

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

ビジュアルエディタの場合

強調文字を蛍光ペン風

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

テキストエディタの場合

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

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

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

参考サイト

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

【CSS】コピペでOK！強調文字を蛍光ペン風にする方法

まとめ

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

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

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

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

-WordPress