【Yahoo!版】画像に枠線装飾するコピペTips! 商品画像に統一感を出しましょう！

こんにちは。春巻きの衣に包まれて死にたい、オガリア中村です。

本日は前回ご紹介した、楽天ショップ様向けの『画像へ枠線をつける方法』をYahoo!ストア様向けにカスタマイズしてみましたよー！好きな枠線を選んで、コピペで今すぐ実装できます。

⇒楽天版はこちら

基本的な書き方

基本的にはこんな感じになっています。

<a href="リンク先URL">
<img src="" style="ほにゃらら">
</a>

「style=”ほにゃらら”」の部分が、枠線ごとに異なるイメージです。

楽天RMSと異なり、Yahoo!ストアクリエイターでは一括で枠線をつける事はできません(使用できるタグが制限されている為)。。画像を表示するIMGタグ一つひとつにCSSを書き込んでいく必要があります。うーん、ストアクリエイターよ。

でもコピペするだけなのでぜひお試しを。次の枠線一覧からお好きな枠線を選んで、タグをコピペして使ってくださいませー。

こんな枠線ができます

黒の細線

<a href="リンク先URL">
<img src="画像のURL" style="border: 1px solid #111;">
</a>

グレーの太線

<a href="リンク先URL">
<img src="画像のURL" style="border: 3px solid #ddd;">
</a>

二重線

<a href="リンク先URL">
<img src="画像のURL" style="border: 4px double #666;">
</a>

破線

<a href="リンク先URL">
<img src="画像のURL" style="border: 1px dashed #666;">
</a>

白枠線

<a href="リンク先URL" style="box-sizing: border-box; display: inline-block; padding: 6px; border: 1px solid #ccc; background: #fff;">
<img src="画像のURL" >
</a>

白枠＋影

<a href="リンク先URL" style="box-sizing: border-box; display: inline-block; padding: 6px; border: 1px solid #ccc; background: #fff; box-shadow: 1px 1px 5px rgba(20,20,20,0.2);">
<img src="画像のURL" >
</a>

　

前回も書きましたが、画像に共通した枠線をつける事で全体の統一感が増しますので、お店らしさをより出すのにオススメです。分からない所があればコメントくださいませー！ではでは。