WordPressで蛍光マーカーのような下線をCSSで設定する方法

WordPressで、蛍光マーカーのような下線をCSSで設定する方法です。

単に文字色を変えるだけでは得られない、強調効果を得ることができます。

設定の手順は下記のとおりです。

１．蛍光マーカーのような背景画像を作成します

サイズは適当でよいのですが、便宜上、高さ20px、幅32pxのgif画像を作成します。

蛍光マーカーの色を決め、キャンバスの下から6pxだけ、塗りつぶします。上の14px部分は透過にしておきます。

下記に代表的な色の蛍光マーカーの画像を用意しましたので、右クリックで保存し、ご自由に保存してお使いください。

#ffff66
#ffcc66
#ff9966
#ff6666
#ff6699
#ff66cc
#ff66ff
#cc66ff
#9966ff
#6666ff
#6699ff
#66ccff
#66ffff
#66ffcc
#66ff99
#66ff66
#99ff66

場所はどこでも良いのですが、便宜上、Wordpressのテーマファイルの配下にでも保存しておきます。

今回は、<strong>タグで囲んだ文字列に蛍光マーカーの下線が付加されるようにします。

テーマファイルの中の、style.cssを編集し、strongの項目を以下のように書き換えます。

strong {
  /*font-weight: bold;*/
  background-image: url("http://*****/marker-1.gif");
}

これで、<strong>タグで囲んだ文字列には、蛍光マーカーの背景画像が表示されるようになりました。