![]() |
![]() |
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、ログインページやカート内ログインページ、メールマガジン登録/解除ページ、メール認証ページなどのメールアドレス登録関連のページ横幅を狭くする方法ご紹介します。
新しく追加しているテンプレートではこの横幅を採用しています。
![]() |
|
![]() |
![]() |
デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けてください。
横幅が適用されるページ
ログインページ
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;
}
}
なお、お問い合わせは下記ページからお願い致します。
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.