Diverのマーカー色と文字の太さをカスタマイズ【プラグインなし】

Diverではデフォルトで文字に蛍光ペンを引いたようなマーカーをつける機能が実装されています。

(動くアニメーションマーカーもデフォルトで入ってるから便利!)

でも、フォントをNoto Sans JPに変えてしまったからか、マーカーの色がちょっと濃すぎて違和感。

ここは早々にマーカー色を変更しちゃおう。

ついでに、マーカー引いた時に太字になるようにカスタマイズしちゃいます!

Diverの蛍光マーカー色を変更するCSS

デフォルトでマーカーと動くマーカーが入ってる時点で感謝なんですけど。

テキストエディタのマーカーボタン

でも私が使ってるフォントでマーカーを引くと、下の画像のようになってしまいます。

Diverデフォルトのマーカー

(動かない)マーカーは太字になってないし、かといって動くマーカーは太字になってるけど、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色までの使用に留めておくほうがきれいです。

私が使うマーカーも薄い赤と水色系(たまに黄色)くらい。

それぞれの色に用途を指定しておくと、より見やすくなるかと思います。

(例)
強調したいところは赤マーカー
注意を促したいところは黄マーカー

など。

上手に使い分けですっきり読みやすい記事にしたいですね!

このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事