このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。

皆さん、こんにちは。おちゃのこネットの刑部です。

今号のデザイン道場は、先日リリースしたカートステップ改良でさらにカートをシンプルに表示する方法をご紹介します。カートステップ2で縦に積んで表示している各項目を横並びにカスタマイズする方法となります。






スタイルシートを編集する

デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。

基本的には、500px以上の横幅で適用しますのでPC~タブレットでの表示用となります。

※注意事項
この例では、レスポンシブテンプレート「ホワイトライン」を基本にしてカスタマイズしています。
罫線や各色はホワイトラインカスタム時の指定となりますので、ご利用テンプレートによっては指定に問題が出る可能性があります。
その際は、線や色をご利用テンプレートに合わせて変更ください。

※フォーム要素デザインについて
カート内のフォーム要素の余白を大きくする指定です。必要なければ指定は貼り付けないでください。

●スタイルシート

@media only screen and (min-width: 500px) {

/* フォーム要素デザイン */
.shoppingcart_contents input[type="text"],
.shoppingcart_contents input[type="email"],
.shoppingcart_contents input[type="tel"],
.shoppingcart_contents input[type="url"],
.shoppingcart_contents input[type="search"],
.shoppingcart_contents input[type="number"],
.shoppingcart_contents input[type="password"],
.shoppingcart_contents textarea {
padding: 10px;
border: 1px solid #E0DFE3;
}

.shoppingcart_contents select {
border: 1px solid #E0DFE3;
min-height: 40px;
}

/* ページ全体余白/タイトル/説明*/
.shoppingcart_contents .contents_box {
margin: 0px 0px 40px;
font-weight: 500;
}

.shoppingcart_contents .section_title h3 {
margin-bottom: 10px;
padding: 15px;
}

.shoppingcart_contents .global_note li {
border-bottom: none;
}

.shoppingcart_contents .form_element,
.shoppingcart_contents .form_inner_element {
width: 80%;
}

.shoppingcart_contents .cart_recipient .form_data,
.shoppingcart_contents .cart_payment_row {
border-bottom: 1px solid #E0DFE3;
padding: 0px;
}

.cart_recipient_data,
.cart_sender_data,
.cart_shipping_method_data,
.cart_option_data,
.shoppingcart_contents .checked_row {
display: flex;
}

.cart_recipient_data .form_title,
.cart_sender_data .form_title,
.cart_shipping_method_data .form_title,
.cart_option_data .form_title {
width: 150px;
background-color: #F9F9F9;
display: flex;
align-items: center;
justify-content: center;
border: none;
}

#payment_form .checked_row .form_title {
width: 150px;
display: flex;
border: none;
}

.cart_payment_row .form_title {
border-bottom: none;
}

#cart_payment .checked_row .form_title {
background-color: #FFFFCC;
}

/* ラジオボタン選択欄下部下線非表示 */
.cart_recipient>.form_data:last-child,
.cart_recipient .shipping_radio_box:last-child .form_inner_title,
#cart_payment .cart_payment_row:last-child {
border-bottom: none;
}

#payment_form .cart_payment_row {
margin: 0px;
}

}

 
なお、お問い合わせは下記ページからお願い致します。

https://www.ocnk.net/contact/index.php

Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.