スマートフォンECサイトデザインの基本～スマートフォンCSS活用基礎（15）～

今回は少しCSSの話からそれて、aishipの新機能についてご案内いたします。

aishipではこの度【テンプレート】という新機能が誕生しました。

以前よりaishipご利用者様からも多数ご要望をいただいていた機能であり、私個人的にもずっと待ち焦がれていた機能になります。
このテンプレートの機能は、複数のページに共通して表示させたいコンテンツを一括で管理することが出来る機能になります。特にサイト上部に表示させるヘッダーメニュー、サイト下部に表示させるフッターメニューなどが解りやすいのではないでしょうか。そういった複数ページにまたがって表示させたいコンテンツを、テンプレート1ファイルで管理することができます。
またテンプレートは複数作成することができ、フリーページだけではなく商品詳細ページでもご利用いただけます。更に大きな特徴としては「表示させる端末を選択することができる」のです！
それでは順にご案内させていただきます。

使い方：
画像を見る
モバイルサイト作成画面上では「新規ページ作成」と並んで新たに「テンプレート作成」というリンクが追加されました。このリンクをクリックするとテンプレートが1つ作成されます。

画像を見る
この中では通常のページと同じように、テキストの入力・画像の設置・リンクの作成などが行えます。もちろんHTMLでの編集にも対応しています。複数ページで表示させたい部分だけをこのテンプレート内に作成し、保存しておいてください。

画像を見る
そしてこのコンテンツを表示したいページを選択し、機能カード[テンプレート]をダブルクリックしてください。
すると画面中央に左図のようなウィンドウが表示されます。

【上の選択肢】では作成済みのテンプレートを選択します。
【下の選択肢】では表示させたい端末を選択します。

そしてOKボタンを押すと、その場所にテンプレートで作成したコンテンツが貼り付けられるようになるのです。

この機能のメリット1：
今まで複数のページで共通して表示させていたコンテンツを一括で管理できるようになります。先ほどの図の例ではフッターメニューを扱いましたが
・メニューのリンク先を変更したい
・メニューの名称を変更したい
・メニューに1つリンクを追加したい
そんな時には1ページずつ、該当場所の手直しをする必要がありました。この機能があれば、そうした手間を大幅に軽減することができます！

この機能のメリット2：
表示端末を選択できるようになっている点は、とても大きな魅力です。
例えば
「このランキングは携帯電話向けにだけ表示したい」
といった要望にも対応できます！
テンプレート内にランキングコンテンツを作成し、機能カードをページに貼り付ける時に「ケータイだけ表示」を選択しましょう！
画像を見る
これでスマートフォンではランキングを非表示にすることができます。
フィーチャーフォンでは更に細かく「docomoでのみ」「auでのみ」「softbankでのみ」とキャリアによって分けることも可能です。

現在までに寄せられているご質問：

Q1.テンプレートはいくつ作れますか？
A1.aishipでは最大1,000ページまで作成することができます（ベーシックプランの場合）　これはモバイルサイト用ページ数＋PCサイト用ページ数の合計が1,000ページ、という計算になりますが、テンプレートもこのページ数の中に含まれています。
ですのでモバイルサイト用ページ数＋PCサイト用ページ数＋モバイル用テンプレート　の合計が1,000ページ以内であれば、何枚でも作成することが可能です。

Q2.テンプレートにもCSSは適応されますか？
A2.もちろんです。テンプレートもHTMLでの編集に対応していますので、id名、class名をご利用いただければスマートフォン用のリッチコンテンツを作成することもできます。

Q3.テンプレートは1ページに何枚でも設置できますか？
A3.可能です。サイトの構成にあわせて複数のテンプレートを作成いただき、ページ上にどしどし設置してください！

Q4.テンプレートの中に従来の機能カードを設置してもいいですか？
A4.OKです。ただし商品詳細ページで使うテンプレートでは「商品検索」「新規会員登録」などのフォームを伴う機能カードをご利用にならないようご注意下さい。

Q5.テンプレートの中にテンプレートを設置してもいいのでしょうか。
A5.問題ありません。ただし同じテンプレートが選択されてしまうと内容が表示されなくなってしまうので十分ご注意下さい。

まとめ：
いかがでしたか？　記事担当オススメのテンプレート機能、ぜひご活用くださいね！

（　スマートフォンECクラウド型ASP『aiship（アイシップ）』　松井　）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
掲載元のブログではわかりやすい画像つきで公開しています。
■aishipスマートフォン＆モバイルEC事例・ノウハウ集
http://www.aiship.jp/knowhow/archives/2142
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