こんにちは、greenです。
ブログを書くときに、蛍光ペンのようなマーカーを引きたい時がありますよね。
私も蛍光ペンのマーカー使ってますよ、こんな感じです。
-450
＋450
蛍光ペンのマーカーというよりは、株価の上げ下げの色です👶
今回の記事では、憧れの蛍光ペンのマーカーが使えるように、はてなブログで蛍光ペンのマーカーを設定していきます。
蛍光ペンのマーカーが気になる人の参考になればと思います。
記事の内容は、蛍光ペンの設定方法、まとめの順で書いていきます。
蛍光ペンの設定方法
蛍光ペンの設定の方法としては、３つあるようです。
1つ目は記事のHTMLにベタに書く方法、2つ目はCSSに蛍光ペンを設定する方法、3つ目は強調（太文字）・斜体・下線に蛍光ペンを紐づける方法になります。
１．HTMLにベタに書く方法
1つ目は記事のHTMLにベタに書く方法を説明します。
水色のマーカーは、HTMLで次のように書きます。
<p><span style="background: linear-gradient(transparent 80%, #66ccff 0);">transparent 80%, #66ccff 0</span></p>
と書くと👇のように表示されます。
transparent 80%, #66ccff 0
次は線を太くします。その場合は赤文字の％の値を逆に小さくします。
<p><span style="background: linear-gradient(transparent 60%, #66ccff 0);">transparent 60%, #66ccff 0</span></p>
と書くと👇のように表示されます。
transparent 60%, #66ccff 0
赤文字の％で下線の太さを指定でき、青文字のコードで色を指定できます。
２．CSSに蛍光ペンを設定する方法
2つ目はCSSに蛍光ペンを設定する方法を説明します。
水色とピンクのマーカーの設定をデザインCSSに次のように書きます。
.marker_blue {
background: linear-gradient(transparent 80%, #66ccff 0);
}
.marker_pink {
background: linear-gradient(transparent 80%, #ff66ff 0);
}
HTMLには次のように書きます。
<p><span class="marker_pink">ピンクの蛍光ペン</span></p>
と書くと👇のように表示されます。
ピンクの蛍光ペン
<p><span class="marker_blue">水色の蛍光ペン</span></p>
と書くと👇のように表示されます。
水色の蛍光ペン
あと、デザインCSSに下の赤文字部分を追加すると蛍光ペンの部分にカーソルを合わせると太い蛍光ペンになります。
追加したCSS内容は、marker_blueまたはmarker_pinkクラスを指定した蛍光ペンの部分にカーソルが上にある時、マーカーを最大にするので透明部分を0にするというものになります。
marker_blue {
background: linear-gradient(transparent 80%, #66ccff 0);
}
.marker_blue:hover{
background: linear-gradient(transparent 0%, #66ccff 0);
}
.marker_pink {
background: linear-gradient(transparent 80%, #ff66ff 0);
}
.marker_pink:hover{
background: linear-gradient(transparent 0%, #ff66ff 0);
}
３．強調（太文字）・斜体・下線に蛍光ペンを紐づける方法
3つ目は強調・斜体・下線を蛍光ペンと紐づける方法です。
既に強調・斜体・下線を指定した記事がある場合、CSSを変更すると蛍光ペンのマーカーに変わってしまいます。
逆に、２で説明したクラス指定をすることなく、強調・斜体・下線を指定することで、蛍光ペンのマーカにすることが出来ます。
設定方法は、👇でご確認ください。
まとめ
ちなみに、私は「２．CSSに蛍光ペンを設定する方法」で蛍光ペンのマーカーを設定しました。
設定して思ったことは、思っていたより簡単に憧れの蛍光ペンのマーカーがCSS設定できるということと、HTMLの蛍光ペンのクラス指定が面倒ということです。
ということで、次の定型文を登録しました。
- ピンクの蛍光ペン
<p><span class="marker_pink">ピンクの蛍光ペン</span></p> - 水色の蛍光ペン
<p><span class="marker_blue">水色の蛍光ペン</span></p>
定型文の登録の仕方が分からない人はこちらの記事で確認ください。
定型文を使うと、蛍光ペンのマーカー設定が凄く楽になりました😊
自作自演です😡気を付けるばぶー
最後まで、読んでいただきありがとうございます。
