今回はお問い合わせページを作成します。いつどこの項目を見ている時でもお問い合わせに繋げられるようにナビバーにリンクを設定してお問い合わせを作っていきましょう。
既にコンタクトフォームを作成していることもあり、かなり素早く作業を終わらせられると思います。
メインセクション
早速作っていきます…がその前にブレイクポイントに設定しているか確認しましょう。
新しく作成する時は毎回、確認することをオススメします。『タブレットサイズで作っていることに途中で気が付き、作り直しになった。』なんてこともたまにあります。ブレイクポイントで作成しているか確認したらスタートです。
まずはいつもどおりSection、Containerから作成し、各要素を入れていきます。
- Section、Containerを挿入
- H1 Headerを挿入 ・クラスはHERO Headingをコピーして「Larger Heading」と設定 ・文字の大きさ：48px Height 1-(ハイフン) ・文字色を変更。(おまかせ) ・Margin bottom：60px
- シンボルのコンタクトフォームを挿入
ナビゲーションバー、フッター
この2つを入れるだけで一気に完成度が上がった気がしませんか？僕はなんだかちょっとだけ上がります。アゲアゲです。
- シンボルに保存したナビゲーションバーとフッターを挿入
正直ここでお問い合わせページは完成。と言っても良いのですが、あまりにも短すぎるのでフッターとナビバーに少しだけよく見る小細工をしようと思います。
まずはフッターから
フッターを下に貼り付ける
ブレイクポイントよりも大きなサイズで表示すると、フッターが地に足をつけずに浮いてしまいます。これを改善すべく以下の設定をします。
※作業はブレイクポイントで行います。
- Bodyを選択
- ピンクタグ(ALL Body)を設定
- Flex boxを設定して縦並びに
次にフッター編集していきます。
- シンボルをダブルクリックしてフッターのsectionを選択
- Margin top：Auto
Autoで設定することによりマージンが自動で伸縮し、どのサイズでもフッターを一番下に配置する事ができます。ホームページのCMSを作成するパートで「詳しく見る」を下に配置したときと同じ方法です。便利な機能なので覚えておきましょう。
このコースの参考にしているWebflowの公式動画ではフッターにこの設定をして終了していますが、今回このブログではナビバーにも一つ小細工したいと思います。
ナビバーを常に上部に表示させる
- ナビバーを選択
- 写真のように設定
これだけでナビバーを上部に固定して表示できます。わかりやすいデザインなのですぐにできますね。
ナビバーにはその他にも様々な小細工を使用したサイトがあります。その設定はまた他の記事で紹介したいと思います。
まとめ
今回は短い回でしたね。お問い合わせは重要な機能なのでオリジナルでもう少し改造しても良いかもしれません。
別記事にて様々なナビバー特集をしてみようかな、と思いつつたまには早く終わらせて、体を動かす日にしようと思います。
それでは今日もお疲れ様でした。次回は「reCAPTCHAの導入」です。必要ないと思う方もいるかも知れませんが、人気になったら必要なので、予めやり方を知っていても損はないですね。それでは次回また頑張りましょう。
よくある質問
Webflowのお問い合わせページはどう構成しますか？
SectionとContainerを作成してH1見出しを入れ、シンボルとして保存したコンタクトフォーム・ナビゲーションバー・フッターを挿入します。既にコンタクトフォームを作成していれば、かなり素早く作業を終わらせられます。
Webflowでフッターをページ下部に固定するには？
Bodyを選択してピンクタグ（ALL Body）を設定し、Flex boxで縦並びにします。次にフッターのsectionにMargin top: Autoを設定すると、マージンが自動で伸縮してどのサイズでもフッターを一番下に配置できます。
Webflowで新しいページを作る前に確認すべきことは？
ブレイクポイントで作成しているかの確認です。タブレットサイズで作っていることに途中で気が付いて作り直しになることもあるため、新しく作成する時は毎回確認することをオススメします。
