WordPressのプラグインやメールフォームの使用時、
「こういう表記にしたいけど、HTMLで変えられないんだよな」ってことありませんか？
HTMLで変えられないなら、CSSでやっちゃえばいいじゃない。
というわけで、今回は「CSSでタグ内のテキストを書き換える方法」をご紹介します。
書き換えたい部分を疑似要素で書き換える
HTML
[xml]
<p class="login-username">
<label for="user_login">ユーザー名またはメールアドレス</label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" />
</p>
[/xml]
<p class="login-username">
<label for="user_login">ユーザー名またはメールアドレス</label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" />
</p>
[/xml]
WordPressのログインフォームを使用すると、こんな感じになると思います。
このままだとラベルの部分が長くて、レイアウトが変になってしまうこともあります。
そこで、ラベルの要素のフォントサイズを0にして、
:beforeで表示したいテキストとテキストサイズを指定します。
CSS
[css]
.login-username label{
font-size:0;
}
.login-username label{
font-size:0;
}
.login-username label:before{
font-size: 12px;
content:"ユーザー名";
}
[/css]
RESULT
HTML側から変更できない場合に便利です。
ぜひお試しください！
1980年6月生まれ。
秋田県在住。
地元のIT関連会社や市の機関でweb制作に携わり、2011年1月にフリーランスに。現在は子育てしながら日々業務にあたっています。