ITOBEN STYLE > EC-CUBE3 > EC-CUBE3機能カスタマイズ版:特集ページ(ランディングページ)作成機能 2016年8月27日カテゴリー: EC-CUBE3 EC-CUBE3機能カスタマイズ版:特集ページ(ランディングページ)作成機能 この記事の関連ページ ■EC-CUBE3機能カスタマイズ版 インストールと同時にデザインとカスタマイズ機能が実装されるのでサイト構築作業を大幅に短縮できます。 ■デモサイト インストール後、このようなサイトが立ち上がります。 ■EC-CUBE3機能カスタマイズ版の機能内容 各機能についてこのページで解説しています。 ■EC-CUBE3インストールガイド 特集ページ(ランディングページ)作成機能 コンテンツ管理 > 特集ページ(LP)管理 「特集ページ(LP)を新規入力」をクリック ▼タイトル ブラウザ上部に表示されるページタイトルを設定 ▼URL名 半角英数字を使用。URLは下記のようになります。 http://○○○.com/lp?name=URL名 ▼カノニカルタグ ページのソースに反映されます。 ▼Auther・Description・Keywords ページのソースに反映されます。 [Auther][Description][Keywords]が空欄の場合は、 コンテンツ管理>ページ管理>特集ページ(LP)>ページ編集の、 meta設定が反映されます。 ▼画像 幅を968pxにすると、1カラム表示の場合にピッタリ収まります。968pxを超えても構いませんが、縮小して表示されることになるので、見た目で質が落ちる場合があります。 高さは任意です。 ▼イメージマップ 画像にイメージマップを設定することができます。 <map name=”***”></map>は不要です。 <area shape=”***” href=”***” alt=”***”>を入力。 レスポンシブに対応しているので、スマホ画面でもエリアがずれることはありません。 ▼コンテンツ TinyMCE(WYSIWYG)を利用して作成します。 画像入力については「14 商品一覧ページ(カテゴリ)にテキストエリアを追加」をご覧ください。 ▼YouTube YouTube動画を表示することができます。 ▼商品一覧タイトル 商品一覧の上に表示されるタイトルを設定します。 ▼商品登録 商品は20点まで登録できます。商品IDを入力してください。 商品画像をクリックすると、商品詳細ページに遷移します。 商品IDは、(1)から順に入力してください。途中を空欄にしないでください。 (1)から詰めて入力しないとレイアウトが崩れます。 商品1点~3点:1列で表示され「商品説明」が表示されます。 商品4点:4列横並びで表示され「商品説明」は非表示。 商品5点以上:5列横並びで表示され「商品説明」は非表示。 上図は、すべての入力欄に入力した状態です。 商品は10点登録しています。 ページのソース FacebookのOGPにも反映されます。 og:title → タイトル og:image → (1)に登録した商品画像 og:url → URL名 og:description → Description 商品を2点登録したときのレイアウト 商品を4点登録したときのレイアウト 「特集」ブロックを配置すると、特集ページへのリンクが表示されます。リンク名は「タイトル」 ↓
■EC-CUBE3機能カスタマイズ版
インストールと同時にデザインとカスタマイズ機能が実装されるのでサイト構築作業を大幅に短縮できます。
■デモサイト
インストール後、このようなサイトが立ち上がります。
■EC-CUBE3機能カスタマイズ版の機能内容
各機能についてこのページで解説しています。
■EC-CUBE3インストールガイド
特集ページ(ランディングページ)作成機能
コンテンツ管理 > 特集ページ(LP)管理 「特集ページ(LP)を新規入力」をクリック
▼タイトル
ブラウザ上部に表示されるページタイトルを設定
▼URL名
半角英数字を使用。URLは下記のようになります。
http://○○○.com/lp?name=URL名
▼カノニカルタグ
ページのソースに反映されます。
▼Auther・Description・Keywords
ページのソースに反映されます。
[Auther][Description][Keywords]が空欄の場合は、
コンテンツ管理>ページ管理>特集ページ(LP)>ページ編集の、 meta設定が反映されます。
▼画像
幅を968pxにすると、1カラム表示の場合にピッタリ収まります。968pxを超えても構いませんが、縮小して表示されることになるので、見た目で質が落ちる場合があります。
高さは任意です。
▼イメージマップ
画像にイメージマップを設定することができます。
<map name=”***”></map>は不要です。
<area shape=”***” href=”***” alt=”***”>を入力。
レスポンシブに対応しているので、スマホ画面でもエリアがずれることはありません。
▼コンテンツ
TinyMCE(WYSIWYG)を利用して作成します。
画像入力については「14 商品一覧ページ(カテゴリ)にテキストエリアを追加」をご覧ください。
▼YouTube
YouTube動画を表示することができます。
▼商品一覧タイトル
商品一覧の上に表示されるタイトルを設定します。
▼商品登録
商品は20点まで登録できます。商品IDを入力してください。
商品画像をクリックすると、商品詳細ページに遷移します。
商品IDは、(1)から順に入力してください。途中を空欄にしないでください。 (1)から詰めて入力しないとレイアウトが崩れます。
商品1点~3点:1列で表示され「商品説明」が表示されます。
商品4点:4列横並びで表示され「商品説明」は非表示。
商品5点以上:5列横並びで表示され「商品説明」は非表示。
上図は、すべての入力欄に入力した状態です。
商品は10点登録しています。
ページのソース
FacebookのOGPにも反映されます。
og:title → タイトル
og:image → (1)に登録した商品画像
og:url → URL名
og:description → Description
商品を2点登録したときのレイアウト
商品を4点登録したときのレイアウト
「特集」ブロックを配置すると、特集ページへのリンクが表示されます。リンク名は「タイトル」
↓