ブログの背景画像を全画面で表示する方法

結城永人
-12月 29, 2021

Imaginaryの通常の背景画像はおよそブログのヘッダーのみに表示されるように高さが指定されています。背景画像の高さはBloggerの管理画面のテーマのカスタマイズの詳細設定の背景から一定の範囲内で調節することができます。ブログの背景全体を覆い尽くすデザイン Imaginaryで背景画像の全画面表示を行ったブログのフッター

もう一つの背景画像の表示の仕方としてデバイスの全画面を対象にする、いい換えるとブログの背景全体を覆い尽くす方法について紹介します。Imaginaryのソースコードを書き換えるBloggerの管理画面のテーマのメニュー（カスタマイズの右横のボタンから開く）の「HTMLを編集」、または「バックアップ」と「元に戻す」でテンプレートのXMLファイルを書き換えるかのどちらかで行います。Imaginaryのソースコードのskin内のCSSを編集します。書き換え前のCSS.bg-image-container {width:min(100vw, $(sidebar.width + content.width + content.margin));height:$(body.background.height);position:absolute;overflow:hidden;z-index:-1;contain:strict}※テンプレートの古いファイルは異なりますので、新しいものをダウンロードして使って下さい。書き換え後のCSS.bg-image-container {width:min(100vw, $(sidebar.width + content.width + content.margin));height:100lvh;position:fixed;top:0;overflow:hidden;z-index:-1;contain:strict}※太字が変更する箇所です。skin内の説明文の「ヘッダーの背景画像」のところの「bg-image-container」のclassの縦幅のheight:$(body.background.height)を画面の最大の高さの100vh、positionの値を位置の固定のfixedに変更します。そして画面の上端から表示するためにtop:0を追加します。Imaginaryで全画面の背景画像を取り入れるとブログの背景色が付いてないヘッダーとフッターとインデックスページの複数のスニペットの隙間やパソコンではメインカラムとサイドバーの隙間に背景画像が見えることになります。背景画像を親ボックスから固定するために管理画面のテーマのカスタマイズの背景の配置の「ページとともにスクロール」のボタンは停止します（普通に背景画像を固定すると処理が重いのか、ブラウザのスクロールが悪くなることが確認されたので、親ボックスから固定する方法を取ります）。画面に固定して一つの背景画像を表示しますので、なるべく縦長の画像をアップロードして使用すると表示領域に合い易いです。小さな画像を敷き詰める場合 Imaginaryで背景画像の全画面表示の敷き詰めを行ったブログのヘッダー

背景画像の全画面の設定で繰り返しを設定すると複数の同じ画像を背景に敷き詰めることがでぎす。やり方は通常の全画面のカスタマイズを導入してからさらにテンプレートのCSSを編集します。skin内の説明文の「ヘッダーの背景画像」のところの「bg-image」のclassのbackground-sizeの値を表示領域を十分に占めるcoverから次の三つのどれかに書き換えます。

auto：画像の大きさを変えずにそのままで表示する

単位付きの数値：画像の大きさを「100%」や「50px」などの一定のサイズで表示する

autoはアップロードした画像の大きさを変えないので、画面よりも小さな画像を使わないとブログの背景に繰り返して敷き詰めることはでぎません。単位付きの数値の場合は画面よりも大きな画像をアップロードしてもそれを小さく扱ってブログの背景に繰り返して敷き詰めることができます。

background-size（MDN）

CSSのbackground-sizeの値はその他に縦横を分けて指定したりすることもできます。背景画像の敷き詰めを行う場合、小さな画像を繰り返すためにCSSのbackground-repeatの値をrepeatにしなくてはなりません。ImaginaryではBloggerの管理画面のテーマのカスタマイズの背景の配置で「並べて表示」を設定すると完了します。Bloggerで用意された背景画像を使うと配置の項目が出て来ませんので、テンプレートのソースコードの編集が必要になります。背景画像を設定した後にBloggerの管理画面のテーマのHTML編集などからskin内のbody.backgroundのnameのVariableタグのvalueのno-repeatをrepeatに書き換えて下さい。背景画像の敷き詰めは処理が重いのか、ブラウザのスクロールが悪くなり易いようで、なるべく小さな画像（容量が少ないもの）をアップロードして使うと安定します。