ナビゲーションにメールフォームを追加する方法

投稿 2017年06月05日
8
カスタマイズ
TemplateFC2Customize中級者向け

こちら私が製作した最近のテンプレに限っての内容です。
汎用的に使える面もありますが、他製作者様テンプレートご利用の方はご自身の判断でお願いします(すみません)

最近は予備リンクとして About me あるいは About をナビゲーション内入れていますが、予備ですので空リンクです。

サンプル(Dark-Divine)

赤く囲った部分ですね。
お好きな用途で使って頂くためのものですので、誘導したいページがある方はそちらのリンクアドレスを置き換えてご利用ください。

で、今回はそのAbout meの部位に
モーダルウィンドウで開くメールフォーム
を設置する方法です。

まず、大変簡易的な方法です。
そもそもこれを設置することを前提に製作していたわけではないので、若干動きなどに難アリな場面もあるかと思います。
(対応できないテンプレートもあります)
JSを用いずCSSのみで作ってみました。

Sample

About該当部位のhtml編集

作業にあたり、Ctrl+F(Windows)/ Command+F(Mac)キー検索を上手く利用してください。
サンプルとして Dark-Divineテンプレート を利用します。

注)予備リンク

上記で検索されますと、htmlソース内(管理画面上段)に 1箇所ないし2箇所 該当すると思います。
2箇所ヒットする場合はナビゲーションが2つあります(通常 + 固定)ので、この項の作業は2箇所必要です。
上記文字列でヒットしない場合はそもそも予備リンクが設けられていないか、あるいは about で検索すると出てくるかもしれません(かもって(汗))

上記のコメントを目印に、そのが該当部位です。
Dark-Divineの場合はこんな感じ ↓

<li><a href="#">ABOUT</a><!-- 注)予備リンク, ABOUTのテキストを適宜修正+リンクアドレスを # と差し替え, 不要の方この一行削除 -->

ここを下記の通り修正します。

<li><label for="modal-trigger" id="modal-trigger-label">Contact</label>

Contact の部分がリンクテキストですので、お好きな文言に変更して頂いて構いません。
その他の部位は変更しないようご注意ください。
繰り返しますが、ナビが2箇所ある場合には同じ作業を二度行ってください。

注意!
2箇所ある場合には 同一idを用いることはできません ので、一方のidを modal-trigger-label2 にするなど別idにしてください。
その際にはCSSの方で modal-trigger-label と同じスタイルを適用するようにしてください

htmlの追加

</footer></div> の間にこれからhtml内容を追加します。
ここです ↓

</footer>
ここに追加します
</div>

いずれも 終了タグ ですので、スラッシュが付いてます。要確認。
htmlソースのかなり後方に見つけられるはずです。
追加内容。

<input id="modal-trigger" type="checkbox">
<div class="modal-overlay">
  <div class="modal-wrap">
    <label for="modal-trigger">close</label>
    <form action="./" method="post">
      <div id="modal-mail">
        <div>お名前:</div>
        <input type="text" name="formmail[name]" value="">
        <div>メールアドレス:</div>
        <input type="text" name="formmail[mail]" value="">
        <div>件名:</div>
        <input type="text" name="formmail[title]" value="">
        <div>本文:</div>
        <textarea name="formmail[body]"></textarea>
        <input type="submit" value="確認">
        <input type="hidden" name="mode" value="formmail">
        <input type="hidden" name="formmail[no]" value="&formno">
      </div>
    </form>
  </div>
</div>

html編集については以上です。

CSS追加

CSSソース(スタイルシート, 管理画面下段)の末尾に以下の内容を追加します。

/* mail modal */
#modal-trigger-label {
  display: inline-block;
  color: white;
  cursor: pointer;
  padding: 0 35px; /* 注)テンプレート内容と照らし合わせが必要です */
  position: relative;
  z-index: 3;
}

.modal-overlay {
  background: rgba(0,0,0,.9); /* 注)モーダル背景色 */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align:center;
}

.modal-wrap {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  padding-top: 60px;
  position: relative;
}

/* 注)closeテキストの指定 */
.modal-wrap label {
  display: block;
  width: 100%;
  height: 100%;
  color: white;
  cursor: pointer;
  padding-top: 20px;
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Playfair Display', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS 明朝', 'serif'; /* 注)テンプレート内容に沿ったフォント設定を */
  font-size: 16px;
  text-transform: uppercase; /* 注)closeテキスト大文字縛り解除はこの一行削除 */
}

