今回は、HTMLのソースを変更することなくCSSだけでページ上のテキストを書き換える方法について紹介します。
これだけ聞くと「なんでそんな回りくどいことする必要があるの？」と思われるかもしれませんが、ワードプレス等のCMSを利用して作成されたサイトでは、簡単にはHTMLソースを編集できないケースがあります。
例えば、変更したいテキストがテーマやプラグインのファイル内に記述されていたり、もしくはプログラムで出力されていたりした場合ですね。
基本的にプログラムが施されたようなファイルについて、機能を完全に理解できない状態で手を加えるのは避けた方が無難です。
最悪の場合、サイトを表示することができなくなってしまいます。
こういった場合に最も安全な変更の仕方としては、CSSでテキストを書き換えてしまうことでしょう。
勿論、これは決して美しい方法ではありませんが、変更後のリスクやその把握に関する調査時間などを考慮するとひとつの選択肢ではあります。
記述例
HTML
<p class="sample-text">あいうえお</p>
例えば上記のようなHTMLソースがあるとします。
ソースを把握していないワードプレスのテーマでも、ブラウザの「要素を調査」等の機能を使えば該当する記述部分はすぐに発見することができます。
CSS
.sample-text {
font-size:0;
}
.sample-text:before {
font-size:14px;
content:'かきくけこ';
}
該当するテキストが記述された要素のクラス名を指定して、まずはフォントサイズを0に指定することでテキストを消します。
次に:beforeの疑似クラスを使用し、変更後のテキストを設定します。
フォントサイズは0に指定されているので、ここでフォントサイズを再指定する必要があります。
まとめ
ワードプレスの場合は、カスタマイズ機能の追加CSSで設定すれば手軽に書き換えることが可能です。
テーマ更新の際の保守も楽ですので、テキストの書き換えでお悩みの方は試してみて頂ければと思います。