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

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

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

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

「ページ ヘッダー」ガジェットはブログタイトルやブログの説明を表示する為のガジェットです。そのほかタイトル用の画像を表示させる事も可能です。

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

「ページ ヘッダー」ガジェットは「編集」ボタンから画像の配置方法を選択できますが、その配置によって出力の内容が変わります。

「タイトルと説明の背後」の場合

※ブログタイトルはトップページ以外の場合<a>タグが付けられます
※画像は .header-widget の background-image として書き出されます
※画像は左寄せ（日本語の場合）になるようスタイルがセットされます
※画像が無い場合はオレンジの部分は出力されません

「タイトルと説明の代わり」の場合

※ブログタイトルは出力されません
※ブログの説明も出力されません
※画像は <img>タグで出力されます

「説明を画像の後ろに表示する」の場合

※ブログタイトルは出力されません

※画像は <img>タグで出力されます

スタイルシートの設定

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

.Header{
}
.header-widget{
}
.header-widget h1{
}
.header-widget a{
}
.header-widget a:visited{
}
.header-widget a:hover{
}
.header-widget p{
}
.header-widget img{
}

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

<b:widget id='Header1' locked='true' title='ARTe DEMO (Header)' type='Header' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='displayUrl'/>
    <b:widget-setting name='displayHeight'>0</b:widget-setting>
    <b:widget-setting name='sectionWidth'>790</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' var='this'>
    <div class='header-widget'>
      <b:include cond='data:imagePlacement in {"REPLACE", "BEFORE_DESCRIPTION"}' name='image'/>
      <b:include cond='data:imagePlacement not in {"REPLACE", "BEFORE_DESCRIPTION"}' name='title'/>
      <b:include cond='data:imagePlacement != "REPLACE"' name='description'/>
    </div>
    <b:include cond='data:imagePlacement == "BEHIND"' name='behindImageStyle'/>
  </b:includable>
  <b:includable id='behindImageStyle'>
    <b:if cond='data:sourceUrl'>
      <b:include cond='data:this.image' data='{image: data:this.image, selector: ".header-widget"}' name='responsiveImageStyle'/>
      <style type='text/css'>
        .header-widget {
          background-position: <data:blog.locale.languageAlignment/>;
          background-repeat: no-repeat;
        }
      </style>
    </b:if>
  </b:includable>
  <b:includable id='description'>
    <p>
      <data:this.description/>
    </p>
  </b:includable>
  <b:includable id='image'>
    <a class='header-image-wrapper' expr:href='data:blog.homepageUrl'>
      <b:include data='{image: data:image, altText: data:blog.title.escaped, originalWidth: data:width, originalHeight: data:height }' name='responsiveImage'/>
    </a>
  </b:includable>
  <b:includable id='title'>
    <h1>
      <b:tag cond='data:view.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
        <data:title/>
      </b:tag>
    </h1>
  </b:includable>
</b:widget>