【はてなブログ初心者】蛍光ペンのようなマーカーを引く方法！2020年版！

はてなブログ超初心者の私が、蛍光マーカー を設定する方法を書き残します！

何ができるようになるか？

設定が成功すると、以下のような見え方にできます！

どういう人に向けた記事か？

• ブログ初心者で「見たまま編集」で書いている人
• 蛍光マーカーの記事をググっても上手くできなかった人

こんな人に向けて書いてます。 色々自分で触れる、HTMLやマークダウン分かるみたいな人は
もっと専門的なサイトを見てください(m´・ω・｀)m

★本題★蛍光マーカーを付ける手順

① PCの画面で「管理画面」を開いてください！

②左のメニューから デザイン をクリック！
すると ↓ こんな画面が左に出てくるので、スパナマーク（詳細設定）をクリック

④デザインCSSをクリックして以下をコピペ！
デザインテンプレート（？）を使用している人は、その記述が入っているので消さないようにその下に追加してください！

/* 太字の蛍光ペン 黄色 */
.entry-content strong{
background: -webkit-linear-gradient(transparent 60%, #ffff00 60%)!important;
background: -o-linear-gradient(transparent 60%, #ffff00 60%)!important;
background: linear-gradient(transparent 60%, #ffff00 60%)!important;
}

/* 斜体の蛍光ペン ピンク */
.entry-content em{
background: -webkit-linear-gradient(transparent 60%, #ff66cc 60%)!important;
background: -o-linear-gradient(transparent 60%, #ff66cc 60%)!important;
background: linear-gradient(transparent 60%, #ff66cc 60%)!important;
}

これで設定を反映させれば完成！！です！

色を変えるには？

コピペしたコードの、 #6桁の英数字 の部分を好きな色に変えるだけです！

いくつか色の例を挙げてみたので、参考にしてみてください！

青 #0000ff
水色 #00bfff
ターコイズ #40e0d0
緑 #008000
黄緑 #00ff00
黄色 #ffff00
オレンジ #ffa500
赤 #ff0000
ピンク #ff1493
紫 #8a2be2

余談

なぜこれを書いたのか？

「蛍光マーカー」を使ってみたい！と思ってググってやってみたのですが、 「簡単！」「初心者向け！」「●●分でできる！」といった記事を真似しても全然できない！！涙

きっと同じように困っている人もいるはず！！と思ったので書いてみました。

色々試した感じでは、以下が失敗の原因なのでは？と思いました。

• 情報が古いものは上手くいかない

• 「見たまま編集」の人は「マークダウン」「はてな記法」の記事を参考にしても上手くいかない

その発見を元に、この方法にたどり着いたのですが、一点まだ解決できていない問題があります…

力不足…どなたか、親切な方教えてください

太字、斜字については、蛍光ペンのマーカーを付けることに成功しました。 しかし、下線 についてはどうしてもやり方がわからなかったです…
マークダウン記法であればできたのですが、 「見たまま編集」 する場合に上手くいかないのです…
どうにかここを習得して、いつかこの記事をUPDATEしたいなと思います。。。