ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2021年10月21日| 4のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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でテキストを置換することが可能です。 この状況で最も適切な方法を探して適用することが重要と思われる。

メモ:



4のコメント

コメント

  1. こんにちは。 「自然愛協会」無料テーマを使ってホームページを作っています。 現在のテーマ構造上、ホームページの最初の画面に機関名をテキストでしか入れることができません。 ロゴを入れるためにこれから探していた車にこの文を発見しました。
    「管理者ページ - テーマ - ユーザー定義する」に入ってみると、ユーザー追加のCSSがあり、以下のようにコードを入れましたが、何の変更もありません。 もし助けてもらえますか?

    #navbar-brand m-0 a {
    表示ブロック;
    高さ:130px。
    幅:500px。
    パディング:0px。
    margin-left:6px。
    outline:none;
    テキストインデント:-9999px;
    background-image:url('https://ecocivkorea.org/wp-content/uploads/2022/05/生態文明院-ロゴ.png'); background-position:0 0;
    }

    応答
    • テキストを画像に変更したい場合は、次の記事を参照してください。

      https://www.thewordcracker.com/miscellaneous/replace-text-with-an-image-or-an-image-with-another-image-css/

      応答
  2. サイトのタイトルを本来のサイト名とは異なる見えるように変えたいのですが

    / *ホームページのタイトルを変更する* /
    #post-2 .entry-title {
    可視性:隠されています。
    線高さ:0;
    }
    #post-2 .entry-title:before {
    可視性:可視性;
    content:「サイトを訪問していただきありがとうございます!」;
    line-height:1.2em;
    }

    これはどこ付さか

    応答
    • サイトのアドレスがどうなりますか? そして使用するテーマは何ですか?
      私は一度見てサイトのタイトル部分を別の方法で変えることができる方法があるかチェックしてみましょう。

      応答