AFFINGER6・コードエディタ用の商品表示テンプレート【アマゾンや楽天市場の商品紹介】

当サイトはアフィリエイト広告を利用しています。

AFFINGER6で「コードエディタ」を使っている時に、使える商品紹介用のテンプレートです。

楽天やアマゾンの画像・テキスト広告を貼り付けて使います。

※特定のEC商品のみを紹介したい場合に便利です。

商品紹介用のテンプレート

テンプレートは「CSS」と「HTMLコード」の2つからなっています。

プラグインで「Font Awesome」も使っています。

設定するCSS

CSSは、「外観」＞「カスタマイズ」＞「追加CSS」にコピペします。

.table-ad {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}
.table-ad tr td.pictureimg {
  width:30%;
}
@media print, screen and (max-width: 599px) {
  .table-ad tr td {
    display:block;
  }
  .table-ad tr td.pictureimg {
    width:100%;
    text-align: center;
  }
}
.table-ad tr td {
  border:none;
}
.table-ad tr td ul {
  padding-left:0;
  margin-left:0;
}
.table-ad tr td ul li {
  list-style: none;
}
.table-ad tr td ul li.title {
  padding-top:0px;
  font-weight:bold;
  font-size:17px;
}
.table-ad tr td ul li.title a {
  text-decoration: none;
}
.table-ad tr td ul li.company,
.table-ad tr td ul li.price {
  font-size:0.9em;
  color:#999;
}
.table-ad tr td ul li.link,
.table-ad tr td ul li.link-rakuten,
.table-ad tr td ul li.link-amazon {
  margin-top:10px;
}
.table-ad tr td ul li.link a,
.table-ad tr td ul li.link-rakuten a,
.table-ad tr td ul li.link-amazon a {
  display:block;
  line-height: 40px;
  height: 40px;
  border-radius: 20px;
  color:#fff !important;
  text-decoration: none;
  text-align: center;
  font-size:0.9em;
  box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.3);
}
.table-ad tr td ul li.link a {
  background-color: #13acaa;
}
.table-ad tr td ul li.link-rakuten a {
  background-color: #E14C46;
}
.table-ad tr td ul li.link-amazon a {
  background-color: #FF9900;
}
.table-ad tr td ul li.link a::after,
.table-ad tr td ul li.link-rakuten a::after,
.table-ad tr td ul li.link-amazon a::after {
  content: "\f138";
  font-family: FontAwesome;
  color: #FFF;
  padding-left:10px;
}

記事に貼り付けるHTMLコード

HTMLコードは、投稿記事内で、下記のコードをコピペして使います。

<table class="table-ad">

<tr>
<td class="pictureimg">ItemPictureAd</td>
<td><ul>
<li class="title">ItemTitle</li>
<li>AddCopy</li>
<li class="company">CompanyName</li>
<li class="price">Price円（Year年Month月時点）</li>
<li class="LinkFormat"><a href="ItemTextLink" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;">ECName</a></li>
</ul>

</td>
</tr>
</table>

メモ

liタグを追加すれば、項目を追加できます（上記の「AddCopy」部分）。不要なら削除してください。

何も設定せずに表示すると、下記のようなフォーマットになります。

ItemPictureAd
  • ItemTitle
  • AddCopy
  • CompanyName
  • Price円（Year年Month月時点）
  • ECName

設定する項目は下記です。

LinkFormatは、楽天とアマゾンで違うので注意してください。

項目 内容
ItemPictureAd 商品の画像リンク
・楽天広告の場合は、リンクタイプで画像のみ（300x300）のリンクコード。
・アマゾン広告の場合は、アソシエイトツールバーで画像（大）を選択した時のリンクコード。
※画像サイズはよさげなものを使ってください。
ItemTitle 商品のタイトル
※商品リンクも使えます。
AddCopy liタグを追加すれば、コピーを追加できます。不要なら削除してください。
CompanyName 商品提供企業名など
Price チェックした時の価格
※税込価格表示
Year チェックした時の年
Month チェックした時の月
LinkFormat ・楽天広告の場合は、「link-rakuten」と入力。
・アマゾン広告の場合は、「link-amazon」入力。
※どちらでもない場合は「link」も使えます。
ItemTextLink 商品の短縮URL
・楽天広告の場合は、リンクタイプで短縮URLで表示されたリンクを入力。
・アマゾン広告の場合は、アソシエイトツールバーでテキストで表示された短縮URLを入力。
ECName ・楽天広告の場合は、「楽天市場」と入力。
・アマゾン広告の場合は、「Amazon」と入力。

スマホ表示にも対応

スマホ表示では、縦一列で表示されます。

楽天商品のイメージ

楽天商品を表示させた時のイメージです。

画像サイズは、スマホを優先するなら240ｘ240くらいが見やすいです。

※LinkFormatを「link-rakuten」にすること。

  • Xiaomi Pad 5（128GB）
  • Xiaomi
  • 43,780円（税込）（2021年10月時点）
  • 楽天市場

アマゾン商品のイメージ

アマゾン商品を表示させた時のイメージです。

※LinkFormatを「link-amazon」にする。
※liタグを追加して「DL特典」の行を追加しています（上の項目AddCopy参照）。

  • 【Amazon.co.jp 限定】 配色アイデア手帖 めくって見つける新しいデザインの本「完全保存版」単行本
  • DL特典：厳選! ポケット配色アイデア手帖
  • SBクリエイティブ
  • 1,958円（税込）（2021年10月時点）
  • Amazon

A8で使うとどうなる

A8でも使えなくはないのですが、テキスト広告が長いと、スマホ表示の時にボタンからテキストがはみ出てしまいます。

基本に利用はおすすめしませんが、広告テキストを自分で作成可能であれば、使ってもいいと思います。

メモ

ItemPictureAdに、A8の画像広告タグを入力すると、改行が入ってしまうので、広告タグの改行を削除（一行表示）して、コピペしてください。

【まとめ】商品表示テンプレート

Rinkerやpochippなどは、複数のECの商品を表示するのに便利ですが、特定ECだけ表示するものが欲しかったのでテンプレートを作成しました。

CSSがわかる人なら、さらに独自に調整して使ってください。

-AFFINGER6
-