当ブログは、はてなブログというサービスを使っています。
今回は、ずっと気になっていた、ボーダーラインを引くための設定を行ったので、
メモ代わりに記録しておきます🎵
とっても簡単にできたので、参考にしてください😊
ステップ①
最初は、黄色のボーダーラインを引きたかったので、
「はてなブログ 黄色 ボーダーライン」
と入力して、ウェブ検索。
ステップ②
検索結果から、次のブログを参考にさせていただきました😊
はてなブログで蛍光ペン式アンダーラインを使う超簡単な方法【1分で完了】│マノコラ
実際に行ったのは、
設定画面
⇒詳細設定
⇒「headに要素を追加」の項目に、
以下のコードをコピペ（上のマノコラさんのサイトから引用させていただきました）
<style type=”text/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%, #ffd700 60%) !important;
}
article i{
font-style:oblique !important;
}
</style>
⇒「変更を保存する」をクリック。
注意事項
・私は、グーグルアドセンスのコードも、「headに要素を追加」の項目に貼っているので、
その下側に、少しスペースをあけて、上のコードをコピペしました。
ステップ③
以上のステップで、「斜体」を押すだけで、ボーダーラインが引かれます🎵
ステップ④
ボーダーの色を変えたかったので、
以下のWEBカラーコード事典から、lawngreen（＃7cfc00)の色を選びました。
これを選んだ理由は、
ブログ画面をカラフルにしたかったから。
私は、文字を大きくしたときに、紫系の色を使うことが多いので、
その反対色ぽい、緑系を選んでみました😊
ステップ⑤
選んだカラーコード＃7cfc00を、上のコードの８行目の
#ffd700
の代わりに、入力。
⇒「変更を保存する」をクリックして、終了。
以上の操作で、
「ボーダーを引きたい箇所を選択して、斜体ボタンをクリックする」
だけで、
明るい緑のボーダーラインが引けるようになりました🎵
よければ、参考にしてください😊
