
Diverではデフォルトで文字に蛍光ペンを引いたようなマーカーをつける機能が実装されています。
(動くアニメーションマーカーもデフォルトで入ってるから便利!)
でも、フォントをNoto Sans JPに変えてしまったからか、マーカーの色がちょっと濃すぎて違和感。
ここは早々にマーカー色を変更しちゃおう。
ついでに、マーカー引いた時に太字になるようにカスタマイズしちゃいます!
Contents
Diverの蛍光マーカー色を変更するCSS
デフォルトでマーカーと動くマーカーが入ってる時点で感謝なんですけど。
でも私が使ってるフォントでマーカーを引くと、下の画像のようになってしまいます。
(動かない)マーカーは太字になってないし、かといって動くマーカーは太字になってるけど、Noto Sans JPの太字がすぎて、せっかくの黄色マーカーが滲んでしまっているような感じでもったいない。
うーん。
やっぱりここはカラー変更してしまいましょ!
マーカーの色は薄い黄色にして太字に変更
マーカーを引いたときに、フォントの太さがそのままだと逆に読みづらい感じもするのかな?
どうせマーカーを引くのなら、太字でがっつり目立たせたい。
でも太字にするだけだと、デフォルトの動くマーカーのようにフォントとの相性がよくない。
(フォントによっては太字にするだけでもいいと思う)
なので、「外観」⇒「カスタマイズ」⇒「追加CSS」に以下を追記しました。
/*マーカー太字&薄い黄色 */
.sc_marker {
background: linear-gradient(transparent 50%,#FFFF7A 50%);
font-weight: bold;
}
カラーを#FFFF7Aにして、太字に。
色は好みでピンクとか水色とか変更してもOK。(半角でね)
#ffcccc(淡い赤)とか#ccffff(水色)とかどうでしょう?動くマーカーの色を変更する
動くマーカーはちょっと長めの文章を強調したい時に便利。(逆に短い文章で使っちゃうとあんまり意味ないかも)
長いといっても、1行以内が程度ってものでしょうけど。(スマホで見た時はしょうがないよね)
どうせなら、薄い黄色にするんじゃなくて、色をガラっと変更してみたいと思います。
/*動くマーカー弱い赤 */
.sc_marker-animation.active {
background-position: -100% .4em;
transition: 2.5s;
}
.sc_marker-animation {
background-image: -webkit-linear-gradient(left,transparent 50%,#FFCCCC 50%);
background-image: -moz-linear-gradient(left,transparent 50%,#FFCCCC 50%);
background-image: -ms-linear-gradient(left,transparent 50%,#FFCCCC 50%);
background-image: -o-linear-gradient(left,transparent 50%,#FFCCCC 50%);
background-image: linear-gradient(left,transparent 50%,#FFCCCC 50%);
background-repeat: repeat-x;
background-size: 200% .8em;
background-position: 0 .5em;
font-weight: bold;
}
先ほどの弱い赤(#FFCCCC)に変更。
マーカー(蛍光ペン)におすすめの色コードは?
マーカーの色って、以前に紹介したカラーコードサイトで確認してみても、文字が被ると色の見え方が変わってくるから、選ぶのに悩んでしまいます。
おすすめのカラーコードを一部紹介しますので、参考にしてみてくださいね。
普通のピンク(#ffdbff)
オレンジ(#ffddbc)
淡いパープル(#ead6ff)
普通の水色(#ccffff)
意外と緑(#ccffcc)
はっきり黄緑(#ccff99)
落ち着いた水色(#DCEEFF)
はっきり水色(#AFEFFF)
優しい水色(#E5FBF8)
落ち着いた水色(#c9efef)
AddQuicktagを使ってマーカーの色を増やす
Diverをビジュアルエディタで使用すると、黄・赤・青のマーカーがデフォルトで入っていますが、
テキストエディタを使用する場合は黄色1色のみ。
もうちょっとマーカー色を増やしたい、という場合はAddQuicktagを使うのが俄然便利です。
先ほど紹介したように、元々のマーカーはこのようにコードが指定されています。
.sc_marker {
background: linear-gradient(transparent 50%,#ff6 50%);
}
今回はピンクと青の2色を追加してみましょうか。
/*マーカー太字&ピンク */
.sc_marker1 {
background: linear-gradient(transparent 50%,#ffdbff 50%);
font-weight: bold;
}
/*マーカー太字&青 */
.sc_marker2 {
background: linear-gradient(transparent 50%,#E5FBF8 50%);
font-weight: bold;
}
子テーマのstyle.css、もしくは追加CSS(外観→カスタマイズ)に上記コードを追加します。(カラーコードはお好みで)
その後、AddQuicktagの設定画面へより、
以下コードの文字(ピンクマーカー)前後をそれぞれコピペ。
<span class="sc_marker1">ピンクマーカー</span>
ラベル名はお好みで。
右側のチェックは、一番右のマスをクリックすれば全部にチェックが入ります。
AddQuicktagは1つずつしか登録できないので、1色登録してからもう1色登録…。
ブルーのコードはこちら↓(文字前後をそれぞれコピペ)
<span class="sc_marker2">水色マーカー</span>
すべて登録が終わったら、テキストエディタに戻ります。
タグが増えているので、マーカーをひきたい文字を範囲指定して、クリックすると…
このように好みのマーカーを追加することができます。
AddQuicktagはDiverの会話機能でも使っているので、ぜひ登録してみてくださいねー!
おしまいに
単語や文章を強調するのに便利なマーカー機能。
ついいろんな色を使いたくもなりますが、でも基本は1~2色までの使用に留めておくほうがきれいです。
私が使うマーカーも薄い赤と水色系(たまに黄色)くらい。
それぞれの色に用途を指定しておくと、より見やすくなるかと思います。
(例)
強調したいところは赤マーカー
注意を促したいところは黄マーカー
など。
上手に使い分けですっきり読みやすい記事にしたいですね!