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

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

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

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

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

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

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

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

CSSで引く蛍光マーカーの下線1#ffff66
CSSで引く蛍光マーカーの下線2#ffcc66
CSSで引く蛍光マーカーの下線3#ff9966
CSSで引く蛍光マーカーの下線4#ff6666
CSSで引く蛍光マーカーの下線5#ff6699
CSSで引く蛍光マーカーの下線6#ff66cc
CSSで引く蛍光マーカーの下線7#ff66ff
CSSで引く蛍光マーカーの下線8#cc66ff
CSSで引く蛍光マーカーの下線9#9966ff
CSSで引く蛍光マーカーの下線10#6666ff
CSSで引く蛍光マーカーの下線11#6699ff
CSSで引く蛍光マーカーの下線12#66ccff
CSSで引く蛍光マーカーの下線13#66ffff
CSSで引く蛍光マーカーの下線14#66ffcc
CSSで引く蛍光マーカーの下線15#66ff99
CSSで引く蛍光マーカーの下線16#66ff66
CSSで引く蛍光マーカーの下線17#99ff66

2.蛍光マーカー画像をアップロードします

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

3.テーマファイルのstyle.cssを編集します

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

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

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

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

コメント

  1. […] WordPressで蛍光マーカーのような下線をCSSで設定する方法 | MacRuby http://150.95.149.229/wordpress/wordpress-highlight-marker-css.html […]