皆様、ご自身のサイトで強調したい文字はどのように表現していますか？
太字にする、赤字にする、大きくする等々、表現方法は様々かと思います。
私のサイトでは、蛍光ペンを引いたようなデザインで文字を強調しています。
もし、強調文字をどうしようとお考えの方は、このデザインも案の１つに入れてみてください。
強調したい文字を蛍光ペンで引いたようなデザインにする
強調したい文字を蛍光ペン引いたようなデザインにすることは簡単です。
以下のコードをご自身でお使いの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のビジュアルエディタからBボタンを押すだけでしたが、今後はテキストエディタから強調したい文字を<b></b>で囲う必要が出てきます。
それが面倒だという人は「Quicktags」のプラグインを導入してみてください。<b></b>タグが簡単に使えるようになります。設定方法などの詳細は以下の記事をご覧ください。
WordpresのスマホアプリでのBボタンでは強調文字にならない
WordPressのスマホアプリから記事を更新している方もいらっしゃると思います。スマホアプリの「B」ボタンは<b>タグであるため、上記の設定だけでは蛍光ペンの強調文字にならないのでご注意ください。
スマホアプリで記事を更新される方はHTMLを直接編集して、<strong>タグを入れることをおすすめします。
※<b>タグも蛍光ペンの設定にしてしまうのも１つの手ではありますが、単なる太字を使いたい時もありますので、あまりおすすめできないです。
まとめ
強調文字として、蛍光ペンを引いたようなデザインにする方法についてご紹介しました。いずれにしても、中身が大事ですよね。難しいですが。笑
コメント