minimal-japanese-mom’s blog

元アメリカ駐在妻の40代主婦が、充実したおうち時間/1人時間を過ごすコツを伝えます!

【はてなブログ】ボーダーラインを引くための設定方法。

当ブログは、はてなブログというサービスを使っています。

 

 

今回は、ずっと気になっていた、ボーダーラインを引くための設定を行ったので、

 

メモ代わりに記録しておきます🎵

 

 

とっても簡単にできたので、参考にしてください😊

 

 

 

 

ステップ①

 

最初は、黄色のボーダーラインを引きたかったので、

 

「はてなブログ 黄色 ボーダーライン」

と入力して、ウェブ検索。

 

 

ステップ②

検索結果から、次のブログを参考にさせていただきました😊

 

はてなブログで蛍光ペン式アンダーラインを使う超簡単な方法【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)の色を選びました。

 

 

www.colordic.org

 

 

これを選んだ理由は、

 

ブログ画面をカラフルにしたかったから。

 

 

私は、文字を大きくしたときに、紫系の色を使うことが多いので、

 

その反対色ぽい、緑系を選んでみました😊

 

 

ステップ⑤

選んだカラーコード#7cfc00を、上のコードの8行目の

 

#ffd700

 

の代わりに、入力。

 

「変更を保存する」をクリックして、終了。

 

 

 

以上の操作で、

 

「ボーダーを引きたい箇所を選択して、斜体ボタンをクリックする」

 

だけで、

 

明るい緑のボーダーラインが引けるようになりました🎵

 

 

 

よければ、参考にしてください😊

 

 

にほんブログ村 海外生活ブログ アメリカ情報へ
にほんブログ村