はてなブログ記事で文字にマーカーを引く方法

文字の装飾には太さを変えたり、色を変えたり、マーカーを引いたりと色々ありますよね。

私もマーカーの装飾に挑戦してみているのですが、これが中々決まらない・・・！
まだ配色に迷っていて、ころころ変えたりしているせいだと思います・・・。

決まっていない状態だと

•  マーカーの太さ何％だったっけ・・・？
• ％は両方一緒にするんだったっけ・・・？
• この「#EBE4D3」どんな色だったかな・・・？

と調べ直しになったのでマーカーのカスタマイズ記事を作ってまとめることにしました。

「HTML編集」で色と太さを色々と試して、決まったらCCSで記事の斜体をマーカーに変更したらいいんじゃないかなぁ～と思います。

記事内にマーカーを表示する２つの方法

①「HTML編集」で表示する方法

マーカーを引きたい文字をspanタグで囲む。

• <span style="background: linear-gradient(transparent 80%,#2ca6ce 80%);">これは[例文]です</span>

表示▶これは[例文]です

• background: linear-gradientは背景をグラデーションにするためのコード
• transparent(透明)と#2ca6ce (青色)でグラデーションを作る
• %で色の位置を指定。 [例文] transparent 80%⇒行の上端から0％~80％まで透明になる
• 後に指定した色(青色)が下端まで表示される
• 前の色(透明)の終了地点(%)から、次の色(青色)の終了地点(%)にかけて、両色の混じったグラデーションになる
• 前の色(透明)の終了地点(%)より短い地点(%)を後の色(青色)で指定した場合、両色の混じったグラデーションにはならない

transparent(透明)の%を変えてマーカーの太さを変えてみます。
transparent(透明)の%の数値が、0に近いほど太く、100に近いほど細くなります。

(transparent 50%,#2ca6ce 50%)
(transparent 60%,#2ca6ce 60%)
(transparent 70%,#2ca6ce 70%)
(transparent 80%,#2ca6ce 80%)
(transparent 90%,#2ca6ce 90%)

では次に、両色の混じったグラデーションのマーカー表示をしてみます

わかりやすいように(透明)を(黄色)に変更してみました。

• <span style="background: linear-gradient(#FAEA95 70%, #2ca6ce 100%);">これは[例文2]です</span>

表示▶これは[例文2]です

0~70が(黄色)、70~100が両色の混じったグラデーションになりました。

• <span style="background: linear-gradient(#FAEA95 40%, #2ca6ce 70%);">これは[例文3]です</span>

表示▶これは[例文3]です

0~40が(黄色)、40~70が両色の混じったグラデーション、70~100が(青色)になりました。

２色の混じったグラデーションだと蛍光マーカーっぽさがでますね。
個人的には単色の方が好みです。

マーカーの好みの色、太さが決まったら、いちいち「HTML」で入力するのは手間なので「斜体」をマーカーに変更します。太字や下線でもいいですが、斜体が一番使わないので私は「斜体」にしています。

②CSSコードで入力補助ツールバーの「斜体」をマーカーに変更する方法

下のコードを「管理画面」→「 デザイン」→「 カスタマイズ」 →「 デザインCSS」に貼り付けて下さい。

• .entry-content em{
• background: linear-gradient(transparent 80%,#2ca6ce 80%);
• font-style: normal;
• }

※font-style: normal;を入れないと表示が斜体のままになります。

これでマーカーを引きたい部分を指定して、入力補助ツールバーの「斜体」をクリックすればマーカーが引けるようになりました！

これで完了！としたいところですが・・・

どうにもマーカーの見え方がブラウザで違うみたいなんですよね・・・。
ブラウザによってはグラデーションが黒ずんで表示されます。

transparent（透明）の扱いがブラウザで違うのが原因みたいです。

• Google（ブラウザ）では「白色を完全透明」にして表示
• Safari（ブラウザ）では「黒色を完全透明」にして表示

なのでtransparentのコードの次に、ブログ記事の背景と同じ色を指定したコードを挿入する必要があります。

背景が黒ならrgba(0, 0, 0, 0)
背景が白ならrgba(255, 255, 255, 0)
終了地点は transparentと同じ%

HTML

• <span style="background: linear-gradient(transparent 80%, rgba(255, 255, 255, 0) 80%, #2ca6ce 80%);">これで解決！</span>

表示▶ これで解決！

CSS

• .entry-content em{
• background: linear-gradient(transparent 80%, rgba(255, 255, 255, 0) 80%, #2ca6ce 80%);
• font-style: normal;
• }

これで本当に解決かな？

ちなみにマーカーはストライプ型など、もっとお洒落にもカスタマイズできます。

▼こちらのブログで紹介されていたので気になる方はどうぞ。
【2022年現役】はてなブログでおしゃれなストライプマーカーを引く方法【WordPress風】 - オカンTECH
私もIT自立したい・・・！