23
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CSSでテキストを書き換える方法

Last updated at Posted at 2016-12-05

#CSSでテキストを書き換える方法

下記のコードを参考にしてください。
まず書き換えたい要素のfont-sizeを0に設定します。
次に書き換え後の文字列を疑似要素で作成し、そちらはfont-sizeを任意の値に設定してください。以上です。
サーバーサイドのプログラムを変更せずに、表示されるテキストだけ変えたいときにおすすめです。
SEOには書き換え前のテキストの内容しか反映されないと思いますので注意です。

source.html
<html>
<head>
<style type="text/css">
<!--
p {font-size:0;}
p:before {font-size: 12px; content: "かきくけこ";}
-->
</style>
</head>
<body>
<p>あいうえお</p>
</body>
</html>

表示結果
かきくけこ

23
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?