入口 > スポンサー広告 > スポンサーサイト テンプレ - カスタマイズ > 記事内にFC2メールフォームを作る

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--------

記事内にFC2メールフォームを作る

ブログ記事内にFC2サービスのメールフォームを設置する方法です。(2013年7月26日内容を一部更新しました)
プラグインのメルフォを設置する方法(FC2ブログのテンプレート工房さんやNovelテンプレートさんで紹介されています)の方がだいぶ簡単ですが、こちらは項目や文言をより細かく設定できたり、携帯からも使ってもらえたりします。
手順は以下の通りです。
1.未登録ならFC2のメールフォームサービスに登録する(ブログの管理画面からだと左メニュー一番下の「FC2サービス」内「メールフォーム」→「はじめての方」→「同意する」→「サービスに登録する」)

2.マニュアルを参考に「タイトル・メッセージ・禁止ワード・送信制限」、「定型フォーム・テキストフォーム」、「選択型フォーム」、「フォームの並び替え」の各項目を設定する(「定型デザイン・スタイル」はとりあえずほっといてください)
!注意! うちのテンプレをお使いの場合、メルフォを「本文」に入れていて、かつメールフォームの設定のうち「選択型フォーム」のところで「チェックボタン」又は「ラジオボタン」を使用していると、カテゴリ画面でエラーが出てしまうようです。すみませんが、メールフォームは「追記」に入れるようにしてください。)

3.メールフォーム編集画面左側の「編集メニュー一覧」の一番下の「パーツ利用の設置用タグ デザイン設定」をクリック

4.ブログ管理画面に戻って「新しく記事を書く」画面を開き、3で出てきたタグを本文か追記(うちのテンプレなら追記のがお勧め)欄に貼り付ける

5.記事を「プレビュー」してみて、もしデザインが納得いかなかったら、メールフォーム画面に戻り先程の
「フォーム表示用タグ」の下の方にある「パーツ用テンプレートをダウンロードする」をクリック

6.どれでもいいので「このテンプレートを追加する」をクリック

7.戻った画面で、6で追加したテンプレート名の右側の「編集」ボタンをクリック

8.出てきたスタイルシートを適当に編集して好みのスタイルにする
 (ちなみにうちはこんな風に指定しています↓

#fc2form { border: none; padding: 10px; width: 600px; line-height: 150%; }
#fc2form .toparea{ margin-bottom: 10px; }
#fc2form .message{ margin-bottom: 30px; }
#fc2form #coution1{ font-weight: bold; color: #CC0000; }
#fc2form #coution2{ font-size: 10px; font-weight: normal; color: #CC0000;}
#fc2form .title{ width: 12em; float:left; clear:left; list-style-type:none; padding-left:20px; }
#fc2form .comment{ width: 20em; margin-bottom:10px; float:left; }
#fc2form .submit{ text-align: right; }
#fc2form .button, #fc2form input, #fc2form textarea { border: solid 1px #ccc; background-color: #fff; }
#fc2form img { display: inline; margin: 0; }

文字色とかはここでは指定してませんし(ブログテンプレの指定が継承される形)、「#fc2form #order」関係とか要らないものも勝手に削除してしまっているごく個人的なテンプレですが、デザインのベースとして必要ならお使いください。)
(ここでのスタイル指定よりも、ブログテンプレのスタイル指定の方が優先されるようです。メールフォーム管理画面のテンプレート編集でうまく指定を反映させられない場合は、↑これをブログのスタイルシート最下部にコピペした上で調整してみてください。)

9.「テンプレートを適用」をクリック

10.ブログ画面に戻って「プレビュー」で確認し、おかしいところはメールフォーム画面で調整してできあがり



こうして書いた記事を「メール」とか「メールフォーム」とか「お問合せ」とかのカテゴリを作って保存すれば、(うちのテンプレだと)入口メニューに「メール」とかが出てきてメルフォ画面に飛ばせます。
もっと右にとか左にとかの順番を変えたいときは、「カテゴリの編集」でカテゴリの位置を入れ替えてください。
2013-07-26
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。