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

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

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

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

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

Sample

About該当部位のhtml編集

作業にあたり、Ctrl + F (Windows)/ Ctrl + 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', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', '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ブログの定形です。
公式ページを一旦経由することになりますのでご了承ください。

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