CSSで蛍光ペンで引いたような下線を作る方法【Stinger8の場合】

Stinger8 の黄マーカーをCSSで蛍光ペンで引いたような下線にカスタマイズする方法






「Stinger8」の記事投稿ページに登録されている「黄マーカー」を、蛍光ペンで引いたような下線にカスタマイズしてみます。

Stinger8 をカスタマイズする場合だけでなく、CSSを使って蛍光ペンで線を引いたような表現をしたい時に、全てのテーマやサイトで使えるテクです。

黄マーカーのCSSを調べる

WordPressでテーマをカスタマイズする場合、カスタマイズしたい要素に適用されているCSSを調べて、子テーマのCSSにカスタマイズするCSSを記述するという手順になります。

Chrome のデベロッパーツールを使用する

調べたい要素にカーソルを重ねて、右クリックで表示されるメニューから「検証」を選択するか、ブラウザの右上部にあるアイコンから「その他のツール → デベロッパーツール」を選択すると、ブラウザ右側にデベロッパーツールが表示されます。

Chromeのデベロッパーツール

デベロッパーツールにHTMLとCSSが表示されるので、HTMLで任意の箇所を選択すると、適用されているCSSを確認することができます。

黄マーカーのデフォルトCSS

単純に背景色にイエローを設定しているだけです。
マーカーで引いた下線のようにしたいので少しイメージが違いますし、色も若干変更しようと思います。

黄色いマーカーサンプル

黄マーカーのCSSをカスタマイズする

CSS の linear-gradient を使用する

linear-gradient は元々グラデーションを描画するCSSですが、グラデーションの開始位置から50%までを透明色で塗り、残りの50%を指定した色で塗る設定にしているので、結果的に下線を引いたような見た目になります。

黄色いマーカーサンプル

値を変更して色と線幅を調整する

グラデの終了位置と開始位置とカラーを変更すれば、カンタンに下線の太さと色を変える事ができます。

ピンクのマーカーサンプル

ブルーのマーカーサンプル

まとめ

CSSでカスタマイズする事で、デフォルトの黄マーカーよりも蛍光ペンの雰囲気を出せたと思います。
今回の linear-gradient のように通常と違ったCSSの使い方を勉強できたり、デザイン的な細かい部分をこだわって調整するのも、WordPressのテーマカスタマイズの楽しみの一つですね。

CSSで蛍光ペンで引いたような下線を作る方法【Stinger8の場合】でした。

created by Rinker
¥3,386 (2020/09/21 23:25:28時点 Amazon調べ-詳細)






Stinger8 の黄マーカーをCSSで蛍光ペンで引いたような下線にカスタマイズする方法