【簡単に文字変更】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を確認してみてください。