こんにちは Tomoです。

今回からbloggerのamp化を行った際のコーディング内容について投稿します。

なお、前回の内容については、以下を参照してください。

bloggerのamp対応でページ構成を検討

ヘッダー

ヘッダーコンテンツの構成のイメージ図を示します。

ヘッダーコンテンツはタイトルとメニューバーを包括するようします。

タイトル

タイトルは、bloggerのウィジェットを使用します。ウィジェットを使用する場合は、セクションが必要です。

セクションとウィジェットについては、bloggerヘルプに記載されています。

セクションとは、ページ内にあるサイドバー、フッターなどの領域のことです。

ウィジェットとは、ページやブログロールなどのページ要素や、[ページ要素] タブで追加できるコンテンツのことです。

参考:https://support.google.com/blogger/answer/46888より

タイトルイメージ

html展開後の構成は以下の通りです。色に特別な意味はありません。

HTML展開後イメージ

  
<div class="header section" id="header">
  <div class="widget Header" data-version="1" id="Header1">
    <div id="title-wrapper">
      <div id="header-inner">
        <h1 class="title" itemprop="headline">
          <a href="https://bsf40.blogspot.com/" itemprop="url" title="40代から始めるブログ">
            40代から始めるブログ
          </a>
        </div>
      </div>
      <div id="description-wrapper">
        <p class="description" itemprop="description">
          <span>
          40代でブログを始めました。雑記ブログです。
          </span>
        </p>
      </div>
    </div>
    <div style="clear: both;"></div>
  </div>
</div>
  

投稿ページ以外はタイトルにh1タグをつけます。タイトルイメージには記載していませんがタイトルをクリックすることでホームに遷移できるように「aタグ」をつけています。

コーディング

  
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
  <b:widget id='Header1' locked='false' title='40代から始めるブログ (Header)' type='Header' version='1'>
    <b:widget-settings>
      <b:widget-setting name='displayUrl'/>
      <b:widget-setting name='displayHeight'>0</b:widget-setting>
      <b:widget-setting name='sectionWidth'>-1</b:widget-setting>
      <b:widget-setting name='useImage'>false</b:widget-setting>
      <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
      <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
      <b:widget-setting name='displayWidth'>0</b:widget-setting>
    </b:widget-settings>

    <b:includable id='main'>
      <div id='header-inner'>
        <b:include name='header-title'/>
        <b:include name='description'/>
      </div>
      <div style='clear: both;'/>
    </b:includable>

  </b:widget>
</b:section>
  

一番外側はセクションです。bloggerのタグになります。maxwidgetsはセクションの中に配置できるウィジェットの数になります。

セクションの中にウィジェットのタグをつけます。タイトルは、「Header」ウィジェットを使います。

「widget-settings」ウィジェットのプロパティに値を設定します。

「<b:includable id='main'>」HTMLを出力するタグです。実際の出力イメージをこのタグの中に記述します。

「タイトル」と「概要」をそれぞれの「divタグ」で囲みます。この「divタグ」を「divタグheader-inner」で囲みます。

タイトル

  
<b:includable id='header-title'>
  <div id='title-wrapper'>
    <b:if cond='data:blog.pageType == "index"'>
      <h1 class='title' itemprop='headline'>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
          <span class='widget-title'>
            <data:title/>
          </span>
        </a>
      </h1>
    <b:else/>
      <b:if cond='data:blog.pageType == "static_page"'>
        <h1 class='title' itemprop='headline'>
          <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
            <span class='widget-title'>
              <data:title/>
            </span>
          </a>
        </h1>
      <b:else/>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
          <span class='widget-title'>
            <data:title/>
          </span>
        </a>
      </b:if>
    </b:if>
  </div>
</b:includable>
  

タイトルコンテンツのコーディングです。ページタイプが「index」「static_page」の場合にh1タグでタイトルを表示し、それ以外はspanタグで表示します。

概要

  
<b:includable id='description'>
  <b:if cond='data:blog.pageType != "item"'>
    <div id='description-wrapper'>
      <p class='description' itemprop='description'>
        <span>
          <data:description/>
        </span>
      </p>
    </div>
  </b:if>
</b:includable>
  

概要コンテンツのコーディングです。ページタイプが「item」投稿ページ以外の場合に「概要」の文言を出力します。

メニューバー

amp対応ではメニューバーでウィジェットは使用しません。直接HTMLをコーディングします。

タイトルイメージ

メニューバーはulとliタグの構成です。

コーディング

  
<ul>
  <li>
    <a href="https://bsf40.blogspot.com/" itemprop="url" rel="tag nofollow" title="ホーム">
      <span itemprop="name">
        ホーム
      </span>
    </a>
  </li>
  <li>
    <a href="https://bsf40.blogspot.com/p/blog-page.html" itemprop="url" rel="tag nofollow" title="サイトマップ">
      <span itemprop="name">
        サイトマップ
      </span>
    </a>
  </li>
  <li>
    <a href="https://bsf40.blogspot.com/p/blog-page_29.html" itemprop="url" rel="tag nofollow" title="サイトポリシー">
      <span itemprop="name">
        サイトポリシー
      </span>
    </a>
  </li>
  <li class="last">
    <a href="https://bsf40.blogspot.com/p/blog-page_30.html" itemprop="url" rel="tag nofollow" title="お問い合わせ">
      <span itemprop="name">
        お問い合わせ
      </span>
    </a>
  </li>
</ul>
  

展開後の内容とコーディング内容は同じ結果です。

まとめ

次回はメインの構成の内容について投稿します。