冬の冷え込みが段々と厳しくなってきました。通勤が辛くなってきました。サポート部の本田です。

今回は、特定の文字列を画像に置き換える方法をご案内して、実際のECサイトでどういった使い道があるかご案内したいと思います。

どんな時に使えるかというと、ECサイトなどでログインをすると”こんにちはゲストさん”という、文字やログインしている場合だと、会員の名前や会員ランクを表示されてたりすることがあります。

カートシステムなどのプラットフォームでは、ある程度画像を差し込める場所なども決まっている場合が多く、制作側で管理画面からの設定などで変更できない箇所もあります。

そんな時に、文字列を画像に置き換えることで、好きな箇所に画像表示させることで、訪れた方にちょっとしたユーモアをお届けすることができて、サイトへの愛着なんかも湧くかもしれません。

早速ご案内していきます！！

jQueryの実装

上記画像においてはゲストさんと表示されているのはカートシステムの仕様です。

今回の実装は至って簡単、jQueryの実装だけとなります。以下のjQueryを記述してください。

$(document).ready(function() {
    $('p').each(function(){
        var txt = $(this).html();
        $(this).html(
            txt.replace('ゲスト','<img src="★★★">')
        );
    });
});

ゲストと書かれているところに、置き換えたい文字列を記述し、「★★★」に画像のパスを入れます。

実際の表示

実際にサイトに適用させると以下のようになります。

ゲストの文字を画像に置き換えています。

最後に

今回は、非会員の方（＝ゲストさん）に対して置き換えを行いましたが、会員の方で会員ランクを設定している場合ですと、ランク名に応じて文字を置き換えることももちろん可能です。

自社サイトに少し手間を加えるだけで、顧客が持つ印象を変えられるので是非取り入れてみてください。

本田