試行錯誤な日々: ヘッダメニュー付きのホームページをbloggerで作る方法

bloggerをカスタマイズすると、ヘッダーナビが付いたホームページのようなwebサイトを作れます。

具体例: ホームページのようなblogger

作りたいと思う度に調査をするのが面倒なので、共有を兼ねてメモを残します。

目的

下記ページで構成されるbloggerサイトを作成します。

■ トップページ
パス: /
機能: ブログ一覧

■ このページについて
パス: /p/about.html
機能: ページ説明のテキスト表示します

■ レッスン料・スケジュール
パス: /p/fee-and-schedule.html
機能: google calendar埋め込みます

■ アクセス
パス: /p/access.html
機能: google map埋め込みます

■ お問い合わせ
パス: /p/contact.html
機能: お問い合わせフォームを埋め込みます

トップページはデフォルトのブロガーページです。
トップページ以外は固定ページで作成します。

urlを指定して固定ページを作成する方法

固定ページを日本語のタイトルで保存すると、ページのurlが「/p/blog-page.html」のような意味のない名前が付けられてしまします。
contactページを例に説明します。

1. 新しい固定ページの編集画面を開きます

2. 設定したいurlの英語表記（今回はcontact）をタイトルに入力してページを保存、または公開します
　これによって、urlがタイトルの英語表記になります。
　最初の保存時にurlが決まります。
　スペルミスなどをした場合は、別のページを作る必要があります。

3. ページを日本語表記のタイトルに戻し、公開、または更新します。

4. ページを表示します。

これで固定ページのurlが期待する英語表記になっているはずです。
タイトル: お問い合わせ
パス: /p/contact.html

固定ページへのコメントを無効化する方法

何も設定していないと、固定ページの下にコメント欄が表示されます。
不要だと思うので、非表示にします。

固定ページ編集画面右側にある「オプション」を選択します。

コメントを「許可しない」 -> 「完了」 -> 「更新」を順に選択します。
これでコメントが消えるはずです。

ヘッダーナビの設置方法

ヘッダーナビは、レイアウトで「Cross-Column」に「ページ」を設定して実現します。

ヘッダーナビ設定前に、ヘッダーに設定したい固定ページを作成してください。

固定ページを作成できたら、「レイアウト」 -> 「Cross-Column」 -> 「ガジェットを追加」を選択してください。

ガジェットの一覧が表示されるので、「ページ」を選択してください。

ヘッダに並べたいページを設定し、「保存」を選択してください。
これで、ヘッダーナビが表示されているはずです。

google calendarやgoogle mapの幅を調整してbloggerに設置する方法

google calendarのデフォルトのiframeタグを埋め込むと、スマホで見た時にはみ出してしまいます。
この場合、iframeのwidthを100%にすると、綺麗に表示されます。

-  width="600"
+  width="100%"

例：google map

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.7138467116174!2d139.69999931605082!3d35.68404733742333!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cc6088e6041%3A0x3dd39ee1809084f7!2z5Luj44CF5pyo6aeF!5e0!3m2!1sja!2sjp!4v1460986256701"
  width="100%"
  height="450"
  frameborder="0"
  style="border:0"
  allowfullscreen>
</iframe>

お問い合わせフォームを特定ページに設置する方法

bloggerは固定ページに問い合わせフォームを設定する機能がないので、ガジェットの機能を工夫して使います。

どこでも良いので、「連絡フォーム」のガジェットを追加します。

今回はサイドバナーに追加しました。

しかし、サイドバナーには表示させたくないため、隠します。

「テンプレート」 -> 「カスタマイズ」を選択します。

「上級者向け」 -> 「CSS」を追加に下記のコードを追加します。

#ContactForm1 {
  display: none ! important;
}

追加できたら、「ブログに適用」を選択します。

サイドバナーから、問い合わせフォームが消えました。
入力フォームは消えましたが問い合わせ機能は動いているため、お問い合せページに問い合わせ入力フォームを設置します。

「お問い合わせ」ページの編集画面で「HTML」を選択して、下記のコードを登録します。

<div class="form">
  <form name="contact-form">
    お名前
    <br />
    <input
      class="contact-form-name"
      id="ContactForm1_contact-form-name"
       name="name"
       size="30"
       type="text"
       value="" />
    <br />
    <br />

    メールアドレス
    <span style="font-weight: bolder;">*</span>
    <br />
    <input
      class="contact-form-email"
      id="ContactForm1_contact-form-email"
      name="email"
      size="30"
      type="text"
      value="" />
    <br />
    <br />

    お問い合せ内容
    <span style="font-weight: bolder;">*</span>
    <br />
    <textarea
      class="contact-form-email-message"
      cols="25"
      id="ContactForm1_contact-form-email-message"
      name="email-message"
      rows="5"
      style="max-width: 100%;"></textarea>
    <br />
    <br />

    <input
      class="contact-form-button contact-form-button-submit"
      id="ContactForm1_contact-form-submit"
      type="button"
      value="送信" />
    <br />

    <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
    </div>
    <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
    </div>
  </form>
</div>

これでお問い合わせフォームがお問い合せ画面に表示されているはずです。