ブログの背景のヘッダー画像の付け方とサイズについて

Bloggerでの背景のヘッダー画像の付け方

Imaginaryの背景のヘッダー画像はBloggerの管理画面のテーマのカスタマイズ（テーマデザイナー）の背景の背景画像の「背景を変更」からBloggerの既存のものを選択するか使用中のデバイスに保存してあるものをアップロードして付けられます。

Bloggerのテーマデザイナーの背景の背景画像の選択 — テーマデザイナー｜Blogger

使用可能な画像URLが分かる場合はBloggerの管理画面のテーマのHTML編集かバックアップと元に戻すによるオフラインのファイル編集からブログのテンプレートのソースコードに追加することもてきます。

<Variable name="body.background" description="Background"
      color="$(blog.header.color)"
      type="background"
      default="$(color) none repeat scroll center center" value="#a9a9a9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXN3Lk09HUSowmyKtK7rmmkur4s9ykdqHK2uM7PAHM7d4x98rn1jrvj0uWcPPYu7xl5Q0PPF3rXbpvXDfdyQHyXrkxnKIFh8CPJjSb9G6cf6VDyyxUS9G99K8el5NFE5DhnwU_1EdPVLQ/s100/forest.jpg) repeat scroll top center"/>

ソースコードの上の方のb:skin内のBackgroundsのGroup内のbody.backgroundのVariableで、帯文字の部分が背景のヘッダー画像のURLになります。

画像URLの冒頭の「https:」などは付けても付けなくても構いません。

Bloggerの既存の背景画像を使用した場合はブログのフッターに「テーマ画像の作成者」のリンクが表示されて画像の作成者の名前から画像ページへ行くことできるようになります。

自分で背景画像をアップロードしたり、ソースコードに画像URLを追加した場合でもソースコードの書き換えによって「テーマ画像の作成者」のリンクを表示することができます。

Imaginaryの背景のヘッダー画像のサイズ

背景のヘッダー画像の横幅：画面の大きさで変化

Imaginaryでは背景のヘッダー画像の横幅はブログ全体の横幅と一致しています。

デスクトップのパソコンなどの大画面ではメインコンテンツの幅とサイドバーの幅とコンテンツのマージン（余白）、モバイルのタブレットやスマホなどの小画面ではメインコンテンツの幅のみ（サイドバーが開閉式でスペースを取らないため）がブログ全体の横幅です。

ブログのそれぞれの幅はBloggerの管理画面のテーマのカスタマイズ（テーマデザイナー）の詳細設定の「幅」で確認・変更することができます。

Bloggerのテーマデザイナーの詳細設定の幅 — テーマデザイナー｜Blogger

背景のヘッダー画像の最大幅はデスクトップの場合の「サイドバーの幅＋メインコンテンツの幅＋コンテンツのマージン」になります。

Imaginaryの初期値は「295px＋925px＋20px」で、1240pxです。

背景のヘッダー画像の縦幅：全ての画面で共通

Imaginaryでは背景のヘッダー画像の縦幅（高さ）はデスクトップのパソコンなどでもモバイルのタブレットやスマホなどでも共通しています。

背景のヘッダー画像の縦幅はBloggerの管理画面のテーマのカスタマイズ（テーマデザイナー）の詳細設定の背景の「背景の高さ」で確認・変更するこどできます。

Bloggerのテーマデザイナーの詳細設定の背景 — テーマデザイナー｜Blogger

Imaginaryの初期値は413pxです。

背景のヘッダー画像の画面の大きさによる違い

Imaginaryの背景のヘッダー画像は全ての画面で同じものを一枚だけ使いますが、デスクトップのパソコンなどの大画面とモバイルのタブレットやスマホなどの小画面では表示の仕方が変わります。

デスクトップはブログ全体の横幅と背景画像の高さから確保されたスペースに合わせて表示されます。すなわち大きな画像を使うと縮小され、小さな画像を使うと拡大され、ブログ全体の横幅に合わされます。使用する画像の縦横比が確保されたスペースの縦横比と合わない場合はブログ全体の横幅に拡大か縮小されたところから部分的に表示されます。

モバイルはデスクトップでブログ全体の横幅に合わせて調整された画像をタブレットやスマホなどのそれぞれの画面幅に合わせて部分的に表示しまます。

デスクトップで確保されたスペースに収まり切らない（余りがある）かモバイルの背景のヘッダー画像のどの部分が表示されるかはBloggerの管理画面のテーマのカスタマイズ（テーマデザイナー）の背景の「配置」で指定できます。

六ヵ所が選択可能で、左上と中上と右上と左下と中下と右下です。

注意点として使用する画像に確保されたスペースに対する余りがなければ上下か左右で、どちらを指定しても同じになります。

背景のヘッダー画像の最適なサイズの決め方

デスクトップで確保されたスペース、Imaginaryの初期値だと1240×413pxの画像を使うとぴったりで表示されますので、そこからモバイルで好きな部分を表示するように配置を部分的に指定すると纏め易いでしょう。

ブログでは背景のヘッダー画像の下の方にブログ名や説明文などのヘッダーか非常に長くならなければ（高さを大きく取らなければ）メインコンテンツ（デスクトップはメインカラムとサイドバー、モバイルはメインですのみ）が重なるようになってます。すると背景のヘッダー画像の下の方は確保されたスペースの範囲内でも見えなくなりますので、デザインとしては背景のヘッダー画像がヘッダーやメインコンテンツとの関係で実際にどのくらい見えるようになるかを考慮して設定すると良いと思う。