蝶とオレンジMAIL

Attention, please!

× 再配布・自作発言はご遠慮ください。
○ 改変はご自由にどうぞ。

全体レイアウト

<div align="center">

<!-- メニュー（スマホ/ガラケーの場合最初の4要素だけ表示） -->
<div class="top_box">
<div class="box">
<div class="menu">
<a href="">HOME</a>
<a href="">MAIN</a>
<a href="">BLOG</a>
<a href="">LINK</a>
<div>MAIL</div>
<a href="">RES</a>
<p class="clear"></p>
</div></div></div>

<div class="box">
#form#
<p class="clear"></p>
</div></div>

入力画面

<!-- 説明 -->
<div class="left_box">
<div class="content">
<div class="english headline">Mail</div>
<p><div style="color:#FF0000;">#error#</div>
ご感想、誤字脱字報告、ご意見などはこちらへどうぞ。</p>
<p>直接返信が欲しい方はメールアドレスをご記入ください。</p>
<p>その他必要事項を入力し、[Preview] ボタンを押してください。</p>
</div></div>

<!-- コンテンツ -->
<div class="right_box">
<div class="content">
<div class="english headline">Send a message</div>
#formStart#<br />
#formLabel1#<br />
#formInput1#<br /><br />
#formLabel2#<br />
#formInput2#<br /><br />
#formLabel3#<br />
#formInput3#<br />
#formSubmit_Preview#
#formEnd#
</div></div>

プレビュー画面

<!-- 説明 -->
<div class="left_box">
<div class="content">
<p><div style="color:#FF0000;">#error#</div>
ご感想、誤字脱字報告、ご意見などはこちらへどうぞ。</p>
<p>直接返信が欲しい方はメールアドレスをご記入ください。</p>
<p>その他必要事項を入力し、[Send] ボタンを押してください。</p>
</div></div>

<!-- コンテンツ -->
<div class="right_box">
<div class="content">
<div class="english headline">Mail form</div>
<div class="text">#preview#</div>
#form_Send_Back#
</div></div>

送信完了画面

<!-- コンテンツ -->
<div class="content">
送信完了致しました。
</div>

CSS

<!-- 橙色部分を変更する場合は #ffc90e の部分(13ヵ所)と色設定ページの色を変更してください -->