#modal-trigger {
  display: none;
}

.modal-overlay {
  opacity: 0;
  -webkit-transform: scale(.5);
  transform: scale(.5);
  -webkit-transition: all .75s cubic-bezier(.65,-.55,.265,1.55); /* 注)cubic-bezier以降を削除するとイージングが多少変わります 1/2 */
  transition: all .75s cubic-bezier(.65,-.55,.265,1.55); /* 注)cubic-bezier以降を削除するとイージングが多少変わります 2/2 */
  z-index: -999;
}

.modal-wrap form {
  display: block;
  margin: 0 auto;
  width: 90%;
  max-width: 500px;
  color: white;
  position: relative;
  z-index: 3;
  text-align: left;
}

.modal-wrap form input:not([type="submit"]) {
  display: block;
  margin-bottom: 10px;
  width: 100%;
}

.modal-wrap form input[type="submit"] {
  background-color: rgb(240,240,240); /* 注)送信ボタン背景色 */
  color: rgb(51,51,51);
}

.modal-wrap form textarea {
  display: block;
  margin-bottom: 10px;
  width: 100%;
  min-height: 200px;
  max-height: 200px;
}

@media screen and (max-width: 599px) {
  .modal-wrap form textarea {
    min-height: 150px;
    max-height: 150px;
  }
}

#modal-trigger:checked ~ .modal-overlay {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  z-index: 100005;
}

(長いので文字を小さめにしてあります。コピペでどうぞ)
ガイダンス付けておきました。

注意点・特徴など

テンプレート自体はモーダル導入を視野に入れた製作をしておりません。
特に z-index (要素重なり順)に関して、ここはもっとこうだと良いのに…といった点があるかと思いますが、テンプレート内容全てを見直す必要が生じますので今回はここまでで。
もちろん自力でできるよ、という方はご自由に。

cubic-bezier の注釈をもう少し具体的に言うと

-webkit-transition: all .75s;

こう修正することでバウンス動作が無くなり、スムーズなスケーリングになります。
修正の際は記号などに留意してください。

レスポンシブですのでスマートフォンの画面サイズも考慮しなければいけません。
特に 縦サイズ
パソコンからだと上に寄っているように感じますが、スマホではこれがギリギリです。
テキストエリアなど、これ以上サイズを大きくされますと、通常アカウントの方は 広告が被ります
有料アカウントの方はもう少し余裕があるかな (´・ω・`)

フォーム内容はFC2ブログの定形です。
公式ページを一旦経由することになりますのでご了承ください。

これ以上のカスタマイズについては自力でお願いします ^^;

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

8 COMMENTS

There are no comments yet.

yuru  

メールフォームの設定

お世話になります。
初歩的な事かもしれませんが、トップページの「お問い合わせ」のメールフォームの設定がどうしてもわかりません。
ご教授いただけると幸いです。
よろしくお願いします。

2018/04/14 (Sat) 03:31
vanillaice (Akira)

Akira  

To yuruさん

おはようございます。

このご質問内容では何もお答えできることがありません。
以下のリンク先をお読み頂き、再度ご質問ください。

ご質問時のお願いごと「詳細をお伝えください」
https://vanillaice000.blog.fc2.com/blog-entry-285.html

2018/04/15 (Sun) 20:25

yuru  

失礼しました、再度質問させてください

大変失礼いたしました。
再度、質問してみます。
お借りしているテンプレートの右側にあるナビゲーションの一つに「Contact お問い合わせ」という物がありますが、こちらをそのまま利用したいのですが、現状、送信を押すと「※メールフォームを設置していません。」と言う表示が出て、メールが送信できません。

そこで、メールフォームを設置しようと考えているのですが、HTMLを編集すれば良いのか?
それとも、cssを編集すれば良いのか?
また、どのような編集をすれば良いのか?
が分からない状態です。

html,cssを何回も見ているのですが、どのようにすれば、メールフォームから送信ができるのかが、分からないのです。
こんな質問でお分かりいただけますでしょうか?

2018/04/15 (Sun) 23:55
vanillaice (Akira)

Akira  

To yuruさん

ご協力ありがとうございます。

ナビゲーションに追加したいのではない、ということなんでしょうか。
こちらの記事内容は無いものを導入するための記事なのですが。
要するにAxisにもともと導入されているメールフォームが使えない(メールフォームを設置していません)ということですか?

Axisのメールフォームが機能しないのであればこの方法を取ったところで同じく機能しません。
まず登録メールアドレスが有効かどうかをご確認ください。生きていないアドレスの場合は送信先がありませんので恐らくそういった文言が表示されると思います。

試しに送ってみましたがやはり仰るように「メール〜設置されていません」と出ますね。
ただしアメリカからの送信なので普段の環境ではありません。
とはいえ送信元IPは関係ないはずなので結果は同じだとは思います。

FC2のヘルプもお読みください。
https://help.fc2.com/blog/manual/group169/1049?nc=1

htmlやCSSの問題ではありませんのでアドレスを確認・FC2ヘルプ参照を試されまして、それでもやはり無効化されるようでしたらFC2運営の方へご連絡願えませんでしょうか。
よろしくお願いします。

2018/04/16 (Mon) 01:43

yuru  

ありがとうございます。

ご丁寧な回答ありがとうございます。
何度もお手数をおかけして申し訳ありませんでした。

ちなみに、教えていただいたように、まず、アドレスを確認しましたが、問題が無かったので、試しに公式プラグインのメールフォームを追加して、送ると問題なく遅れました。
そこで、公式プラグインのHTMLとAxisのオーバーレイのHTMLを見比べてみると
<form action="http://yuru393.blog.fc2.com/?page=0" method="post">
の部分が違っていたので、試しにこの部分に公式プラグインと同じように記述してみたら、無事送信する事ができたのですが、この方法は問題はないですか??
他の部分が崩れたりする心配はないでしょうか?
ちょっと心配で、また、また質問してしまいました。
お手数をおかけして申し訳ありません。

追伸
質問する場所が違っていたようで、重ねて申し訳ありません。

2018/04/17 (Tue) 00:40
vanillaice (Akira)

Akira  

To yuruさん②

えっと。それはないですね (´・ω・`)
この部分は公式プラグインもテンプレートのデフォルトも
<form action="./" method="post">
赤字部分のことですが、こうしておかないとここはページ毎に動的にURLが入る部分ですので同じはずです。
yuruさんのお書きになられたURLはどのように取得したものでしょうか。
右クリック要素検証なのか、ページソース表示なのか。
上記いずれかで取得したものであれば、そもそもURLの出力内容がおかしいということになりますのでプログラム的な問題です。

