フリーランス・個人事業主として独立を目指すデザイナー、副業を始めたいデザイナーを応援します! 自立支援に役立つ初心者向けWordPress情報も随時アップします!

CSSを使ってテキストを置き換える方法

読了目安時間は約 2 分です。

WordPressで、カスタマイザーでは変更できないテキストに対して「変更してほしい」とクライアント様からご要望があり、CSSで簡単に対応したときのことを備忘録的にまとめます。

CSSだけでテキストを書き換えることはできないかな?と思ってやってみました。コーディングはCSSだけ!という方にはオススメです。

「サンプル」という文字を「さんぷる」に置き換えてみます。

HTML

<div class="sample">
<p> サンプル </p>
</div>

CSS

.sample p{
display:none;
}
.sample:before{
content: "さんぷる";
}​
p{display:none;}で置換前のテキストを消してしまい、:before{content:"○○○";}​で置換したテキストを表示させます。

少々強引ですが、カンタンにテキストを変更したい場合に使ってみてください。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる