ECサイトの構築方法の１つに、ASP（クラウド型）という方法があります。ASPの場合、テンプレートが予め用意されていることで、スタートアップを早めることができる一方、システム側で用意されたHTML部分は編集の自由度が下がり、意図したい表示を実現できない場合があります。

クラウド型ECサイト構築ASPのaishipシリーズの場合、レイアウトやコンテンツ部分を自由にHTMLを組むことができ、パーツ単位で入れ替えることも容易ですが、一部の固定化されたページにおいては、多くのEC事業者様にご利用頂く汎用的なカートとして設計している為、一部のショップ様には適さない場合がどうしても発生してしまいます。

そのような場合はCSSに挑戦してみましょう。Flexboxのorderプロパティを使うことで、コンテンツの表示順を簡単に入れ替えることができますので、その方法をご紹介致します。

Flexboxとは

CSS3から追加された比較的新しいモジュールで、水平または垂直に要素を配置し、その名の通りフレキシブルなレイアウトを実現します。Flexboxには使用可能なプロパティはいくつかありますが、その中でも今回はコンテンツの並び順を指定するorderプロパティを使用していていきます。

基本形は以下です。

.親要素 {
  display: flex;
  flex-direction: column;
}

.子要素{
  order: 1;
}

.子要素{
  order: 2;
}

.子要素{
  order: 3;
}

Flexboxには親要素にかけれるものと子要素にかけれるものの２種類あります。
親要素に指定しているflex-directionは子要素の並ぶ向きを指定することができるプロパティで、利用できる値は以下のものがあります。

また、子要素に指定するorderは、その名の通り並び順を指定をすることができるプロパティです。

実践

会員登録ページにて見出し（新規会員登録）とフリーエリアの位置を入れ替える

会員登録ページは、aishipシリーズ共通のテンプレートでご利用頂いております。
このページにはフリーエリアがあり、HTMLで自由にコンテンツを設置することができますが、フリーエリアの表示位置がh1タグの「新規会員登録」の下部となります。フリーエリアの位置をh1タグの「新規会員登録」より上に設置したい、といった声を度々頂きますので、CSSにて調整方法をご案内致します。

標準のテンプレートの状態から、CSS調整後の状態にコンテンツを入れ替えるにあたり、以下のCSSを設置します。

#sysMemberRegisterIndex #sysMain{
  display: flex;
  flex-direction: column;
}
#sysMemberRegisterIndex #sysMain div.sysFreeArea{
  order: 1;
}
.sysHeadline{
  order: 2;
}
#sysMemberRegisterIndex #sysMain div{
  order: 3;
}

ログインと会員登録の位置を入れ替える

テンプレートでは「ログイン」「会員登録して購入」「会員登録せずに購入」の表示順が標準です。これを「会員登録せずに購入」「会員登録して購入」「ログイン」の順に入れ替えたい場合は、以下のCSSを利用します。ゲスト購入を推奨するEC事業者様には有効な入れ替えです。

#sysRegi #sysMain{
  display: flex;
  flex-direction: column;
}
#sysRegisterForm{
  order: 1;
}
#sysPurchaseAuthMember{
  order: 2;
}
form{
  order: 3;
}

購入確認画面の表示内容を入れ替える

カートステップの最終画面にあたる購入完了画面では、購入商品、注文者や送付先、決済、配送方法、金額に関する表示等、多くの重要な情報を表示する必要があります。しかし表示内容の重要度は、EC事業者様によって異なる場合があります。
特にギフトECサイト構築クラウド型ASPのaishipGIFTの場合は、カートステップの最終画面のこの画面にて、熨斗の設定を行います。このため、熨斗の設定漏れを防ぐ為にも、最上位に表示させると目立たせることが出来ます。

/* */

.opcSingleDelivery{
    flex-direction: column;
    display: flex;
    order: 1;
}

.opcDeliveryAddressArea {
    order: 2;
}

.opcDeliveryMethodArea{
    order: 3;
}


#sysOpc {
    display: flex;
    flex-direction: column;
}

.opcItemsArea {
    order: 1;
}

.opcOrderSummaryArea {
    order: 2;
}

.opcBillingAddressArea{
    order: 3;
}

.opcPaymentMethodArea{
    order: 4;
}

.opcRemarksArea {
    order: 5;
}

.opcSubstituteOrderMemoArea{
    order: 6;
}

.opcRequestOrderArea {
    order: 7;
}

.opcOrderBackToBasketArea{
    order: 8;
}

まとめ

いかがでしたでしょうか。レイアウト調整の壁にぶつかった時やHTMLをどうしても動かせない場所が見つかった場合は、この方法で試してみましょう。HTML構造を理解し、表示順を入れ替えたいコンテンツの要素にclassやIDが設置されている箇所であれば簡単に入れ替えることができます。