【はてなブログ】蛍光マーカーのようなラインを引く設定方法！

はてなブログで記事を書くときに、協調したい文字や文章を「太文字」や、「文字を大きく」したりしてると思います。

最近いろいろな記事を拝見していると、"蛍光ペン"でラインを引いたような記事をよく見かけます。

何を強調したいのかが明確で、なんといってもインパクトが違いますね。

記事が映える！！

今回は、蛍光マーカーのようなラインを引くための設定方法についてご紹介します。

蛍光マーカーのラインとは

蛍光マーカーでラインを引いたように、文字の下にラインが引かれます。

こんな感じにラインが引かれます。

アンダーラインに似ていますね。

太文字、斜体、打消、アンダーライン、文字の大きさ、文字の色に加え、もう一種類使える機能が増えるのは嬉しい！

蛍光マーカーの設定方法

まずは、文字のアンダーラインを引くためには、"CSSコード"と"HTMLコード"が必要です。

CSSコードの設定

CSSコードは、ダッシュボード　→　カスタマイズ　→　デザインCSSに記入します。

設定するコードは以下になります。

蛍光ラインの幅を変更

「transparent 40%」のパーセンテージを大きくすると、蛍光マーカーのラインの幅が狭くなります。

パーセンテージが低ければ低いほど、幅が広い蛍光マーカーになります。

【幅が狭い蛍光マーカー】

【幅が広い蛍光マーカー】

色を変更する

色はブルーの蛍光マーカの「#87cefa」の部分を変更することで、いろいろな色に変更できます。

【オレンジ色の蛍光マーカーに変更したい場合】

オレンジ色のCSSコードは「#ffa500」になります。

色の名前を「.line-orange」に変更しておくとわかりやすいですね。

【ピンク色の蛍光マーカーに変更したい場合】

ピンク色は「#ffc0cb」になりますので、色の名前を「.line-pink 」に変更しておきましょう。

以下のサイトで色見本と色のコードがあるので参考にしてみてください。

https://www.colordic.org/

色の濃さを変更する

CSSコードの一番右側にあるパーセンテージを変更することで、色の濃さを調整できます。

パーセンテージが低ければ低いほど、濃い色の蛍光マーカーになります。

【濃い色の蛍光マーカーの場合】

【薄い色の蛍光マーカー】

HTMLコード

実際にHTMLコードを記入していきます。

HTMLコードの、<span class="line-skyblue">と</span>の間に文章を入れることで、その文章に蛍光ラインが引かれます。

まとめ

これはとっても記事の文字が映える機能だと感じました。

上手につかえれば、伝えたい内容や協調したい部分が今まで以上に読み手に伝わりますし、何といってもかっこいい！！

直接HTMLを入力しないといけないので、太文字にする「B」のマークのボタンのように、ワンクリックでこの機能が使えたら便利なのにとも思いました！

是非使ってみてください。