<!------------- PC/スマホ/ガラケー共通 ------------->
<style>
/* Google font */
@import url(http://fonts.googleapis.com/css?family=Playball);

/* 画面全体 */
body {
    font-family: Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    margin:      0px;
    padding:     0px;
}

/* リンクに下線と背景色を付ける */
a {
    text-decoration:     none;
    border-bottom-style: dotted;
    background-color:    #ffffff;
}

/* リンクのマウスオーバー */
a:hover {
    color:      #ffc90e;
}

/* 区切り線 */
hr{
    color:      #ffc90e;
    height:     2px;
    border:     none;
    border-top: 2px #ffc90e dashed;
}

/* 上部分（背景色が白の部分） */
div.top_box {
    width:            100%;
    margin:           0px;
    padding:          0px;
    display:          block;
    background-color: #ffffff;
    border-bottom:    30px #ffc90e solid;
}

/* 真ん中の領域 */
div.box {
    margin:           0px;
    padding:          0px;
    display:          block;
    background-color: #ffc90e;
}
div.box:after {
    visibility: hidden;
    display:    block;
    content:    " ";
    clear:      both;
    height:     0;
}
* html div.box { zoom: 1; } /* IE6 */
*:first-child+html div.box { zoom: 1; } /* IE7 */

/* リンクの下線をなくす */
div.box a {
    background: none;
}

/* メニューボックス */
div.menu {
    background-color: #ffc90e;
}

/* メニューの現在地（TOPページの場合はHOMEメニュー） */
div.menu div {
    display:         block;
    float:           left;
    margin:          0;
    font-family:     'Playball', cursive;
    color:           #ffffff;
    text-align:      center;
    text-decoration: none;
    border-bottom:   none;
}

/* メニュー */
div.menu a {
    display:         block;
    float:           left;
    margin:          0;
    font-family:     'Playball', cursive;
    color:           #ffc90e;
    text-align:      center;
    text-decoration: none;
    border-bottom:   none;
}

/* メニューのマウスオーバー */
div.menu a:hover {
    color:           #ffffff;
}

/* PCで2列表示させる時の左部分大枠 */
div.left_box {
    padding: 0px;
}

/* PCで2列表示させる時の右部分大枠 */
div.right_box {
    padding: 0px;
}

/* コンテンツ */
div.content {
    margin-bottom:         20px;
    background-color:      #ffffff;
    text-align:            left;
    -webkit-border-radius: 5px;
    -moz-border-radius:    5px;
    border-radius:         5px;
}

/* 左右に分けない場合のコンテンツ */
div.content {
    margin-bottom:         20px;
    background-color:      #ffffff;
    text-align:            left;
    -webkit-border-radius: 5px;
    -moz-border-radius:    5px;
    border-radius:         5px;
}

/* 英語でサイト名 */
h1{
    font-family: 'Playball', serif;
}

/* 英文字フォント変更 */
div.english {
    font-family: 'Playball', serif;
}

/* 更新履歴用 */
div.yellow {
    margin:                10px 0px;
    padding:               5px 10px;
    background:            url("//static.nanos.jp/upload/o/oenothera69/mtr/0/0/20150509155012.png");
    border:                2px #ffc90e solid;
    -webkit-border-radius: 5px;
    -moz-border-radius:    5px;
    border-radius:         5px;
}

/* 見出し */
div.headline {
    margin:        5px 0px 8px 0px;
    border-bottom: 2px #ffc90e dashed;
}

/* 日本語でタイトル */
div.title {
    padding-bottom: 5px;
}

/* インデントをずらす */
div.text {
    margin:  0px 0px 0px 8px;
}

/* PCで2列表示させる時の回り込み解除 */
p.clear {
    clear: left;
}

/* フォーム */
div.box textarea,
div.box input {
    margin-top:            10px;
    background:            url("//static.nanos.jp/upload/o/oenothera69/mtr/0/0/20150509155012.png");
    border:                2px #ffc90e solid;
    box-shadow:            none;
}
div.box textarea{
    display:               block;
    padding:               3px;
    -webkit-border-radius: 5px;
    -moz-border-radius:    5px;
    border-radius:         5px;
    scrollbar-face-color:       #ffc90e;
    scrollbar-track-color:      #ffc90e;
    scrollbar-arrow-color:      #ffffff;
    scrollbar-highlight-color:  #ffffd4;
    scrollbar-shadow-color:     #ffffd4;
    scrollbar-3dlight-color:    #ffffd4;
    scrollbar-darkshadow-color: #ffffd4;
}
div.box input[type="text"],
div.box input[type="password"]{
    padding:               3px;
    -webkit-border-radius: 5px;
    -moz-border-radius:    5px;
    border-radius:         5px;
}
div.box input[type="submit"]{
    height:                25px;
    width:                 100px;
    padding:               0px 10px;
    font-size:             18px;
    font-family:           'Playball', cursive;
    color:                 #ffc90e;
    -webkit-border-radius: 20px;
    -moz-border-radius:    20px;
    border-radius:         20px;
}
</style>

<!---------------- パソコン用 ---------------->

<style>
/* 画面全体 */
body {
    line-height: 160%;
}

/* 上部分（背景色が白の部分） */
div.top_box {
    height:  137px;
}

/* 真ん中の領域（160*6）*/
div.box {
    width:   960px;
}

/* メニューボックス */
div.menu {
    height:  137px;
}

/* メニューの現在地 */
div.menu div {
    height:     32px;
    width:      160px;
    padding:    105px 0px 0px;
    background: url("//static.nanos.jp/upload/o/oenothera69/mtr/0/0/20150509195812.gif");
    font-size:  20px;
}

/* メニュー */
div.menu a {
    height:     32px;
    width:      160px;
    padding:    105px 0px 0px;
    background: url("//static.nanos.jp/upload/o/oenothera69/mtr/0/0/20150509200214.gif");
    font-size:  20px;
}

/* メニューのマウスオーバー */
div.menu a:hover {
    background: url("//static.nanos.jp/upload/o/oenothera69/mtr/0/0/20150509195831.gif");
}

/* PCで2列表示させる時の左部分大枠 */
div.left_box {
    width:   330px;
    float:   left;
}

/* PCで2列表示させる時の右部分大枠 */
div.right_box {
    width:   630px;
    margin:  0px 0px 0px 330px;
}

/* コンテンツ */
div.content {
    margin-left:  15px;
    margin-right: 15px;
    padding:      20px;
}

/* 英語でサイト名 */
h1{
    font-size: 300%;
}

/* 日本語でサイト名 */
h2{
    font-size: 200%;
}

/* フォントサイズ変更 */
div.english,
div.title {
    font-size: 150%;
}

/* フォーム */
div.box textarea{
    width:     100%;
    height:    100px;
}
</style>


<!------------- スマートフォン用 ------------->


<!---------------- ガラケー用 ---------------->