投稿日: 2017/08/03
投稿者:webコラム
こんにちは! ライターのモモタロウです。
今回は、gooブログカスタマイズ カレンダーの背景画像を設定する方法をお伝えします。

上の画像のカレンダー部分の背景画像を設定します。
今回は、表紙画像をカレンダー背景画像に設定します。
カレンダー背景に設定する画像を調整しよう
表紙画像の画像の大きさを「プロパティ」を開いて確認します。

幅が 640ピクセル
高さ 425ピクセル
―ということがわかります。
この画像では、カレンダーに表示するときに大きすぎるため、
画像加工ソフトなどで4分の1くらいに画像の大きさを変更します。
2分の1でもよいです。任意の大きさにします。
今回は、4分の1にしてみました。
画像の準備ができたら、gooブログにログインします。

左側のメニューバーにあるデザインの「テンプレート編集」をクリックします。
HTMLデータの下にあるCSSデータ内を編集します。上の画像の通りです。
/* カレンダー背景 */ 部分を探し出します。

/* カレンダー背景 */
.calendar{
font-size: ;
}
部分の
.calendar{
(ここに background-image: url(); というタグを挿入します)
font-size: ;
}
カレンダーの背景画像を設定しよう
先ほど大きさを縮小した画像を、gooブログにアップロードします。

貼付け用のタグ(オリジナル)のURLをコピーします。
<img src="http://blogimg.goo.ne.jp/user_image/24/94/d4020de851b9d00702c96267406b52d4.jpg">
URL部分のみコピーします。
これをHTMLデータに挿入した background-image: url(); 部分のカッコ内にペーストします。
プレビューで確認すると・・・

まとめ
いかがでしたか?
今回のカレンダーに表示させた画像は、画像の大きさを変更するたびに表示部分が変わります。横画像、縦画像によっても表示部分が変わります。
是非、いくつか試して作成したブログに合うカレンダー背景を表現しよう。