いずれにしろ根本的に何かがおかしいようですので、再DLして頂いた方が良いかもしれません。
その上でカスタマイズは行わずデフォルトの状態でテストして頂けないでしょうか。
アクセス解析導入なども申し訳ないのですが少しの間お控えください。すみません。
それでもまだ問題が出るかどうか知らせてもらえると助かります。

あともう一つ教えてください。
この症状はたまたま最近気づかれたんでしょうか。
それとも以前は正常だったものが突然おかしくなったんでしょうか。
テンプレートのバージョンが古いようですのでテンプレートを適用して幾ばくか時間が経っているのではないかと思います。
そしてここ数日FC2ブログの広告掲載に不具合があったようなのでその影響も考えられます。
が、デフォルトでは正しく送信できていましたので(制作用別ブログで検証済みです)、yuruさんのブログ固有の症状だと推測出来る点からたぶん違う(笑)

お手数おかけします。よろしくお願いします。

2018/04/17 (Tue) 02:41

yuru  

ご丁寧にありがとうございます。

教えていただいたとおり、もう一度ダウンロードしてテストしてみました。
すると、今度は何も問題なく送信できました!
ありがとうございます。
一体、何だったんでしょう??

ちなみに、この事に気が付いたのはこのテンプレートをお借りしてすぐです。
最初に質問させていただいた前の日にダウンロードして、その日のうちにテストしてみたんですが、送信できず、1日、いろいろ調べても分からないので質問させていただきました。
その間、特にカスタマイズなどはしておりません。

テンプレートのバージョンが古かったようですが、どうしてなんでしょうね?
ダウンロードしたのは4/13日の事なんですが・・・

いずれにしても、今回は上手く送信できました。
本当にありがとうございます。
大切に使わせていただきます!

2018/04/19 (Thu) 18:49
vanillaice (Akira)

Akira  

To yuruさん(完了のご報告)

こんばんは (o'ω')ノ

データそのものが破損していたのかもしれないですね。
私自身はテンプレをDLすることが無いもので実体験はありませんが、以前にも似たような症状(CSSだけが旧バージョン)の方がいらっしゃったので稀に起こり得る現象なのかもしれません。

いずれにしても解消されたということで安心しました。
お手数おかけしました。お疲れ様でした

2018/04/19 (Thu) 21:21