こんにちは祐（＠yuu304810）です。
今回は『アンダーラインを蛍光ペン風にカスタマイズする方法』について、解説していきます。
下記が完成イメージです⇩
こんな感じ(・∀・)v
とくに難しい作業や、専門知識は必要ないので、ぜひ参考にしてみてください。
・アンダーラインを蛍光ペン風にカスタマイズするメリット
・アンダーラインを蛍光ペン風にカスタマイズする際の問題点
・アンダーラインを蛍光ペン風にカスタマイズする方法・手順・使い方
アンダーラインを蛍光ペン風にカスタマイズするメリット
通常のアンダーラインはこんな感じです。
シンプルイズベストなのかもしれませんが、個人的には地味すぎる気がするんですよね。
まぁこの辺は好みの問題です。
アンダーラインを蛍光ペン風にカスタマイズする際の問題点
①斜体に設定した過去記事すべて蛍光ペン風のアンダーラインになる
②ブログデザインが崩れる場合がある
問題点２つ、さくっと解説します。
①斜体に設定した過去記事すべて蛍光ペン風のアンダーラインになる
これまで斜体に設定していた過去記事すべてが蛍光ペン風のアンダーラインになります。
過去によく斜体を使っていた方は、記事の雰囲気が結構変わってしまうと思うので注意してください。
「斜体ってなにそれ？そんなのあったっけ？」というような人はノーダメージです。
安心してください。
②ブログデザインが崩れる場合がある
僕の場合、なぜかソーシャルボタンが歪みました。
蛍光ペン風のアンダーラインを実装する前
蛍光ペン風のアンダーラインを実装した後（なんでやねん）
個人的には、そこまで大きな変化ではなかったので気にしていませんが、テーマや、他カスタマイズの相性によってデザインが崩れてしまう場合があります。
必ずバックアップを取るなど、万が一に備えてから試してみてください。
アンダーラインを蛍光ペン風にカスタマイズする手順
①ダッシュボードの【デザイン】を選択
↓
②【カスタマイズ（スパナマーク）】を選択
↓
③【デザインCSS】を選択
↓
④これから紹介するコードを貼り付ける
アンダーラインを蛍光ペン風にカスタマイズするCSSコード
article em{
font-weight:bold;
font-style: normal;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, #afeeee 60%) !important;
}
article i{
font-style:oblique !important;
}
上記のコードを、デザインCSSにコピペするだけでOKです。
現在、アンダーラインの色が当ブログと同じ青色に設定されていますが（to bottom, transparent 60%, #afeeee 60%）の赤色部分をイジると色を変更することができます。
上記のサイトを参考にカスタマイズしてみてください。
アンダーラインを蛍光ペン風にする使い方
①【蛍光ペン風のアンダーラインを引きたい文章】を選択
↓
②【斜体（iマーク）】を選択
↓
③できましたか？
まとめ
アンダーラインを蛍光ペン風のデザインにするメリットは「見やすくオシャレになるから」です。
ただし、問題点が２つあります。
①斜体に設定した文字すべて蛍光ペン風になる
②ブログデザインが崩れる場合がある
斜体を使っていた過去記事すべてが蛍光ペン風になってしまいます。
斜体を使ったことがない人はノーダメージです。
一番の問題は、ブログのデザインが崩れてしまう場合があるということ。
必ずバックアップを取るなど、万が一に備えから試してください。
最後までお読み頂きありがとうございました。
少しでも参考になれば嬉しいです。