（はてなブログ） マーカーで下線を引く方法

はてなブログのマーカーの引き方を調べたので、記録しておきたいと思います。

①デザインCSSにコードを入力する

1. ダッシュボード
2. デザイン
3. カスタマイズ🔧
4. デザインCSS
5. 下記のコードを入力する。（既に他のコードを貼りつけている場合はその後に貼りつける）

/*マーカー線・黄色*/
.marker-yellow {
background: linear-gradient(transparent 60%, #fff799 0%);
font-weight: bold;
}

②文章にマーカーを引く

1. 記事作成の画面で「HTML編集」にする
2. 下記のコードを貼りつける

<span class="marker-yellow">ここに好きな文章を書く</span>

③マーカーの色を変える

①、②で貼り付けたコードは黄色のマーカーになりますが、色を変更することが出来ます。

www.colordic.org

1.上記のサイトでマーカーの番号を調べます。

2.デザインCSSに張り付けた下記のコードの「#fff799」の番号を自分好みの色の番号に変更します。

/*マーカー線・黄色*/ .marker-yellow { background: linear-gradient(transparent 60%, #fff799 0%); font-weight: bold; }

3.上記コードの「黄色」の部分をわかりやすく「青」等に変更し、「.marker-yellow」の「yellow」部分を「blue]等に変更します。

4.下記の文章に貼り付けるコードの「yellow」部分を「blue]等に変更します。

   <span class="marker-yellow">ここに好きな文章を書く</span>

※使いたい色のコードをデザインCSSに貼り付けておけば、文章に貼り付けるコードの「yellow」の部分を変更するだけで色々な色を使用することが出来ます。

④太さを変更する

太さを変更する場合は①でデザインCSSに貼り付けたコードの下記の部分

「transparent 60%,」

60％の部分を変更して太さを変えることが出来ます。

⑤さいごに

以上、こちらの作業で無事マーカーを引くことができるようになりました。

デザインCSSに使いたい色のコードを貼りつけておけば色々な色を使えることもわかりました。

個人的に最初にスマホで設定しようとしたのですが、貼り付けにとても苦労したので、パソコンで設定することをお勧めします。（私だけかな・・）

また新しい方法等を勉強したら記録していきたいと思います。