CSSを使用してテキストを変更する

HTMLやPHPファイルを直接変更せずに、サイトのタイトル、記事タイトル、またはその他のフレーズを変えなければならない状況でCSSを使用することができます。 CSS仮想要素（Pseudo-element）を使用して訪問者に表示されるフレーズを変更することができます。 （参考までにCSSを使用した場合、HTMLやPHPのソースファイルからフレーズを直接変えることがないので、ソースの表示では、本来フレーズがそのまま露出されます。）

CSSを使用してテキストを変更する

仮想要素とvisibility使用

いくつかの方法がありますが、仮想要素とvisibilityを使用することが一般的な方法です。

/* 홈 페이지 타이틀 변경하기 */
#post-2 .entry-title {
visibility: hidden;
line-height: 0;
}
#post-2 .entry-title:before {
visibility: visible;
content: '사이트를 방문해주셔서 감사합니다!';
line-height: 1.2em;
}

上記のコードは、コンパクトなデバイスを勘案してline-heightの値を使用した例です（参照).

display：noneを使用

別の方法としてdisplay：noneを使用することです。 上記のvisibility：hiddenを使用したdisplay：noneは、visibility：hiddenと似ていますが、違いがあります。

display：noneとvisibility：hiddenの違い（参照):

• display：noneは、ページでそのタグが完全に表示されないことが、他のタグの間に割り当てられていたスペースにも消えてしまいます。
• visibility：hiddenは、そのタグが見えないが、割り当てられたスペースはそのまま残っています。

次のように処理することを考えてみることができます。

.text {
display: none;
}

.text:after {
display: block;
content: "본래 문구를 대체하는 텍스트";
}

よくないと、afterの代わりにbeforeを使ってみます。

テキスト文字のサイズを変更して、テキスト置換する

別の方法として、本来のテキストの文字サイズ（font-size）を0にして見えないように作成し、仮想要素を使用して、新しいテキストを追加することです。 この方法を使用して WordPress フッターの著作権フレーズを変更する方法はこの記事で説明されています。

例：

.text {
font-size: 0px;
}

.text:before {
content: "새로운 텍스트";
font-size: 11px;
display: block;
}

text-indent使用

インターネットを検索してみると、多くの場合、text-indentを使用してテキストを非表示にする方法が紹介されたことを見ることができます。 WordPressテキストメニュー項目を画像に変えるときにもこの方法を使用できます。 indent は通常「インデント」と解釈されます。 ここでtext-indentをテストすることができます。

.title {
text-indent: -999px;
}
.title:after {
text-indent: 0px;
float: left;
content: '새로운 문구';
}

上記のようにtext-indent：-999pxを使用すると、本来あったテキストが左に999pxだけ移動します。 （もし完全に移動しない場合の数値を上げると、移動している場合もありますね。）

いくつかの方法でソースを変更せずにCSSでテキストを置換することが可能です。 この状況で最も適切な方法を探して適用することが重要と思われる。

メモ：

• WordPressユーザーCSSを追加する
• WordPressテキストメニュー項目を画像に変更する