こんにちは。
皆さんもそうだと思いますが、私も記事を書くときに協調したい文字や文章を太文字や、文字を大きくしたりしています。
最近いろいろな記事を拝見していると、"蛍光ペン"でラインを引いたような記事をよく見かけます。
何を強調したいのかが明確で、なんといってもインパクトが違いますね。
記事が映える！！
今回は、蛍光マーカーのようなラインを引くための設定方法についてご紹介します。
蛍光マーカーのラインとは
蛍光マーカーでラインを引いたように、文字の下にラインが引かれます。
こんな感じにラインが引かれます
はてなブログのアンダーラインに似ていますね。
太文字、斜体、打消、アンダーライン、文字の大きさ、文字の色に加え、もう一種類使える機能が増えますね。
更に、スクロールに合わせて蛍光ペンのラインをアニメーションで引いている方もいました。
めちゃめちゃかっこいい！！
アニメーションの方法については次回ご紹介したいと思います。
蛍光マーカーの設定方法
まずは、文字のアンダーラインを引くためには"CSSコード"と"HTMLコード"が必要です。
CSSコード
CSSコードは、ダッシュボード → カスタマイズ → デザインCSSに記入します。
設定するコードは以下になります。
.line-skyblue {
background: linear-gradient(transparent 40%, #87cefa 50%);
}
蛍光ラインの幅を変更
「transparent 40%」のパーセンテージを大きくすると、蛍光マーカーのラインの幅が狭くなります。
幅が狭い蛍光マーカー
.line-skyblue {
background: linear-gradient(transparent 40%, #87cefa 50%);
}
幅が広い蛍光マーカー
.line-skyblue -hutoi{
background: linear-gradient(transparent 0%, #87cefa 50%);
}
色を変更する
色は#87cefaの部分を変更することで、いろいろな色に変更できます。
オレンジ色の蛍光マーカー
オレンジ色は「#ffa500」に変更します。
色の名前を「.line-orange」に変更します。
.line-orange {
background: linear-gradient(transparent 40%, #ffa500 50%);
}
ピンク色の蛍光マーカー
ピンク色は「#ffc0cb」になります。
色の名前を「.line-pink 」に変更します。
.line-pink {
background: linear-gradient(transparent 60%, #ffc0cb 50%);
}
こちらのサイトで色見本と色のコードがあるので参考にしてみてください。
www.colordic.org
色の濃さを変更する
一番右側にあるパーセンテージを変更することで、色の濃さを調整できます。
濃い色の蛍光マーカー
.line-skyblue-koi{
background: linear-gradient(transparent 0%, #87cefa 0%);
}
薄い色の蛍光マーカー
.line-skyblue-usui{
background: linear-gradient(transparent 0%, #87cefa 100%);
}
全く色がなくなるわけではありませんが、色が薄くなりましたね。
HTMLコード
実際にHTMLコードを記入していきます。
こんな感じにラインが引かれますの部分に文章をいれることで、文章に蛍光ラインが引かれます。
まとめ
これはとっても記事の文字が映える機能だと感じました。
上手につかえれば、伝えたい内容や協調したい部分が今まで以上に読み手に伝わりますし、何といってもかっこいい！！
この機能はこれから絶対使っていこうと思います。
今の状況だと、直接HTMLを入力しないといけないので、太文字にする「B」のマークのボタンのように、ワンクリックでこの機能が使えたら便利なので調べていきたいと思います。
ではでは～