目次
ブログの背景色がべた塗り過ぎる
ブログを作成する際、文章を強調する目的で背景色を選択する場合があるのですが、その背景色がべた塗り過ぎて、かえって見にくいのではないかと思いました。
そこで、JavaScriptの勉強を兼ねて、ラインマーカー風に背景色を変更することができないか調べてみました。
ブログの背景色の実現方法を調査
そもそも、ブログの背景色はどのように実現されているのでしょうか。
実際に、ブログで文章を選択し、背景色として黄色を設定した際のHTMLの記述は次の通りです。
テストです。
<span style="background-color: #fcff01;">テストです。</span>
選択した文章は、SPANタグでインライン要素としてグループ化され、そのグループの背景色がブログで設定した色に指定されていました。
ラインマーカー風の具体的なイメージ
ラインマーカー風の具体的なイメージを以下に挙げます。
ラインマーカー風 イメージ1
背景色の上部を白色にしたスタイルです。
テストです。
<span style="background: linear-gradient(white 35%, rgb(252, 255, 1) 35%);">テストです。</span>
ラインマーカー風 イメージ2
背景色の上部と下部を白色にしたスタイルです。
テストです。
<span style="background: linear-gradient(white 35%, rgb(252, 255, 1) 35%, rgb(252, 255, 1) 65%, white 65%);">テストです。</span>
アルゴリズム ラインマーカー風に背景色を変更
ラインマーカー風に背景色を変更するJavaScriptのアルゴリズムは、次の通りです。
- SPANタグの背景色をJavaScriptで抽出
- JavaScriptで背景色をラインマーカー風に加工
- JavaScriptで加工した背景色をSPANタグに設定
ただし、この方法では、ブログ内の全てのSPANタグに影響を与えてしまいます。
この点が気になったので、次の制約を設けることにしました。
- SPANタグに背景色が設定されていない場合は、ラインマーカー風の処理をスキップする
- SPANタグに特定のクラス(クラス名: IgnoreBGC)が設定されている場合は、ラインマーカー風の処理をスキップする
ソースコード ラインマーカー風に背景色を変更
ラインマーカー風に背景色を変更するJavaScriptのソースコードは、次の通りです。
// SPANタグを抽出
let SpanList = document.body.querySelectorAll('span');
// SPANタグの存在を確認
if (null !== SpanList) {
// SPANタグの個数だけ繰り返し
SpanList.forEach(
function(element) {
// SPANタグのclass="IgnoreBGC"は処理をスキップ
// SPANタグの背景色が未設定の場合は処理をスキップ
if (!element.classList.contains('IgnoreBGC') && '' !== element.style.backgroundColor) {
// SPANタグの背景色を抽出
const LocalColor = element.style.backgroundColor;
//
// SPANタグの背景をラインマーカー風に変更
//
if (false) {
// Top → Bottomで、上35%を白、35～100%をLocalColorに塗りつぶし
element.style.background='linear-gradient(to bottom, white 35%, ' + LocalColor + ' 35%)';
} else {
// Top → Bottomで、上35%を白、35～65%をLocalColor, 下35%を白に塗りつぶし
element.style.background='linear-gradient(to bottom, white 35%, ' + LocalColor + ' 35%, ' + LocalColor + ' 65%, white 65%)';
}
}
}
);
}
JavaScriptソースコードのポイントを以下に記載します。
行番号2では、ブログ内のSPANタグを抽出しています。
行番号5では、ブログ内のSPANタグの存在を確認しています。
行番号8～28では、抽出されたSPANタグの数だけ、ラインマーカー風に背景色を変更する処理を行っています。
行番号12では、SPANタグのクラスがIgnoreBGCであるか、また、SPANタグの背景色が設定されているかを確認しています。
行番号14では、SPANタグに設定されている背景色を抽出しています。
行番号19では、2種類のラインマーカー風処理を選択する処理を行っています。
ソースコードでは、行番号21の処理(ラインマーカー風 イメージ1)は実行されず、行番号24の処理(ラインマーカー風 イメージ2)が実行されます。
行番号21の処理(ラインマーカー風 イメージ1)を実行する場合は、行番号19のfalseをtrueに変更すれば良いです。
行番号21は、ラインマーカー風 イメージ1の処理を行うJavaScriptソースコードです。
行の上辺から底辺の方向に、上辺から35%までを白色、35～100%をSPANタグの背景色で塗りつぶします。
行番号24は、ラインマーカー風 イメージ2の処理を行うJavaScriptソースコードです。
行の上辺から底辺の方向に、上辺から35%までを白色、35～65%をSPANタグの背景色、65～100%を白色で塗りつぶします。
JavaScriptをブログに追加する方法
作成したJavaScriptソースコードは、ブログのテーマに埋め込みます。
テーマ >> カスタマイズ で「HTMLを編集」を選択
</body>の直前に下記に従ってJavaScriptソースコードを追加
<script>
//<![CDATA[
JavaScriptソースコード
//]]>
</script>
