ブログに蛍光ペン風の線を引く簡単な方法

ブログの文章の途中に、蛍光ペンで線を引いたような装飾があると、その部分が際立ってより分かりやすくなりますよね。

このように、Bloggerで蛍光ペン風の線を引く方法を、初心者の方にも分かりやすく説明します。

コピペで簡単にできるので、ぜひやってみてください。

ちなみに、Blogger以外のブログサービスでも同じようにできるので、参考にしていただけたらと思います。

スポンサーリンク

目次[非表示]

• 1Bloggerで蛍光ペン風の線を引く方法
• 2CSSがうまく反映されないときは

Bloggerで蛍光ペン風の線を引く方法

Bloggerの管理画面で「テーマ」をクリック後、「カスタマイズ」をクリックします。

「テーマ」→「カスタマイズ」をクリックします。

Bloggerのテーマデザイナーが開くので、「上級者向け」→「CSSを追加」をクリックします。(他のブログサービスをお使いの方は、CSSを追加できる場所を開いてください。）

「上級者向け」→「CSSを追加」をクリックします。

次のコードをコピーして貼り付けます。

/*↓蛍光ペン風マーカー↓*/
b {
background: linear-gradient(transparent 60%, #ffccdd 60%);
} 

このコードだと、このようなラインになります。

＊#ffccddのカラーコードはお好きな色に変えてください。カラーコードはこちらで調べられます。→WEB色見本

＊transparent 60%の数字を大きくすると線が細くなります。逆に数字を小さくすると線が太くなります。お好みで変えてください。

編集が終わったら、最後に右上の「ブログに適用」をクリックしてください。

編集の最後に「ブログに適用」をクリックします。

ブログの編集画面で入力した文字を太字にすると、その部分に蛍光ペン風の線が引かれます。

太字にした文字にラインが引かれます。

※このカスタマイズをすると、普通の太字（ラインなし）にはできませんので、ご注意ください。

これで、蛍光ペン風の線を引くカスタマイズは終了です。

CSSがうまく反映されないときは

他にも「CSSの追加」によるカスタマイズをいくつかしている場合、コードを追加してもうまく反映されないことがあります。

そんなときの対処法をご紹介しています。


くわしくは、こちらをどうぞ♪

→CSSがうまく反映されない時の対処法


▼こちらもおすすめ♪
→ホームへ戻る