テキスト入りリボンのテキストを変更する方法
今回のテンプレートには、画像に特定のタグを付加することで、画像の左上にリボン+テキストを表示できるようにしました。(カラーは6色対応)
もちろん、リンク入り画像でも機能します。追加で「詳細は画像をクリック」を表示させることもできます。
わざわざ画像を加工する必要が無い分、作業時間の短縮になりますよ。
で、こうやってデコレーションすることで、ちょっとはクリック率が上がります。
こんかい初期設定で用意したテキストは
- NEW!
- お勧め!
- 1番人気!
- 2番人気!
- 3番人気!
- 売れてます!
- 迷ったらコレ!
- 送料無料!
- シェアNo.1!
- 売れ筋No.1!
- TVで話題!
- ウェブで話題!
- 雑誌で話題!
- 1ケ月無料!
- お試しあり!
- 売上げNo.1!
- 人気沸騰中!
- ランキング1位!
- ランキング2位!
- ランキング3位!
- キャンペーン中!
の21種類です(作るのがすご~~く面倒だった)。
利用者さんによってはこのテキスト部分を変えたいですよね。
ですので、その方法を解説します。
テキストの変更方法
「俺は今時”NEW!”なんて言葉は使わん!!」と思う人が多そうなので、NEWのテキストをカスタマイズしてみましょう。
編集>スタイルシートを開いたら、
半角英数字の場合は、上記部分のテキストを変更するだけでOKです!
保存、サイト生成してスタイルシートをアップロードすればカスタマイズ完了です。
日本語の場合
半角英数字はスタイルシートにそのままの文字を書けば良いんですが、日本語表示の場合はUnicodeに変換したコードを書く場合があります。
以下に用意したツールで、表示させたい日本語文字列をUnicodeに変換してください。
入れるのは全角文字だけですのでご注意。
→
今回は試しに「超お勧め」にしてみました。
右側にUnicodeが表示されるので、コピーして、
スタイルシートに貼り付け。さぁープレビューしてみましょう。
こんな感じです。
テキストが長くなった場合、スタイルシートのwidthやtopの値をカスタマイズして調整してください。これはご自身でやってくださいね。
「詳細は画像をクリック」の部分を変更したい場合は、
上記contentの行に書いたUnicodeの文字列をカスタマイズしてください。文字列が短くなるならwidthの値を小さくすればOKです。
さぁ比較してみよう
では、デコレーションしないリンク入り画像とデコレーションした画像で比較してみましょう。
この商品は超お勧めです!!
↑なーんにもデコレーションしてない画像を掲載するとこうなります。画像下部に太字でテキストでクリックを促してますが、何か味気無いですね。
しかもテキストで促してるせいか、売り込み臭が漂ってくるような・・。日本人が嫌うタイプの訴求。
デコレーションをするとこう。
どっちをクリックしたくなりますか?ウチの奥様と65歳のスマホ使ってるお義母様に聞いたら、「断然デコレーションしてる方をクリック(タップ)する」とお答えになりました。
こういう技を駆使してクリック率を上げましょう。
タグ1個入れるだけで「リボン」と「詳細は画像をクリック」を両方表示させた方が楽でいいのかな~と思いましたが、「あえて表示させたくない」って人もいるかと思ってタグは別々にしちゃいました。
ご参考頂ければ幸いです。
【著者:マナ】
東北地方在住の専業法人アフィリエイター。やり方は楽しさと役立ちを優先したホワイトハット。趣味はバイオリンと伝統芸能活動。【運営サイト】SIRIUSアピールサイト
【twitter】 @マナ
【お問い合わせ】 フォームはこちら
※本テンプレートのカスタマイズご相談は現在ご遠慮頂いております。
※本テンプレートはプレミアム会員様向け専用でご利用頂けます。