ヘッダメニュー付きのホームページを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>

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

最新の投稿を表示する方法

ブロガーは最新の記事を表示するガジェットが無いため、フィードのガジェットを利用します

最新の投稿を表示したい場所の新しいガジェットで「フィード」を選択します。

フィードのurlには、編集している（新しい投稿を表示したい）ブログのurlを入力します。

タイトルを「新しい投稿」などに変更して保存します。
RSSの配信に時間がかかるからなのか、すぐには記事が表示されません。
しばらく待つと、新しい投稿が表示されるはずです。

自分が紹介する方法は以上です。
何かのお役に立てば嬉しいです。

参考

How to remove comment box from pages in blogger
ADDING PAGES TO BLOGGER BLOG
Add Blogger Contact Form to Any Static Page