Bloggerへの道 「画像サイズを気にせずBloggerの背景カスタマイズしよう」

Bloggerの背景画像をカスタマイズしてみましょう。
普通ならば、Blogger管理画面で[テンプレート]→[カスタマイズ]と選択していき、[Blogger テンプレート デザイナー]を起動させ、[背景]にて設定していきます。しかしこの方法だと、いくつかの条件に縛られ、自由なカスタマイズが出来ているとは言えません。


という訳でテンプレートデザイナーを使わずに背景画像を設定してみましょう。この方法であれば、下記の縛りを回避出来ます。

①背景画像の容量300KB以下という制限を無視出来る
テンプレート以外の背景画像を新たにアップロードしようとすると、300KB以下の制限を受けます。確かにコレ以上の容量になると、ブログの表示速度の低下が否めないけれど、ちょっと面倒。
それに背景画像が一枚絵にする場合、画面いっぱいになるような大きめの画像が必要になります。例えば1800×1600以上をBloggerは推奨しています。これくらいの大きさになると結構300KB超えてくるんですよね。勿論1MB超えるような画像は圧縮などして容量は小さめにすべきなのですが、301KBでも駄目となると圧縮に神経質にならざるを得ませんね。

②背景画像の位置を自由に設定出来る
テンプレートデザイナーでの背景設定だと、使用した画像の映したい部分が見えるような思い通りの位置に設定する事が難しいと思います。例えばアップロードした画像の場合は、左上/左下/中央上/中央下/右上/右下の6分割された配置のみの設定しか出来ません。手動で設定すれば、自由な位置を表示する事も出来ますし、画像全体を表示することも可能です。というかテンプレートデザイナーでそれが出来ないのはどうなんだろうか…。

Bloggerの背景画像を手動でカスタマイズ

1. 下準備（ブログ背景をリセットする）

さて、まず「テンプレートデザイナー」開きましょう。いきなり上記の文を無視してみましょう。
[テンプレート]→[カスタマイズ]と進み、[テンプレートデザイナー]→[背景]へ。そこで背景画像を削除しましよう。もし背景画像を設定していなくて、[なし]となってる人はそのままでOKです。
次はテンプレート毎にやることが違いますので、場合別に記載しました。



①シンプルテンプレート/画像ウィンドウ/ウォーターマーク/エスィリアル/旅行の場合
大体はこのやり方でOKです。
まず[テンプレートデザイナー]の「上級者向け」→[背景/Background]タブへ。
ここで、[外側の背景]を透明(transparent)にしましょう。ここで透明にしないと、背景画像を手動で設定する時上手く表示されません。[メインの背景]は本文の背景なので、放置でOKです。そして右上の[ブログに適用]。

②動的ビューの場合
特に設定は必要ありません。

③Awesome Inc.の場合
[テンプレートデザイナー]の[上級者向け]→[ページ]の[背景色]を透明にします。

これで背景が透明な状態になりました。今背景はガラス張りの状態になっていて、その後ろの手動で画像を映します。この作業をしないとテンプレートの背景色が邪魔して上手く画像が見えないことがあるので。
この作業をテンプレートデザイナーを使わずにHTMLに直接入力しても良いんですが、こっちの方が正しい手順だし、説明が楽なのでテンプレートデザイナーを使うことにしました。

2. 下準備2（画像を探してアップロード）

まあこれは各自で探して下さい。お好きなモノを…。自分で作成したものや、自分で撮影したものなど等。参考までに僕が利用している無料壁紙素材サイトを紹介。どれもフリーのHD画質の壁紙を紹介していて便利ですよ。

・HD Wallpapers・Wallpapers Wide・Only HD Wallpapers

画像サイズに関しては16:9の画像をオススメします。僕はいつも[1366x768]の画像を選んでいます。何故なら最近のパソコンはもう16:9のHD画質のモニターなので、背景画像もそれに合わせましょう。


次にアップロードします。いつものようにBloggerの画像アップロードツールを利用しましょう。
[新しい投稿]を選択し、投稿ツールバーの[画像を挿入]を選択。そしていつものようにアップロードする画像を選択し、アップロード。アップロード後に画像を選択すると、サイズを選ぶことが出来ますが、ここを[元のサイズ]にしましょう。小さいサイズのままだと、背景に設定した時小さいままになります。この時、複数の背景候補画像を一気にアップロードしておくと後々便利ですよ。最初にアップした画像が気に入らなかった時に一々アップし直すのが面倒ですからね。
それで[元のサイズ]にした画像を[右クリック]→[画像のURLをコピー]します。

3. HTMLエディタで直接画像URLを記述

Blogger管理画面の[テンプレート]→[HTMLの編集]をクリック。するとブログを構成するHTMLコードが表示されます。その何処か適当な場所を左クリックした後、[Ctrl]+[F]で"body {"を検索してみましょう。"body"と"{"に１文字スペース空けるのがミソ。
ちなみに下記画像は、僕のサンプルサイトのHTMLエディタで見る背景画像部分のコードです。クリックすれば拡大して見れるので、参考までに。

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

上記のようなコードが最初に検索に引っかかると思います。この"background:"以降を先程の画像URLを使った下記コードのような上書きします。[動的ビュー]にはbody内に"background:"が無いので自分で作成して下さい。

background: url(先程コピーした画像URL);

ここで注意するのが、url以後の画像URLが[ () ]で括られているか？その後が、[ ; ]で区切られているか？body以後が[ {} ]で括られているか？どれか消えていると上手く表示されないので注意。

入力後、テンプレートを保存をクリック。そしてそのページの一番上にある[ブログを表示]をクリックし、新しいタブに表示されるブログで、背景画像の具合を確認します。
現段階では、画像が背景いっぱいに何枚も並んでいる状態で、スクロールに合わせて上下に背景も流れていきまます。これを何とかしたい場合は、もう少し[background: ]に記述が必要になります。

