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>

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

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

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

スマホ表示にも対応

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

楽天商品のイメージ

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

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

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

アマゾン商品のイメージ

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

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

A8で使うとどうなる

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

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

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

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

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