WP Associate Post Amazonアソシエイト・楽天アフィリエイトかんたん導入プラグイン

6種類のテンプレートタイプと5種類のデザインスキン

WPアソシエイトポストでは、広告コード貼り付け時に6種類の「テンプレートタイプ」から選んで設置することができます。
また、デザインは初期設定で5種類の「デザインスキン(CSS)」が同梱されています。

6種類のテンプレートタイプ(※Amazonと楽天を同一枠表示する「with機能」は3種類のテンプレート)

type_0

  1. 標準【デザイン共通】
  2. 画像・テキスト(横)
  3. 画像・テキスト(縦)
  4. 画像のみ(※)
  5. テキストのみ(※)
  6. カスタム(※)

※「with機能」にはありません。

1. 標準【デザイン共通】

「標準【デザイン共通】」は以下の6つの要素を表示するテンプレートタイプです。

表示される要素
  • 商品画像
  • 商品名
  • 著者名やアーティスト名(※取得できる商品カテゴリの場合のみ)
  • 値段
  • 情報取得日時
  • Amazonまたは楽天の名称

type_1

汎用的に使いやすくするため、「標準」タイプは同梱されている後述の5種類のデザインスキンのどれを選んでも同じデザインになります。

2. 画像・テキスト(横)

商品画像と商品名のみをシンプルに横並びで表示するタイプです。

type_2

PCでの閲覧者が多いサイトなどにオススメです。
横幅が狭い閲覧環境の場合は、商品名が回り込みます。

3. 画像・テキスト(縦)

商品画像と商品名のみをセンター揃えで縦並びに表示するタイプです。

type_3

スマホでの閲覧者が多いサイトなどにオススメです。

4. 画像のみ

商品画像のみをセンター揃えで表示するタイプです。

type_4

金額や商品名などはその他の情報は自分で記載したい時に向いています。

5. テキストのみ

商品名のみを表示するタイプです。

type_5

商品名のみを表示するタイプです。

6. カスタム

自由にカスタマイズして使えるテンプレートタイプです。

type_6

初期設定では「1. 標準」と同じコードが記載されているので同じ見た目になります。

カスタムテンプレートの詳しい使い方はこちら

同梱されている5種類のデザインスキン(CSS)

skin_0

最初から同梱されているデザインスキンは、以下の5種類です。

  1. スタンダード(skin-standard.css)
  2. スクエア(skin-square.css)
  3. 円(skin-circle.css)
  4. 曲線(skin-weave.css)
  5. 影(skin-shadow.css)

上記それぞれ、どのように表示されるかの一例を紹介していきます。
以下、スマートフォンでの閲覧を想定したキャプチャを用意しました。

1. スタンダード(skin-standard.css)

どんなブログデザインでもお使いいただけるよう、装飾を抑えたシンプルなデザインのスキンです。

skin_1

2. スクエア(skin-square.css)

商品画像を縦横の中心から真四角で切り抜いて表示します。
商品画像の見えない部分がチラリズム的効果を生み出し、クリック率向上が見込まれます。

skin_2

※スクエア(skin-square.css)は、PCのInternetExplorerやEdgeブラウザで閲覧した場合、仕様上、以下のように画像の切り抜き箇所が他ブラウザと異なって見えます。
※2017年5月にリリースしたVersion2.0で、InternetExplorerとEdgeも他のブラウザ同様に表示されるよう対応しました。

3. 円(skin-circle.css)

商品画像を縦横の中心から円で切り抜いて表示します。
スクエアと同様のチラリズム的効果と、丸みにより優しい印象になるのが特徴です。

skin_3

※円(skin-circle.css)は、PCのInternetExplorerやEdgeブラウザで閲覧した場合、仕様上、以下のように画像の切り抜き箇所が他ブラウザと異なって見えます。
※2017年5月にリリースしたVersion2.0で、InternetExplorerとEdgeも他のブラウザ同様に表示されるよう対応しました。

4. 曲線(skin-weave.css)

商品画像に曲線を付けて表示します。
独特の「謎感」がでるため、通常のブログデザインにマッチさせるのは少し難しいですが、斬新さを求めている場合や奇抜なブログデザインに利用するといいかもしれません。

skin_4

5. 影(skin-shadow.css)

商品画像に丸みおよび影を付けて表示します。
悪目立ちしすぎず、スタイリッシュに見えるため人気のあるデザインスキンです。

skin_5

上記はデフォルトで用意されている5種類です。
デザインスキンはご自身で独自のものをいくつでも作成・読み込みも可能です。

独自に作成したスキンの設置・反映方法はこちら

トップページに戻る