（１）背景画像を固定したい場合

スクロールに合わせて動いてしまう背景画像を固定してみましょう。画像によっては、固定しないとスクロール中に画像と画像の切れ目が見えてしまいます。せっかくオシャレな背景画像を選んだとしても、自分が見せたい意図とは違った印象を持たれてしまう可能性も。背景画像を固定すれば、いくらページを上下にスクロールしても、動くブログ内容に対して、同じ位置で背景画像を利用者に見せることが出来ます。サンプルサイトの背景は固定してますよ。

やり方は簡単。

background: url(画像URL) fixed;

先程のHTMLエディタで編集したbody{}内の、[background: url (画像URL)]の後ろに[fixed]と入力するだけ。わかりやすく半角スペース程度空けて入力しておきましょう。その後はしっかり[;]を入力。[;]は、ここで終わりですよという指示なので忘れずに。これで終わり。

（２）位置を微調整したい場合

固定した後は、見せたい背景画像の位置を微調整します。このままで大丈夫って方はやらなくても大丈夫です。

background: url(画像URL) fixed 10px(横位置) 15px(縦位置);

こんな感じでpx入力で微調整が出来ます。横位置は画面左端を0pxした場合、縦位置は画面上部を0pxとした場合で設定します。なので正の値を入力すれば右方向へ、下方向へ移動していきます。逆に負の値を入力すれば左方向、上方向に移動していきます。

この方法は簡単なんですが、ちょっと問題が出る可能性も。上記の画面左端というのは、見る人のパソコンのディスプレイの左端という事。自分のパソコンのディスプレイの感覚で背景画像を設置すると、もしかしたら他の大きなパソコンで見たら違って見えるかも？そういう場合は[％]で入力。

background: url(http://～.png) fixed 50% 50%;

こうすると画像の縦横真ん中の位置が画面の中心に来るように設定出来ます。そうすればどんな画面のパソコンでも見せたい位置がずれるってのは結構防げると思います。この[％]の説明はちょっと面倒臭いのでこの画像（こちら）を見て何となく理解してくれれば嬉しいです。

とにかく、よくわからないよ！って人は上記のような[fixed 50% 50%]のコードを入力しておけば背景画像の中心が画面の中心に固定されて良い感じに表示されると思うので是非。

（3）画像を繰り返し表示させない場合

例えば固定スクロールにした場合、背景画像を連続して表示させる必要はないですよね？だって画面は変わらないので、一枚の背景画像で事足りるように設定したわけですから。そういう場合は先程のコードの後ろにでも[no-repeat]と付けて下さい。そうすれば一枚だけの表示になり、表示速度の低下を防ぐ手助けにもなるかも？今度記事にしようと思ってますが、表示速度が遅い主な要因はjavascript、そして画像表示なんですよね。

background: url(http://～.png) fixed 50% 50% no-repeat;

最後に

僕が文章にするとクドく、そして長くなってしまうんですが、やる事は単純な作業なので、すぐ出来ると思いますよ！
背景画像はブログを彩る部分で最も大きな要素。出来るだけ美しく、綺麗に表示させたい所です。是非色々試してみてください。

おまけ. [要素を検証]を利用して、変化をリアルタイムで確認しながら位置を微調整 

当ブログはGoogle Chrome推奨しているブログなので、今回もGoogle Chromeを利用した調整方法を紹介します。他のブラウザでも普通に応用できると思いますが。

まず、ブログに表示されている背景画像部分を[右クリック]して[要素を検証]をクリック。


するとブラウザ下部にHTMLコードが表示されます。そこの上の方にある[<head>...</head>]の直下にある、<body class>をクリックします。すると右側の[styles]という部分に

body {
font: normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
color: #000000;
background: url(先程入力した画像URL);
padding: 0 0 0 0;
}

みたいなコードがあると思います。人のテンプレートでの設定で若干違うとは思いますが、body{}内に、先程入力したbackgroundコードは記載されていると思います。この部分を弄ることによって、位置の微調整などをリアルタイムに確認しながら行うことが出来るのです。
ただ注意してほしいのは、ここで変更した事はあくまで「検証用」なので、実際には変更されていません。変更をしっかり反映させたい場合は先程のHTMLエディタで書き込まなければいけません。

ただこの方法をとれば、上記で説明したようなやり方（HTMLエディタに入力→[保存]→[ブログを表示]あるいは[プレビュー表示]）よりも速く背景画像の調整が可能なのです。例えば、[background: url()]内に設定したい背景画像の画像URLを入力すると、パッと今見ている画面の背景がその画像URLになっています。何か違うなと思ったら別の画像URLを入力し、スピーディに検証することが出来ます。そういう訳で、「画像をアップロードする際は複数用意しておくと良いです」と上記で述べたわけです。
また、画像位置を[px]や[％]でで調整する場合も便利。例えば、

background: url(画像URL) fixed 10px 15px;

と入力します。そして10pxの所を一旦クリック。その後矢印キーの上を押すと、11…12と変化していき、それに合わせて背景画像も左から右に1pxずつ移動していってるんですね。
つまり、リアルタイムに変動していく背景画像をここで微調整し、求める値が見つかったら、その時初めてHTMLエディタにその値を入力すれば良いわけです。この方が圧倒的に速く微調整出来ますし、目で見ながら変化を確認できるのでイメージしやすいですし。
この[要素を検証]は、ブログデザインを考えていく中で有用過ぎるツールなので是非使っていくことをオススメします。

例えば、このブログデザイン格好良い…どういうコード（CSS）なんだろ？と言って、[要素を検証]を使って参考にすることも可能なのです。