TCDのテーマANTHEMの商品詳細ページ作成用解説 図解付き

TCDのテーマANTHEMの商品ページの作成の仕方を
見取り図付き解説しています。
ANTHEMを使ってみた感想を知りたい方は
こちらの記事をどうぞ。

 

 

解説しています、と書いてますが
ほぼ自分用です(笑)
そもそもANTHEMには下の図のような
購入者専用の取扱い説明のページがあります。

 

ANTHEMはダウンロードした人専用の解説ページがある

このページも図解付きで説明してあるので
説明記事なんていらないのですが
この商品ページは機能や表示の仕方が
いろんなバリエーションがあるのと
度々使いそうなので
自分の確認用で作ることにしました。

ANTHEMのデモサイトの
ヘッダーカテゴリー『テーマ』の中にある
CUREのページを見本にして説明しています。
ただ一部自分の休眠サイトにテーマを
インストールして作りました。

ちなみに図解して一番の収穫は
使わなくて良い機能が
はっきりしたことだったりします(笑)
あくまで私の場合ですが。

 

 

 

 

TCDテーマANTHEM 商品ページ作成用 図解付き解説

最初に図解を載せます。
慣れてくれば前回作業時から時間が経って
商品ページを作成することになっても
ここを確認するだけで作業できます。

ヘッダー及び上部 固定コンテンツ

上から順に設定で問題ないです。

初見殺しの設定としては
・アイキャッチ画像にいれた画像はヘッダーのぼかしになる
・ヘッダー画像の推奨サイズ500ピクセル×500ピクセルは
デモサイトのように使うイメージで
ヘッダー画像でまるまるのスペースを埋めるイメージではない
です。

 

 

TCDテーマANTHEM 商品ページ作成用 図解付き解説

サイドコンテンツ 

デモサイトだと
『外観』で設定する箇所と
『商品ページ』の『サイドコンテンツ』で設定する箇所があります。

こちらは『外観』→『ウィジェット』

 

TCDテーマANTHEM 商品ページ作成用 図解付き解説

こちらは『商品詳細ページ』の『サイドコンテンツ』

 

TCDテーマANTHEM 商品ページ作成用 図解付き解説

 

コンテンツビルダー 『特徴一覧』

ここからは配置を自由に設定できる
『メインコンテンツ』のコンテンツビルダーです。

『特徴一覧』『レビュー』『フリースペース』があって
こんな感じに目的にあったコンテンツ選びます。

 

フリーコンテンツ 『特徴』

『フリースペース』はブログ記事のデザインで使える機能なので
特に図解するほどではないので
『特徴一覧』『レビュー』だけ図解します。

まずは『特徴一覧』(ここはちょっとややこしいので後で解説いれます)

 

コンテンツビルダー 『特徴一覧』

 

コンテンツビルダー 『レビュー』

次にレビューです。
こっちはシンプルです。

 

コンテンツビルダー 『レビュー』

 

商品詳細ページ フッター部分

商品詳細ページではなく
TCDテーマの商品欄から設定します。
なので全ての商品詳細ページ共通になります。

 

コンテンツビルダー 『レビュー』

 

さらにその下の部分は『TCD』→『フッター』で設定になります。

特に難しくないので割愛。

 

コンテンツビルダー 『レビュー』

 

以上で図解は終了です。

コンテンツビルダー 特徴一覧の解説

コンテンツビルダー 『特徴一覧』

ここは解説いれます。
⑲と⑳なんですが
別々に『新しいコンテンツ』を作成して
デモサイトのように表示させるために
それぞれ『説明文』と『画像』を設定すると
上の図のようになります。

図解するとこういうことです。

 

コンテンツビルダー 特徴一覧の解説

追記 

上のデモサイトの表示ですが
⑲は『特徴一覧』の『説明文』で作成
⑳の画像は『フリースペース』で『画像』いれた方が良いですね。
この後で書きますが
『特徴一覧』の『画像』は
推奨サイズが128×128なのでちょっと使いにくいので。

同一コンテンツに『説明文』と『画像』をいれると?

デモサイトでいうこの部分が
同一コンテンツに『画像』と『説明文』をいれて作ってあります。

 

 

同一コンテンツに『説明文』と『画像』をいれると?

簡単に別パターンで図解しますね。

画像は推奨サイズよりだいぶ大きめの
正方形のもを使用しました。

 

コンテンツビルダー 特徴一覧の解説

『1列で表示する』を選ぶと
文章が下に来ます。

 

コンテンツビルダー 特徴一覧の解説

画像の部分に縦長の画像をいれると
下の図のように表示されます。
(ちょっと左にずれました)

デモサイト⑲の画像を
特徴一覧の画像で表示させたとしたら
この方法になります。

 

コンテンツビルダー 特徴一覧の解説

 

ちなみにこの状態で画像を
横長の大きいサイズ、
1920×1280を貼るとこうなります。

 

コンテンツビルダー 特徴一覧の解説

 

色々試してみた結果
コンテンツビルダーの『特徴一覧』は
相当限定的な使い方で良いです。
『フリースペース』を使った方が
よっぽど使いやすいのです。
デモサイトの仕様で使う以外は
利用する必要のない機能かもしれません。

 

 

 

おすすめの記事