【簡単に文字変更】CSSだけで文字列を置換する方法

CSSで文字列を置換する方法
今回は、CSSを使って文字列を置換する方法をご紹介します。
HTMLをすぐに書き換えができる場合は必要ないのですが、wordpressでプラグインを使用している時、どうしても特定の部分のみ文字列を変換したい、という時に役に立つので、おすすめです。
wordpressのプラグインは、それ自体が複雑な仕様のものも多く、文字列を変更したくても場所を探すだけで時間がかかったり、元々英語の場合は翻訳機能を編集する必要があったり、何かと手間がかかる場合も多いです。
文字を変えたいのに、どこを編集すればいいのかわからない、時間をなるべくかけたくない、という方にはオススメです。
それでは、書き方をご紹介していきます。
全体の流れ
全体の流れはこの様になります。
・指定したクラスの文字列を消す
↓
・指定のクラスの擬似要素に、テキストを追加
↓
・置換が完了
という流れになります。
それでは、一つずつ見ていきます。

まずはCSSで文字を消す
まず初めに特定の変更したい文字列を消します。
今回は、この様なHTMLのテキストがあるとします。
<p class="sample">
サンプルテキスト
</p>
これをCSSでまずは消します。
.sample{
font-size:0;
}
続いて、置換したい文字を追加していきます。
擬似要素にテキストを追加する
それでは次に擬似要素にもテキストを追加します。
擬似要素、と言えばbefore、afterなどになります。
.sample:before{
}
ここに、contentでテキストを追加します。
.sample:before{
content:'新しいテキスト';
}
この様になります。
あとは、適切なフォントサイズや、文字色を指定すれば完了です。
.sample:before{
content:'新しいテキスト';
font-size:10px;
color:black;
}
この様になります。
これで、
”サンプルテキスト”
という文字列が
”新しいテキスト”
に置換が完了されます。
テキストが変更されない、表示されない時は
今回ご紹介した方法で、 非常に簡単に変更が可能なのですが、
注意したい点が一つだけあります。
変更後の文字サイズは、理由はよくわかっていないのですが、pxでfont-zie指定する必要があり、emで指定した所表示されないという現象が起こります。
もし、疑似要素に表示されるはずのテキストが表示されない、上手く変更ができないという時はこちらfont-sizeを確認してみてください。
コメントを残す