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に追加することができます。

参照

一部の記事にはアフィリエイトリンクが含まれている場合があり、パートナーの活動で一定額の手数料を受け取ることがあります。

コメントを残す

*メールアドレスは公開されません。