みなさんは、記事編集画面にある斜体ボタンを使っていますか？
私はブログを始めた当初こそ使っていたものの、しばらく経ったら全く使わないようになりました。
なぜなら、斜体にすると文字がかぶって見づらくなってしまうから。
その証拠に下の画像を見てみてください。
こうしてみると、数字でも文字と文字の隙間が少なくて見づらいですね。
あまり役立っていない斜体ボタンは、たぶんですけど私と同じように放置している人が多いと思います。
今回は、その役に立っていない斜体ボタンを有効活用する方法をご紹介します。
斜体ボタンのデメリット
斜体ボタンのデメリットは大きく分けて２つ。
- 文字がかぶってしまって読者が読みにくい。
- そもそも斜体に気付きにくく、協調の意味がない。
反対に、メリットは
- パソコンに疎い人でも簡単に文字を斜体にすることができる。
デメリット２つに対して、メリット1つしかない斜体ボタンって使う価値があるの？
と疑問に思う人もいると思いますが、せっかくはてなが使いやすいように設置してくれたものを使わないのはもったいない！
今回はそういうコンセプトのもと、上で挙げたメリットを最大限に活かす方法を次で紹介しています。
斜体にしないまま、蛍光マーカーに変えよう！
以下のコードをデザイン→カスタマイズ🔧→デザインCSSに張り付ければ完了です。
em {font-weight: 100;font-style: normal}
article em{
background: linear-gradient(transparent 50%, #ffff00 50%);
上記のコードでは、斜体にしたときの文字の大きさを変更できるように <font-weight>も付け加えました。
font-weight: 100の数字の部分を変えると文字の大きさを変更できるので、上記のコードでしっくりこない方はカスタマイズしてみてください。
普通の文字と同じでいいよ、という方はfont-weight: 100;の部分をデザインCSSに張り付けたあと、削除してください。
斜体の効果をなくす方法についての詳しい話は、こちらの方がされているので参考までにどうぞ。
簡単に説明すると、上のfont-style: normalが斜体の効果をなくす役割を担っています。
ちなみに、emは斜体による強調のことを指しています。
その下の二行のコードは、斜体ボタンを蛍光マーカーに変える役割を持ったCSSです。
記事の斜体ボタンのこと。
background: linear-gradient(transparent 50%, #ffff00 50%);
蛍光マーカーについて（transparent : 透明度、 #ffff00 : マーカーの色）
マーカーの色のサンプルについては、こちらのサイトをご覧ください。
＊transparent は、後ろの％を変更することで蛍光マーカーの幅を調整することができます。
例えば、transparent 0 は文字の上から下が蛍光マーカーで染まります。
反対に、transparent 100なら透明度100％なので蛍光マーカーの色が見えなくなり、普通の文字と変わらなくなります。
#ffff00はマーカーの色指定ですが、後ろの％を変えることで色の濃淡を変えることができます。
transparentでは、色の透明度を変更することはできないので注意してください。
〈スマホに貼るコードはこちら〉
デザイン→スマホ版フッタ→フッタに追加
<style type="text/css">
em {font-weight: 100;font-style: normal}
article em{
background: linear-gradient(transparent 50%, #ffff00 50%);
</style>
スマホ版はPCとは違って、さっきのCSSを<style type="text/css">と</style>を付けて囲ってあげないと反映されないので注意してください。
まとめ
今回は、斜体の強調をなくして蛍光マーカーに変更する方法を紹介しましたが、すでに<u> ここに文章</u>で蛍光マーカーを付けていた人もいるかもしれません。
「いちいち修正するのがめんどくさそう…」
という方でも、上記のCSSコードと以前貼った蛍光マーカーのCSSを取り換えてしまえばマーカーが引かれてあった箇所はただのアンダーラインに変わるので、ツールバーのアンダーラインを押せばすぐさま普通の文字に早変わりします。
そのため、記事のリライトにはそう時間はかからないと思います。
（記事数が多い人は大変だと思いますが…）
とはいえ、これで役立たずだった斜体ボタンも有効活用できるようになりました。
上記のコードでどこかおかしいところや、デザインCSSに貼っても反映されないよ…という方がいればコメントで教えていただけると嬉しいです。