CSSを使用してテキストを画像に置き換える/画像を別の画像に置き換える

テキストを画像に置き換えたり、画像を別の画像に置き換えたい場合は、CSSで試してみてください。 以下の例を参考に、状況に合わせて応用してください。

画像を別の画像に置き換える（画像を別の画像に置き換える）

HTMLの例：

CSSの例：

#Image { width:100px; height:100px; background:url("image.png") no-repeat; }

もう少し洗練された方法で、次のようなコードを試してみることができます（出典： css-tricks).

.banner { display: block; -moz-box-sizing: border-box; box-sizing：border-box; background: url(http://www.abc.com/newbanner.png) no-repeat; 幅：180ピクセル。 / *新しい画像の幅* / height：236ピクセル。 / *新しい画像の高さ* / padding-left：180ピクセル。 /*新しい画像の幅と同じように*/}

テキストを画像に置き換える

HTMLの例：

隠すテキスト

CSSの例：

.show-image { width: 40px; height: 40px; background: url(../images/my-title-image.png); } .hide-text { text-indent: 100%; / *ウィンドウから移動する* / white-space：nowrap; /* 戻らないようにする */ overflow: hidden;

この方法は、Zeldmanという人が発見した洗練された方法とね（ここ を参照）。

jQueryを使用してテキストを画像に置き換える

jQueryを使用してテキストを画像に簡単に置き換えることができます。 例：

$().ready(function () {
    $('.imageSwitch').each(function () {
        string = $(this).text('MENU');
        $(this).html('<img src="YOUR_IMAGE_LOCATION/NAME.png" alt="' + string + '" />');
    });
});

jQueryではなくJavaScriptを使用する方が望ましいです。 JavaScriptを使用する方法については、Googleで適切な方法を選択できます。 例：

function replace() {
  var el = document.getElementsByClassName('YellowTxt')[0]
  el.innerHTML = '<img src="" alt="image"/>'
}

//출처: https://stackoverflow.com/questions/56361199/replace-text-with-an-image-in-javascript

WordPressにカスタムCSSコードを追加する方法

WordPressにカスタムCSSコード WordPress 管理ページ>外観>カスタマイズ>追加CSSに追加することができます。

• WordPressからカスタムCSSを追加する方法

参照

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