• 楽天
  • Yahoo!

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

1202

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

本日は、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をご案内します!

黒の細線

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

グレーの太線

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

二重線

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

破線

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

白枠線

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

白枠+影

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

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

この記事を書いた人

中村 茉実

中村 茉実ディレクター

元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメント

7 件のコメント

  • ウエダ より:

    はじめまして。
    知識の宝庫であるこちらのサイトでいつも大変お世話になっております。

    「商品画像やバナーをおしゃれに並べる簡単HTMLテンプレート」(/shop_modify/3339)に枠線をつけるという組み合わせをしたいと思っています。

    その場合、どういう表記を行えばよろしいのしょうか。
    共通説明文に反映させたく試みたのですが、どうしても枠線がついてくれません。
    ご教示いただけますと幸いです。

    • 中村 茉実 中村 茉実 より:

      ウエダさま

      お世話になります!記事をご参考くださり有難うございます^^ 中村です!
      『「商品画像やバナーをおしゃれに並べる簡単HTMLテンプレート」』と組み合わせる場合、
      ↑の記事側にあるHTMLテンプレート内を書き替える形になります。

      以下が書き替える場所です。

      #my_panel img{
      vertical-align: bottom;
      border:none;
      width:100%;
      transition: all .2s ease;
      }

      書き替えると、こんな感じになります。(「border」の所を書き替えました)

      #my_panel img{
      vertical-align: bottom;
      border: 1px solid #111;
      width:100%;
      transition: all .2s ease;
      }

      お手数ですが、上記HTMLをお試しくださいませ!
      よろしくお願いいたします。

  • ウエダ より:

    ↓現在、共通説明文に記入している表記↓

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










  • ウエダ より:

    現在、共通説明文に記入している表記、ごめんなさい、うまく反映できなかったです。。

  • ウエダ より:

    ご返信が遅れ申し訳ございません。
    なぜか枠線が反映されない箇所も一部ございますが、無事にできました!
    本当にありがとうございましたm(__)m

    • 中村 茉実 中村 茉実 より:

      > ウエダさま

      とり急ぎ反映はできたとの事良かったです!
      枠線の件は大丈夫そうでしょうか??
      自己解決が難しそうであれば仰ってください。今後も宜しくお願いします。

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。