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

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

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

「Attribution」ガジェットとは

「Attribution」ガジェットはブログの帰属データを表示するガジェットです。
「Powered by Blogger」という文字や著作権表記を表示させる事ができます。

「Attribution」が出力する構造

"blogger"というクラス名が付けられたDIVの中に「Powered by Blogger」という文字がアイコンと共に表示されます。
テーマのカスタマイズから背景画像を設定した場合、"image-attribution"というクラス名が付けられたDIVの中にその画像に対する帰属が表示されます。
"copyright"というクラス名が付けられたDIVの中に著作権が表示されます。
著作権表記はレイアウト画面のAttributionガジェットの設定から変更が可能です。

スタイルシートの設定

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

.Attribution{
}
.Attribution .blogger{
}
.Attribution .svg-icon-24{
}
.Attribution .image-attribution{
}
.Attribution .copyright{
}

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

<b:widget id='Attribution1' locked='false' title='' type='Attribution' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='copyright'></b:widget-setting>
  </b:widget-settings>
  <b:includable id='main' var='this'>
    <div class='widget-content'>
      <div class='blogger'>
        <a expr:href='data:bloggerUrl' rel='nofollow'>
          <b:include name='flatBloggerIcon'/>
          <b:message name='messages.poweredByBlogger'/>
        </a>
      </div>

      <b:if cond='data:imageAuthor'>
        <div class='image-attribution'>
          <b:if cond='data:imageAuthor.url'>
            <b:message name='messages.templateImagesByLink'>
              <b:param expr:value='data:imageAuthor.url'/>
              <b:param expr:value='data:imageAuthor.name'/>
            </b:message>
          <b:else/>
            <b:message name='messages.templateImagesBy'>
              <b:param expr:value='data:imageAuthor.name'/>
            </b:message>
          </b:if>
        </div>
      </b:if>

      <b:if cond='data:copyright != &quot;&quot;'>
        <div class='copyright'><data:copyright/></div>
      </b:if>
    </div>
  </b:includable>
</b:widget>