【CSS】 忍者メールフォームをレスポンシブ化する方法 【HTML】
前のページでは、忍者メールフォームの作成と、レスポンシブ化する上で必要な設定の変更を行った。
ここまでくるとあと一息。
次は、メールフォームを貼り付けるためのHTMLファイルとCSSファイルを用意。
その後、それらのファイルを自分の好きなようにカスタマイズし、アップロードする。
スマホ用
タブレット端末用
PC端末用
忍者メールフォームを設置してCSSを変更する
１． メールフォームのCSSを作成する
サイトのページに埋込む型ではなく、メールフォームを新しいタブで開く場合は、一からメールフォームのCSSを作成する。
CSSの雛形が必要な場合は↓のコードを使う。
入力欄は、名前・メールアドレス・件名・本文のみ対応。
その他も入力欄を追加する場合は、別にクラス名を指定する必要がある。
CSSのクラス名はメールフォーム作成時に設定したものに変更する。
（下のコードであれば、●●●の部分を変更する）
メールフォームを新しいタブで開く場合のCSS例
@charset "utf-8";
/*-------------------------------------------------------
PC用
------------------------------------------------------- */
@media screen and (min-width:900px) {
/* 横スクロールバー禁止・自動文字サイズ無効化 */
html {
overflow-x : hidden;
overflow-y : auto;
}
/* ------------------------------------------------------- */
/* body */
body {
word-break: break-all;
overflow-x: hidden;
background:#f8f8f8;
margin:0em auto 0em auto;
padding:0;
/* 文字 */
color:#333;
line-height:1.5;
font-size:85%;
font-family:"ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
-webkit-font-smoothing:subpixel-antialiased;
/* 文字サイズ */
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-o-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* ------------------------------------------------------- */
/* フッター・サイドバー位置固定 */
.all{
max-width:1200px;
min-width:900px;
width:100%;
width: auto;
height:100%;
height:auto;
margin: 0 auto;
padding:0;
position: relative;
background:#fff;
border:#efefef 1px solid;
}
/* メールフォームの外枠 */
#contents {
word-break: break-all;
padding:0% 2% 2% 2%;
}
/* メールフォーム */
.entry {
font-size:16px;
width:100%;
max-width:800px;
min-width:750px;
margin:10px 20px 20px 30px;
}
.entry > p{
line-height:1.8;
margin:0em 0em 0.9em 0em;
}
.entry a{
text-decoration:none;
border-bottom:1px #0033cc dotted;
margin:10px;
line-height:2.5;
}
.entry a:visited {color: #74a9d6;}
}
/*-------------------------------------------------------
スマホ用
------------------------------------------------------- */
@media screen and (min-width:0px) and (max-width:899px){
/* 横スクロールバー禁止・自動文字サイズ無効化 */
html {
overflow-y : auto;
overflow-x : hidden;
}
/* body */
body{
width:100%;
height:100%;
padding:0;
margin:0;
/* 文字基本 */
color:#000;
font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", Osaka, Arial, Verdana, "ＭＳ Ｐゴシック", sans-serif !important; font-size:16px;
line-height:1.6;
/* 文字の大きさ変更禁止 */
text-size-adjust:100%;
-o-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-moz-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
/* ------------------------------------------------------- */
/* フッター・サイドバー位置固定 */
.all{
width:100%;
max-width:899px;
height:100%;
height:auto;
margin: 0 auto;
position: relative;
}
/* ------------------------------------------------------- */
/* メールフォームの外枠 */
#contents{
width:96%;
margin:0% 2% 0% 2%;
}
/* ------------------------------------------------------- */
/* メールフォーム */
.entry {
margin:0px 15px 20px 15px;
font-size:16px;
line-height:1.7;
}
.entry a{
text-decoration:none;
border-bottom:1px #0033cc dotted;
margin:10px;
line-height:2.5;
}
.entry a:visited {color: #74a9d6;}
}
/*-------------------------------------------------------
メール設定
------------------------------------------------------- */
/* メールフォームのタイトル(全サイト共用) */
.mailform_sub_title{
font-size:20px;
font-family:"ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
idth:90%;
min-height:35px;
padding:0px 0px 5px 0px;
margin:30px 0px 25px 0px;
border-bottom:2px #9d9d9d dotted;
}
/* メールフォーム全体のスタイル */
#●●●_top{
width:100%;
clear:both;
font-size:16px;
font-family:"ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
}
/*『name』パーツの入力項目のclass（inputなどの部分）*/
/*『mail』パーツの入力項目のclass（inputなどの部分）*/
/*『title』パーツの入力項目のclass（inputなどの部分）*/
#●●●_top .name_parts,
#●●●_top .mail_parts,
#●●●_top .title_parts {
width:100%;
max-width:300px;
margin:0px;
padding:10px;
font-size:16px;
font-family:"ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
border:#ddd 1px solid;
}
/*『textarea』パーツの入力項目のclass（inputなどの部分）*/
#●●●_top .textarea_parts {
width:95%;
max-width:550px;
height:350px;
margin:0px;
padding:10px;
font-size:16px;
font-family:"ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
border:#ddd 1px solid;
}
/*メールフォームの送信ボタンのclass*/
/*送信完了メッセージの戻るボタンのclass*/
#●●●_top .result_submit_button,
#●●●_top .submit_button {
padding:10px;
width:150px;
font-size:16px;
font-weight:bold;
font-family:"ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
text-align:center;
margin:0px 0px 50px 10px;
padding:15px;
cursor: pointer;
border-radius: 5px;
box-shadow: 1px 1px 3px 0px #ddd;
background: #ededed;
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
}
サイトのテンプレートの中に埋め込みたい場合は、サイトのテンプレート用CSSに以下のCSSだけ追加する。
（入力欄は、名前・メールアドレス・件名・本文のみ対応。その他も入力欄を追加する場合は、別にクラス名を指定する必要がある）
CSSのクラス名はメールフォーム作成時に設定したものに変更する。
（下のコードであれば、●●●の部分を変更する）
/*-------------------------------------------------------
メール設定
------------------------------------------------------- */
@media screen and (min-width:0px) and (max-width:899px){
/* メールフォームのタイトル(スマホ用) */
.mailform_sub_title{
font-size:18px;
font-family:"ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
width:90%;
min-height:35px;
padding:0px 0px 5px 40px;
margin:30px 0px 25px 0px;
border-bottom:2px #9d9d9d dotted;
background:url(image/sub-title.png) no-repeat;
}
}
@media screen and (min-width:900px) {
/* メールフォームのタイトル(PC用) */
.mailform_sub_title{
font-size:20px;
font-family:"ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
width:90%;
min-height:35px;
padding:0px 0px 5px 45px;
margin:30px 0px 25px 0px;
border-bottom:2px #9d9d9d dotted;
background:url(image/sub-title.png) no-repeat;
}
}
/* メールフォーム全体のスタイル */
#●●●_top{
width:100%;
clear:both;
font-size:16px;
font-family:"ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
}
/*『name』パーツの入力項目のclass（inputなどの部分）*/
/*『mail』パーツの入力項目のclass（inputなどの部分）*/
/*『title』パーツの入力項目のclass（inputなどの部分）*/
#●●●_top .name_parts,
#●●●_top .mail_parts,
#●●●_top .title_parts {
width:100%;
max-width:300px;
margin:0px;
padding:10px;
font-size:16px;
font-family:"ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
border:#ddd 1px solid;
}
/*『textarea』パーツの入力項目のclass（inputなどの部分）*/
#●●●_top .textarea_parts {
width:95%;
max-width:550px;
height:350px;
margin:0px;
padding:10px;
font-size:16px;
font-family:"ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
border:#ddd 1px solid;
}
/*メールフォームの送信ボタンのclass*/
/*送信完了メッセージの戻るボタンのclass*/
#●●●_top .result_submit_button,
#●●●_top .submit_button {
padding:10px;
width:150px;
font-size:16px;
font-weight:bold;
font-family:"ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
text-align:center;
margin:0px 0px 50px 10px;
padding:15px;
cursor: pointer;
border-radius: 5px;
box-shadow: 1px 1px 3px 0px #ddd;
background: #ededed;
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
}
ただし、誤作動防止の為、スマホ用のCSSではサイトの文字や部品を選択できないような指定をしてある場合、メールフォームが使用できない可能性があるので、そのような場合は、メールフォーム専用のCSSを作成する。
２． メールフォームのHTMLファイルを作成する
サイトのページ内に埋め込む場合は、埋め込みたい部分に忍者メールのコードをコピペする。
（忍者メールフォームのコードは、忍者ツールズの管理画面のツールの名前のリンクをクリックした後、『 使用する 』 のリンクをクリックすると開ける）
メールフォームを埋め込みでなく新しいページで別に開く場合は、メールフォーム用のHTMLファイルを別途用意する。
メールフォームを新しいタブで開く場合のHTML例
<!DOCTYPE html><html lang="ja"><head>
<title>メールフォーム</title>
<!-- JavaScriptの設定 -->
<meta http-equiv="content-script-type" content="text/javascript">
<!-- スマホ・タブレット端末の表示崩れを防ぐ -->
<meta name=viewport content="width=device-width, initial-scale=1">
<!-- CSSを読み込む -->
<link rel="stylesheet" type="text/css" href="https://●●●/mail.css">
<!-- IE 9.0以下の場合にCSS3に対応する -->
<!?[if lt IE 9.0]>
<script type="text/javascript" src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]?>
</head>
<body>
<!-- FireFox でサイトを真ん中表示するために必要 -->
<div class="all">
<!-- メールフォームの外枠 -->
<div id="contents">
<!-- メールフォーム -->
<div class="entry">
<!-- タイトル -->
<h1 class="mailform_sub_title">メールフォーム</h1>
<!-- 忍者メールフォーム用コード（コードは忍者ツールズから取得） -->
<!--ninja_style_mailform-->
<script type="text/javascript" src="https://●●●●●●●●●.js"
charset="utf-8"></script>
<!--ninja_style_mailform-->
</div><!-- entry終了 -->
</div><!-- contents終了 -->
</div><!-- all終了 -->
<body>
</html>
３． サーバーに１と２で作ったCSSファイルとHTMLファイルをアップロードする
４． メールフォームをチェックする
忍者メールフォームを使う上での注意点
メールが届くアドレスについて
メールは、初期設定したメールアドレス宛に届くことになっている。
なので、アカウント用のメールアドレスと分けると言うことはできない。
迷惑メール、スパムメール、ウイルスメールなどが怖い場合は、忍者ツールのメールアドレスには、使い捨てが容易な専用のメールアドレスを使う方が無難。
複数サイトでの利用
複数サイトで同じメールフォームを利用し、さらにどのサイトから出されたものか判別する必要もない場合は、メールフォームは一つだけでOK。
でも、複数サイトでメールフォームを利用し、さらに受信するメールがどのサイトから出されたものか判別したい場合には、メールフォームをサイト別に用意する必要がある
（メールフォームの名前が受信するメールの件名になる）
ふたつ目のメールフォームからは、忍者メールフォームの項目のツールを作成リンクをクリックすると、忍者メールフォームを追加できる。
メールフォームの複数サイトの上限はわからないが、とりあえず15個くらいはいけた。
（2016年6月現在）
次ページ
前ページ
広告
- 【スマホでもPCでもOK】レスポンシブ・ウェブデザインとは
- 【CSS3編】 サルでもわかるレスポンシブの基本の基本
- 【HTML5編】 サルでもわかるレスポンシブの基本の基本
- 【PC用】レスポンシブでレイアウトを組み替える【スマホ用】
- 【media screen】 IE9以下のレスポンシブ化とCSSの設定 【CSS】
- 【リダイレクト】スマートフォンとタブレットとPCで表示する方法
- 【ロゴ】 タイトル部分のレスポンシブ化 【ヘッダー】
- 【横幅を合わせて表示する】 画像をレスポンシブ化する方法
- 【h1】 レスポンシブの見出しのスタイル 【h3】
- 【高さを変える】リンクとリストのレスポンシブ化
- 【画像】 ファイルの圧縮とサーバー 【CSS】
- 【レスポンシブで必須】 横並びと縦並びのスタイルをマスターする
- 【誤操作＆誤表示防止】 レスポンシブ対応で気をつけた方が良いこと
- 【無料で使える】 レスポンシブデザインをチェックするためのツール
- 【PC用】レスポンシブでレイアウトを組み替える【スマホ用】
- 【レスポンシブ化の準備】忍者メールフォームの作成＆設定方法
- 【CSS】 忍者メールフォームをレスポンシブ化する方法 【HTML】
- IE9以下のブラウザでHTML5とCSS3を対応させる