きゃりこぶろぐ

Bloggerでやってる方のブログの、ヘッダ画像を差し替えたかっただけなのに、結局テンプレートを変更した話です。



↑トップスはSaNaRaeでゲットしたMikunchさんSummer Dress Gachaのレア。マイトレ用。雑な着こなしでごめんなさい。服はとってもかわいいです。質感や襟のディテールも素敵。

Bloggerに登録したのが2009年で、その時に選んだテンプレートのまま、ヘッダ画像だけ何度か差し替えてきました。で、今回、約4年半ぶりに画像を差し替えようとしたら、久しぶりすぎて手順が思い出せません。ズルズル古いテンプレート使ってきたけど、どうせやり方忘れちゃったのなら、新しいテンプレート使う前提で調べたほうが生産的なので、テンプレート変更を決断。これまで通りヘッダ（画像入り）、本文、右サイドバーのシンプルな形にしたかったので、「シンプル」テンプレート（本棚の壁紙）を選択しました。

カスタマイズするにあたって参考にしたのが、こちらの記事。

Bloggerへの道 「画像サイズを気にせずBloggerの背景カスタマイズしよう」
http://friendofmine-woh.blogspot.jp/2013/12/bloggerblogger.html

この記事では画面全体に背景画像を敷く場合について解説しているので、HTMLを編集する部分とかは変わってきますが、画像付きの説明がわかりやすかったです。

直接Bloggerテンプレートの情報ではありませんが、私はこの記事を読むまで、ウェブブラウザの「要素を検証」機能（私はFirefoxなので「要素を調査」ですが）を使ったことがありませんでした。開いたことはあったけど、編集できるなんて思いもよらなかった。この機能を使えば、他人に試行錯誤の過程を見られることもなく、納得行くまでいじり倒せます。BloggerでHTML編集する際も、「テーマをプレビュー」ボタンを使えば、保存せずに編集結果を確認することができますが、うっかり何かやらかすのが怖いので、HTML編集画面を開くのは最後の最後にしたいです。

参考までに私の場合
240行目あたりの

/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}

これを

/* Header
----------------------------------------------- */
.header-outer {
height: 200px;
background: url(画像URL) 50% 50% no-repeat;
}

こう変えました。ヘッダエリアの高さはフォントサイズで決まるようで、そのままだと狭すぎるので200pxに指定。画像は960x200で作りました。画面サイズが960pxで両端10pxのパディングがあるので、表示されるのは940pxですが。まだちょこちょこ気になる箇所はあるけど、今回はこのぐらいで勘弁してやる的な。Mac+Firefox,windows+ie,Android+Chromeで見て大丈夫だから大丈夫ですよね、多分。



そんなわけでビフォーアフターがこちら。変更前の記事が古いのは、作業前にキャプチャするのを忘れて、Wayback Machine（https://archive.org/web/）から取ってきたからです＾＾；