• TOP
• ブログ

＜ZELOカスタマイズ記⑥＞テキストの背景色をベタ塗りじゃなくて蛍光ペンみたいなアンダーバーに変更したはなし

2019-12-13T00:00:00+09:00 2019-12-29T05:42:19Z Blogger ZELO カスタマイズ ブログ

WordpressからBloggerにお引っ越し中。

今回は、Blogger標準機能の「テキストの背景色」を、蛍光ペンみたいなアンダーバーにするカスタマイズ。


半日くらい調べてこれしかないカンジだけど、記事を書くときの設定が毎回必要だから、少しめんどうかも。。
（span styleとspan classの違いに気づかず苦労しました。。）

ビフォーアフター

CSSに追加したもの

（参考）Bloggerで蛍光ペン風の下線を引く方法

上記の記事を参考に、CSSを追加しました。

HTMLを開いたら「</b:skin>」で検索して、その上に

    .background-color {

    background: linear-gradient(transparent 35%, #fff799);

    font-weight:bold; 

    }

を追記。

記事を書く時の設定

記事を書く時がちょっとめんどくさいの。。

1. 蛍光ペンを引きたいところを選択して
2. Blogger標準のテキストの背景色をつけたら
3. ［HTML］をひらき
4. <span style="background-color: yellow;">
   　を
   <span class="background-color">
   　に変更

これで、アフターのようなラインが適用されます。

ひとまずこれで、蛍光ペンカスタマイズは完了！