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の場合】でした。


プロとして恥ずかしくない 新・CSSデザインの大原則

CSSのルールと手法を根本から身につける。
CSSの基本文法から、各プロパティの詳細、迷いやすいCSSによる配置の仕組みまで、初心者の方に必要な基礎的な情報を網羅している書籍で、ベースとなる基礎知識と実際のコードをあわせて学ぶことで、現場で役立つCSSの総合的な実力を養える一冊です。







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