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

こんにちは。「それはストリートだね～」と言われる夢を見たオガリア中村です。

本日は、CSSを使って画像に「枠線」をつける簡単コピペテンプレートをご紹介します。
共通の枠線をつけることで画像に統一感が出てパキッとしますし、CSSを利用すれば一枚ずつ画像加工をしなくても枠線がつけられるので手間も省けまっす。

基本的な書き方

枠線は、「リンク画像を表示させるHTMLタグ」と「枠線をつけるCSS」のセットで表示されます。それぞれ基本的な書き方をご説明します。

リンク画像を表示させるHTMLタグ

リンク画像を表示させるAタグ・IMGタグはこの様な書き方をします。「class=”border”」というのが、枠線をつける画像の目印です。

<a href="リンク先URL" class="border">
<img src="画像のURL" />
</a>

枠線をつけるCSS

枠線をつけるCSSの基本的な書き方は以下になります。「(ここに各枠線の記述をコピペ)」箇所を、お好きな枠線の記述に書き換えます。このCSSは、全ページに表示される箇所(ヘッダーやレフトナビ等)へ貼り付けます。

※画像の枚数だけ貼り付ける必要はありません。共通箇所に一個だけ貼り付ければ、OK。

<style type="text/css">
<!--
(ここに各枠線の記述をコピペ)
-->
</style>

こんな枠線ができます

それぞれ、プレビュー画像と専用のCSSをご案内します！

黒の細線

.border img {
  border: 1px solid #111;
}

グレーの太線

.border img {
  border: 3px solid #ddd;
}

二重線

.border img {
  border: 4px double #666;
}

破線

.border img {
  border: 1px dashed #666;
}

白枠線

.border {
  box-sizing: border-box;
  display: inline-block;
  padding: 6px;
  border: 1px solid #ccc;
  background: #fff;
}

白枠＋影

.border {
  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);
}

いかがでしょー！簡単じゃないですか？ページ作成の参考になればこれ幸いです。では！