GMOメイクショップ株式会社のサンプルサイトです。

メルマガ登録画面をレスポンシブにしたい

表示例↓

【掲示板/メール】 > 【メルマガの設定】 > 【メルマガ設定】　「案内テキスト文」欄に下記を記述しています。


<style type="text/css">
body, p, div, td, th {
font-size: 14px;
}
body{
/*background: url("http://msdepart.shop13.makeshop.jp/design/msdepart/img/common/bg01.gif") repeat-x scroll left 10px #FFFFFF;*/
text-align: center;
}

/*リンク色*/
a{text-decoration:none ;}
a:link { text-decoration:none; color:#333;}
a:visited { text-decoration:none; color:#333;}
a:hover { color:#333; text-decoration:underline;}

table,
table td {
font-size: 14px;
line-height: 1.6;
}


#M_mailmagazine {
margin: 10px auto;
text-align: center;
width: 700px;
background:#fff;
}

#M_mailmagazine p.top{
font-size: 16px;
margin: 20px auto 10px;
text-align: left;
line-height:150%;
}

#M_mailmagazine p.guide{
color: #666;
font-size: 11px;
margin: 0 auto 10px;
}

#M_mailmagazine h2 {
text-indent:-9999px;
color:#fff;
font-size:0 !important;
line-height:0 !important;
}

#M_mailmagazine h3,
#M_mailmagazine #mailmagazineText {
width: 680px;
margin:auto;
}

#M_mailmagazine h3 {
font-size: 16px !important;
line-height: 30px;
text-align: left;
}

#M_mailmagazine #policyLink {
margin-top: 4px;
}
#M_mailmagazine #policyLink a { margin-left: 4px; text-decoration: underline; } #M_mailmagazine #policyLink a:hover {
text-decoration: none;
}
#M_mailmagazine #mailmagazineText {
background: #eee;
border: 1px dashed #ccc;
padding: 10px;
}

#M_mailmagazine table {
border-collapse: collapse;
border-left: 1px solid #333 !important;
border-top: 1px solid #333 !important;
margin: 10px auto;
width: 700px;
}
#M_mailmagazine table td, #M_mailmagazine table th {
border-bottom: 1px solid #333;
border-right: 1px solid #333;
padding: 4px 8px;
}
#M_mailmagazine table th {
background: none repeat scroll 0 0 #333 !important;
color: #fff !important;
font-size: 16px;
text-align: left;
width: 120px;
white-space:nowrap;
}
#M_mailmagazine p {
font-size: 14px;
}
#M_mailmagazine table em {
color: #FF0000;
font-style: normal;
}
#M_mailmagazine #verlsign {
/* border: medium none; */
margin-top: 20px;
color:#fff;
width:100%;
background:#333;
margin-bottom:0 !important;
}

#M_mailmagazine #verlsign td, #M_mailmagazine #verlsign th {
border: medium none;
font-size: 14px;
}

/* button */
#M_mailmagazine form input[type="button"] {
background: url("http://msdepart.shop13.makeshop.jp/design/msdepart/image/formBtn_bg.png") no-repeat ;
border: 1px solid #FFFFFF;
border-radius: 1px;
color: #FFFFFF;
font-weight:bold;
padding:4px 7px 5px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
#M_mailmagazine form input[type="button"]{ width:49px; height:27px; padding:2px;}
}

/* responsive */
@media screen and (max-width: 768px){

#M_mailmagazine p.top,
#M_mailmagazine p,
#M_mailmagazine table th,
#M_mailmagazine table td {
font-size: 128%;
line-height: 180%;
}

#M_mailmagazine,
#M_mailmagazine h3, #M_mailmagazine #mailmagazineText {
width: 97% !important;
}

#M_mailmagazine table {
width: 98% !important;
}
}
</style>