Bloggerテーマの基礎知識 - 「ページ」ガジェットについて知ろう

Bloggerでは「レイアウト」メニューからガジェットを追加できます。
追加されたガジェットがどのような構造を持っているかは「テーマ」の「HTML編集」から確認できます。

「ページ」ガジェットの構造について確認してみましょう。

「ページ」ガジェットとは

「ページ」ガジェットは固定ページのリストを表示するガジェットです。
Bloggerでは「投稿」の他に独立した「ページ」を作成する事が出来ますが、その「ページ」へ移動する為のリンクリストを表示させる事が出来ます。

「ページ」ガジェットは「編集」ボタンから以下のような設定が行えます。

• 「ページ」ガジェットのタイトルを設定
• ガジェットで表示させるページを選択
• ガジェットで表示させるページの順番を設定

「ページ」が出力する構造

※<h3>のタイトルは「編集」画面でタイトル欄に入力した文字が表示されます
※タイトル欄を空にした場合は<h3>は出力されません
※<li>の項目が現在表示中のページである場合 class属性に 'selected' が付けられます

スタイルシートの設定

上記の構造を見ると指定すべきスタイルシートの項目が見えてきます。
取り合ずこの辺↓を設定すれば良さそうですね。

.PageList{
}
.PageList h3{
}
.PageList ul{
}
.PageList li{
}
.PageList li a{
}
.PageList li a:hover{
}
.PageList .selected {
}

「ページ」ガジェットのソース

<b:widget id='PageList1' locked='false' title='' type='PageList' visible='false'>
  <b:widget-settings>
    <b:widget-setting name='pageListJson'>
    <b:widget-setting name='homeTitle'>ホーム</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <b:include name='widget-title'/>
    <b:include name='content'/>
  </b:includable>
  <b:includable id='content'>
    <div class='widget-content'>
      <b:include name='pageList'/>
    </div>
  </b:includable>
  <b:includable id='overflowButton'>
    <b:include name='verticalMoreIcon'/>
  </b:includable>
  <b:includable id='overflowablePageList'>
    <div class='overflowable-container'>
      <div class='overflowable-contents'>
        <div class='container'>
          <b:with value='true' var='overflow'>
          <b:with value='&quot;tabs&quot;' var='pageListClass'>
            <b:include name='pageList'/>
          </b:with>
          </b:with>
        </div>
      </div>
      <div class='overflow-button hidden'>
        <b:include name='overflowButton'/>
      </div>
    </div>
  </b:includable>
  <b:includable id='pageLink'>
    <li>
      <b:class cond='data:overflow' name='overflowable-item'/>
      <b:class cond='data:link.isCurrentPage' name='selected'/>

      <a expr:href='data:link.href'><data:link.title/></a>
    </li>
  </b:includable>
  <b:includable id='pageList'>
    <ul>
      <b:class cond='data:pageListClass' expr:name='data:pageListClass'/>
      <b:loop values='data:links' var='link'>
        <b:include name='pageLink'/>
      </b:loop>
    </ul>
  </b:includable>
</b:widget>

※'overflowButton'や'overflowablePageList'といった<b:includable>がありますが使い方が良く分かりません・・・