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

WordPressで蛍光マーカーのような下線をCSSで設定する方法” への1件のコメント

  1. ピンバック: cssや画像を使って作る – 蛍光ペンでマーカーを引いたような効果 | PlusTrick

コメントを残す

メールアドレスが公開されることはありません。