Blogger:ガジェットのタイトルの背景に画像を設定する方法

イントロダクション

Google のブログサービス「Blogger」にて、ガジェットの背景に画像を設定する方法について記載します。

Blogger:ガジェットのタイトルの背景に画像を設定する方法

ガジェットのタイトルの背景に使用する画像のアップロード

ガジェットのタイトルの背景に使用する画像のアップロードするには、新しい投稿を作成して、その本文中に画像をアップロードすることで、画像をサーバ上へアップロードします。

そして、投稿の本文中にアップロードされた画像の URL を控えておきます。
URL は、投稿を HTML による編集モードに切り替えて、a タグの href 属性の値で確認します。

例）次の画像を Blogger の投稿の本文中にアップロードした場合

Blogger の投稿の本文中にアップロードした画像

↓

投稿を HTML による編集モードに切り替えて、
挿入した画像の a タグの href 属性の値を確認

↓

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWuDdkLp-RGld40JqwEbDyuPektjm2wwAtkJ1OEYjn2xUi-3h5xet1p1NU6rzDrcVQKndA4uv9dAZi852CPS4Va2-_PkrVNfod1YpK4EPn7g-bnbHnyabK1zl83xLM4fPwzZTXnin7pA/s1600/blogger_gadget_background-image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWuDdkLp-RGld40JqwEbDyuPektjm2wwAtkJ1OEYjn2xUi-3h5xet1p1NU6rzDrcVQKndA4uv9dAZi852CPS4Va2-_PkrVNfod1YpK4EPn7g-bnbHnyabK1zl83xLM4fPwzZTXnin7pA/s1600/blogger_gadget_background-image.png" /></a></div>

↓

a タグの href 属性の値を控える

↓

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWuDdkLp-RGld40JqwEbDyuPektjm2wwAtkJ1OEYjn2xUi-3h5xet1p1NU6rzDrcVQKndA4uv9dAZi852CPS4Va2-_PkrVNfod1YpK4EPn7g-bnbHnyabK1zl83xLM4fPwzZTXnin7pA/s1600/blogger_gadget_background-image.png


なぜ、Blogger にアップロードした画像の img タグの src 属性の値ではなく、Blogger にアップロードした画像に貼られたリンク（a タグ）の href 属性の値から URL を控えるのかというと、大きな画像をアップロードした場合には、 img タグの src 属性の値には元の画像ファイルを縮小した画像のURLが設定されている場合があるからです。
（勿論、縮小した画像で良ければ、そちらの URL を使用しても構いません。）

Bloggerでアップロードした画像ファイルの、URLのパターン
http://upa-pc.blogspot.com/2015/04/blogger-image-url.html
Dr.ウーパのコンピュータ備忘録

なぜ、投稿の画像のアップロード機能を使うのか？

Blogger では、ブログの装飾用に使う画像のアップロード機能は無さそうです。

（唯一、背景画像については、画像のアップロード機能があります。）

そのため、Blogger の投稿の本文中への画像のアップロード機能を使用して、画像をサーバ上へアップロードするのが最も手軽でしょう。

いったん、画像を投稿の本文中にアップロードしたら、その本文中から画像を削除したり、その投稿自体を削除してかまいません。一度アップロードした画像は、別途Picasaウェブアルバムなどで削除の手続きを行わない限り、本文中や投稿を削除した程度ではサーバ上からは消えません。

ガジェットのタイトルの背景に画像を設定する

ガジェットのタイトルの背景に画像を設定する場合には、次のように Blogger の設定のテンプレート→カスタマイズ→上級者向け にて、スタイルシートを設定します。

Blogger:ガジェットのタイトルにスタイルシートを適用する方法
http://upa-pc.blogspot.com/2015/04/blogger-gadget-title-css.html
Dr.ウーパのコンピュータ備忘録

すべてのウィジットのタイトルの背景に画像を設定

.widget > h2 {
  background-image: url("先ほどアップロードした画像のURL");
}

例）
.widget > h2 {
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWuDdkLp-RGld40JqwEbDyuPektjm2wwAtkJ1OEYjn2xUi-3h5xet1p1NU6rzDrcVQKndA4uv9dAZi852CPS4Va2-_PkrVNfod1YpK4EPn7g-bnbHnyabK1zl83xLM4fPwzZTXnin7pA/s1600/blogger_gadget_background-image.png");
}

ここでは、全てのウィジットのタイトルの背景に画像を設定しています。

ウィジットのタイトルの背景に画像を設定（例）

なお、上記の画像では背景画像が繰り返されていますが、スタイルシートで追加の設定を行うことで、繰り返し無し(background-repeat: no-repeat;)などの設定を行うことができます。

特定のウィジットのタイトルにスタイルシートを適用

#HTML5 > h2 {
  background-image: url("先ほどアップロードした画像のURL");
}

例）
#HTML5 > h2 {
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWuDdkLp-RGld40JqwEbDyuPektjm2wwAtkJ1OEYjn2xUi-3h5xet1p1NU6rzDrcVQKndA4uv9dAZi852CPS4Va2-_PkrVNfod1YpK4EPn7g-bnbHnyabK1zl83xLM4fPwzZTXnin7pA/s1600/blogger_gadget_background-image.png");
}

ここでは、id 属性として "HTML5" という値が設定されたウィジットのタイトルの背景に画像を設定しています。
各ウィジットの id 属性の値は、Blogger のテンプレートの HTML を見るか、ページのソースコードを見て確認します。

まとめ

このように、Blogger のガジェットのタイトルの背景に画像を設定するには、(1) 画像のアップロード、(2) CSS の設定というステップが必要です。

しかし、ガジェットのタイトルの背景に画像を設定することで、見栄えの良いブログを作ることが可能になります。

このブログ内の、他の”Blogger”についての情報を見る