Life Jam

専門知識ゼロの初心者がWordPressに挑戦中

WordPress

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

2016/10/26

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

ラインの幅サンプル

太い蛍光ペン


細い蛍光ペン

ラインの色サンプル

黄色の蛍光ペン


緑色の蛍光ペン


青色の蛍光ペン

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

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

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

強調文字を蛍光ペン風

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

テキストエディタの場合

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

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

参考サイト

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

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

まとめ

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

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

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

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

-WordPress

スポンサーリンク