ノートとかに蛍光ペンでラインひくでしょ？
アレと同じようなことをブログでもできちゃうスゴ技CSSがあるんです！
本日は、そんな「マーカー」機能のお話しをするね。
▼・ｪ・▼さ。
割とよく太文字強調しちゃうんだよね。
中文字＋太字強調とかさ。
CONTENTSインストールして、反映された自分のブログ見たらさ。
それこそ、▼・ｪ・▼ﾅﾝﾀﾞｯﾃ！？ってなったﾖ。
よくよく見てみたら、「B」の太文字強調ボタン押すと自動的にマーカーつくのね。
クリックひとつでマーカーつけてくれちゃうなんて、とってもありがたい仕様！
ちょろっと検索してみたら、マーカー表記にするには、
- CSSにコード追加
- 記事画面のHTML画面で、表記させたい文章に そのつど手動入力
それを考えたら、太文字にするだけでマーカーがつけられるのは「神さまかな？？」
って思うくらいありがたいことだと思うの！
ただ、もうちょっとだけ淡い色にできたり、
マーカーの太さを変えられたらいいのになぁ･･･って。(◞‸◟ㆀ) ｼｮﾎﾞﾝ
だってさ。
太文字にして強調したいところなのに、太文字にはならない。
ビビットな濃い色のマーカーは、パッと見アクセントにはなってるんだけども、
文字全体を塗りつぶした感じになっちゃってて、
何だか逆に文章が読みづらいと感じるのは▼・ｪ・▼だけ？
多数のCSSカスタム適用済のコンテンツ制作に最適なテーマCONTENTSを発表 - DREAMARK
CONTENTSの解説記事に、蛍光マーカーについての説明が書いてはあるんだけども、赤いマーカーを青に変える方法しかないんだよね。
じゃあ、その部分を別の色に指定すればいいのかっていうとそれもできない。
しかも、いくつかのブログで見かけた青いマーカー設定の場合。
<span class="marker_bule">青のマーカーライン</span>
CONTENTSの説明の場合。
<span class="markb">青のマーカーライン</span>
「まーくぶ」ってなに？ ɿ(｡･ɜ･)ɾ？
でも、CSSで色指定とか関連付けてるんだよねぇ？
▼・ｪ・▼ ‥ﾊﾊｰﾝ？
さては、こうだろ！（redのrをつけてみる）
.markr {
background: linear-gradient(transparent 80%, #f0909d 80%);
}
無反応。(≖ω≖)
じゃぁ、これはどうだ！（pinkのpをつけてみる）
.markp {
background: linear-gradient(transparent 80%, #f0909d 80%);
}
無反応。(≖ω≖)
これならどうだ！（むしろ外しちゃう）
.mark {
background: linear-gradient(transparent 80%, #f0909d 80%);
}
無反応。(≖ω≖)
もしかして普通にこうか？！
.marker_pink{
background: linear-gradient(transparent 80%, #f0909d 80%);
}
( ･ὢ･ ) ｵｺｯ！
パトラッシュ･･･？
ボクもぉ疲れたよ･･･ 何だかとっても眠いんだ･･･ （ p_q）ｸｽﾝ
最終手段。
困った時に知りたい時のあれやそれ。Q＆Aページを作りました。 - DREAMARK
あらかじめ設定してくれているマーカー機能を消す。
そして、改めて検索で出てきた方法で設定する。
CSSで設定したあと、いちいちHTMLで手動で入力しないといけないんだけどさ。
この方法なら マーカーを好きな色や太さに変えられるし、太字強調もデフォルトで機能してくれる ね！
▼・ｪ・▼が今回使ったマーカーの色はね。
毎度お馴染み和色大辞典から「珊瑚色」をチョイスん。
/* マーカーの色と幅設定 */
.marker_sangoiro {
background: linear-gradient(transparent 60%, #f5b1aa 60%);
}
色は、ブログのメインカラーに合わせた淡い色に。
幅は、文章の下から1/3くらいに被る程度の60％で設定。
ご満足！ (๑•̀ㅂ•́)و✧
また一つ賢くなったし、自分好みのブログに近づくことができましたん🎵
先生ありがとう！
お世話になったサイトの皆さんありがとう！
ﾟ*｡.ღ ⊹⊱ ￡ονё & βＬёｓｓ уｏц ⊰⊹ ღ.｡*ﾟ
Thank you.
I love you.