Webサイトをいくつか作っていくうちに「こんな表現ができたらいいな」と思って検索したりすることでCSSをおぼえてきました。先日もあるサイトで「ここは太字とか色を付けるではなく、蛍光ペンで線を引いたように見せたい」と思うことがあり、検索したらすぐにわかりやすいサイトがあったので蛍光ペンのような表現ができました。
それを応用していろいろな太さや色のCSSが簡単にできるようにするには？ということを考えてみました。
蛍光ペンのような表現をするにはどうしればいいか、調べてみました。
CSS 蛍光ペン で検索をしてすぐにコチラのページが見つかりました
蛍光ペン風にテキスト上をマーカーするCSSを設定してみた IT便利帳
こちらの記事を読んで、CSSを使って蛍光ペンのような表現ができることがわかりました、ありがとうございます(^^)/。
CSSのクラスで利用する場合
.クラスの名前 {
background: linear-gradient(transparent 透明の縦余白%, #色名 色の縦余白%);
}
のように書くようです。
このliner-gradientというのは色の線形グラデーションを表示する属性で今回のように２つ値が指定されているときは 最初の色,最後の色 ということになります。蛍光ペンっぽくするには最初の色を透明（transparent）にしておくといい感じになるみたいです。
また、%（パーセント）は縦余白0%＜一番太い、縦余白100％＜一番細い、というか線がなくなる、という理屈になっていました。
色と太さをいろいろ変えた蛍光ペンCSSを試してみる
理屈はわかったので色と太さをいろいろ変えた蛍光ペンCSSを試してみたいと思います。
background: linear-gradient(transparent 0%,#7cfc00 0%);
色は蛍光ペンっぽく黄緑色（#7cfc00）にして太さは一番太く(0%)
この部分を蛍光ペンで塗ります。どんな感じですか？
色は蛍光ペンっぽく黄緑色（#7cfc00）にして太さは60%
background: linear-gradient(transparent 60%,#7cfc00 60%);
この部分を蛍光ペンで塗ります。どんな感じですか？
色は蛍光ペンっぽく黄緑色（#7cfc00）にして太さは半分(50%)
background: linear-gradient(transparent 50%,#7cfc00 50%);
この部分を蛍光ペンで塗ります。どんな感じですか？
transparent を40%、黄緑色の方を70%
background: linear-gradient(transparent 40%,#7cfc00 70%);
この部分を蛍光ペンで塗ります。どんな感じですか？
透明から少しずつ黄緑色になるので、にじんだ感じに見えます。
色を変えて蛍光マーカーを引いてみると
「虹の７色は赤、オレンジ、黄色、緑、水色、青、紫と考えられている」
こんな感じになりました(^^)/。いろいろ試してみたかったので直接
「虹の７色は<span style="background: linear-gradient(transparent 60%,#ff0000 60%);">赤</span>、<span style="background: linear-gradient(transparent 60%,#ffa500 60%);">オレンジ</span>、<span style="background: linear-gradient(transparent 60%,#ffff00 60%);">黄色</span>、<span style="background: linear-gradient(transparent 60%,#00ff00 60%);">緑</span>、<span style="background: linear-gradient(transparent 60%,#add8e6 60%);">水色</span>、<span style="background: linear-gradient(transparent 60%,#0000ff 60%);">青</span>、<span style="background: linear-gradient(transparent 60%,#800080 60%);">紫</span>と考えられている」
このようにspanで書きましたが、blogなどで繰り返し使うにはCSSをクラスにしておきたいと思います。
子テーマのstyle.cssに蛍光ペンクラスを追加する
早速、使っている子テーマのstyle.cssに蛍光ペンのクラスを追加してみます。
さきほど試してみた7色のうち、蛍光ペンに合いそうな色4色を細、太のクラスにしてみました。
/* 蛍光ペン 細 */
.line_marker_orange_hoso {
background: linear-gradient(transparent 60%,#ffa500 60%);
}
.line_marker_yellow_hoso {
background: linear-gradient(transparent 60%,#ffff00 60%);
}
.line_marker_green_hoso {
background: linear-gradient(transparent 60%,#00ff00 60%);
}
.line_marker_lightblue_hoso {
background: linear-gradient(transparent 60%,#add8e6 60%);
}
/* 蛍光ペン 太 */
.line_marker_orange_futo {
background: linear-gradient(transparent 0%,#ffa500 0%);
}
.line_marker_yellow_futo {
background: linear-gradient(transparent 0%,#ffff00 0%);
}
.line_marker_green_futo {
background: linear-gradient(transparent 0%,#00ff00 0%);
}
.line_marker_lightblue_futo {
background: linear-gradient(transparent 0%,#add8e6 0%);
}
これを使っている子テーマのstyle.cssに追加します。
そして
<span class="line_marker_lightblue_futo">これは水色の太？</span>
↓
これは水色の太？
<span class="line_marker_orange_hoso">これはオレンジの細？</span>
↓
これはオレンジの細？
このようにspanにクラスを指定するだけで蛍光ペンが使えるようになりました(^^)/
おまけ：それでもちょっと面倒くさいような…
CSSのクラスを追加して少し使いやすくなりましたが、まだちょっと面倒な気がします。ショートコードにしてみたらもっと使いやすいのかな？と思うのでまた別の機会にショートコードを作ってみたいと思います。
[amazon_searchlink search=”css”]
コメント