この記事が気に入ったらシェアしてください

強調したい文字を蛍光ペンで引いたようなデザインにする方法

この記事が気に入ったらシェアしてください

文字の強調に蛍光ペンのようなデザインを使う方法

皆様、ご自身のサイトで強調したい文字はどのように表現していますか?

太字にする、赤字にする、大きくする等々、表現方法は様々かと思います。

私のサイトでは、蛍光ペンを引いたようなデザインで文字を強調しています。

もし、強調文字をどうしようとお考えの方は、このデザインも案の1つに入れてみてください。

スポンサーリンク
広告

強調したい文字を蛍光ペンで引いたようなデザインにする

強調したい文字を蛍光ペン引いたようなデザインにすることは簡単です。

以下のコードをご自身でお使いのcssにコピペしてください。Simplicityをお使いの方は、「style.css」にコピペで貼付けてください。初心者の私でも簡単に出来たので、是非試してみてください。

赤色の蛍光ペン

こちらは赤色の蛍光ペンです。

strong {
    background: linear-gradient(transparent 60%, rgb(255, 170, 170) 60%);
}

赤色の太い蛍光ペン

もっと太い蛍光ペンがいい人は%の割合を下げてください。
こちらは赤色の太い蛍光ペンです。

strong {
    background: linear-gradient(transparent 40%, rgb(255, 170, 170) 40%);
}

ピンク色の蛍光ペン

次は違う色のデザインです。
ピンク色はこんな感じです。

strong {
    background: linear-gradient(transparent 60%, rgb(255, 0, 255) 60%);
}

緑色の蛍光ペン

緑色はこんな感じです。

strong {
    background: linear-gradient(transparent 60%, rgb(0, 255, 0) 60%);
}

水色の蛍光ペン

水色はこんな感じです。

strong {
    background: linear-gradient(transparent 60%, rgb(0, 0, 255) 60%);
}

さらに色を変えたい場合はこちらのサイトを参考にして、rgbの箇所を変えてください。

これらの設定をcssに入れれば、あとはWordPressを投稿する画面で太字である「B」ボタンを押すだけで少しおしゃれな蛍光ペン文字ができます。

WordPress投稿画面でStrongタグを入れる方法

上記カスタマイズをしたことに伴う注意点

強調文字を使いすぎない

強調文字を使いすぎると、逆に文章が読みづらくなります。強調文字を使いすぎないための目安は以下2つです。

  • 1つの見出しでは最大2カ所程度にする
  • 1つの記事で使う蛍光ペンの色は最大でも二色にする

あくまで目安ですので、文章の流れ次第では上記に反しても問題ないと思います。有効な使い方としては長文が続いた時に、キーワードをちょっと強調するというのが一番良いですね。

単なる太字にするのが面倒になる

上記のカスタマイズを行うと、太字を使うのが大変になります。今まではWordPressのビジュアルエディタからBボタンを押すだけでしたが、今後はテキストエディタから強調したい文字を<b></b>で囲う必要が出てきます。

それが面倒だという人は「Quicktags」のプラグインを導入してみてください。<b></b>タグが簡単に使えるようになります。設定方法などの詳細は以下の記事をご覧ください。

AddQuicktagの設定と使い方!プラグインの活用で作業効率を向上
ブロガーにとって「良い記事をどれだけ短時間に書けるか」はとても重要ですよね。私も作業効率を上げるために色んな対策をしています。 ...

WordpresのスマホアプリでのBボタンでは強調文字にならない

WordPressのスマホアプリから記事を更新している方もいらっしゃると思います。スマホアプリの「B」ボタンは<b>タグであるため、上記の設定だけでは蛍光ペンの強調文字にならないのでご注意ください。

WordpressのスマホアプリのBボタンは<b>タグとなる

スマホアプリで記事を更新される方はHTMLを直接編集して、<strong>タグを入れることをおすすめします。

※<b>タグも蛍光ペンの設定にしてしまうのも1つの手ではありますが、単なる太字を使いたい時もありますので、あまりおすすめできないです。

まとめ

強調文字として、蛍光ペンを引いたようなデザインにする方法についてご紹介しました。いずれにしても、中身が大事ですよね。難しいですが。笑

スポンサーリンク
広告

この記事が気に入ったらシェアしてください

もし良かったらフォローしてください

スポンサーリンク
広告