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

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

今回のデザイン道場は、ログインページやカート内ログインページ、メールマガジン登録/解除ページ、メール認証ページなどのメールアドレス登録関連のページ横幅を狭くする方法ご紹介します。
新しく追加しているテンプレートではこの横幅を採用しています。






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

デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けてください。

横幅が適用されるページ

ログインページ
https://cafe-responsive.ocnk.net/member-login/member

カート内ログインページ
※商品をカートに入れる必要があります。
https://cafe-responsive.ocnk.net/cart/customer

メールマガジン登録/解除ページ
https://cafe-responsive.ocnk.net/mail

メール認証ページ
※登録フォームでメール認証を利用の場合
https://cafe-responsive.ocnk.net/mail-auth


.login_page_body #inner_contents,
.mail_auth_page_body #inner_contents,
.mailmagazine_page_body #inner_contents,
.mailmagazinestop_page_body #inner_contents
#shoppingcart_page_step1 .visitor:not(:has(#cart_step)) .shoppingcart_contents {
max-width: 680px;
margin: auto;
}

#shoppingcart_page_step1 .visitor:not(:has(#cart_step)) .page_title h2 {
margin-bottom: 20px;
}

.login_page_body #inner_contents #signin_form,
.mail_auth_page_body #inner_contents #mail_auth_form,
#shoppingcart_page_step1 .visitor:not(:has(#cart_step)) .shoppingcart_contents #signin_form,
#shoppingcart_page_step1 .visitor:not(:has(#cart_step)) .shoppingcart_contents #cartregister_form {
padding: 0px 5px;
}

.signin_box .form_data .largesize,
#mail_auth_form .form_data .largesize,
.mailmagazine_box .form_data .largesize {
width: 100%;
max-width: none;
}

@media screen and (min-width: 840px) {
.ocnk009.responsive #shoppingcart_page_step1 #signin_form.contents_box,
.ocnk009.responsive #shoppingcart_page_step1 #cartregister_form.contents_box {
margin-bottom: 0px;
}
}

 

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

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

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