BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» gooブログカスタマイズ カレンダー背景画像を設定する方法

このエントリーをはてなブックマークに追加

gooブログカスタマイズ カレンダー背景画像を設定する方法

   投稿日: 2017/08/03    投稿者:webコラム

aab22be0ceb82cae077608f2dfed14bb_s.jpg
 
こんにちは! ライターのモモタロウです。

今回は、gooブログカスタマイズ カレンダーの背景画像を設定する方法をお伝えします。


20170708-2.jpg
上の画像のカレンダー部分の背景画像を設定します。


今回は、表紙画像をカレンダー背景画像に設定します。

カレンダー背景に設定する画像を調整しよう


表紙画像の画像の大きさを「プロパティ」を開いて確認します。

25-1-1.jpg

幅が 640ピクセル
高さ 425ピクセル

―ということがわかります。

この画像では、カレンダーに表示するときに大きすぎるため、
画像加工ソフトなどで4分の1くらいに画像の大きさを変更します。
2分の1でもよいです。任意の大きさにします。

今回は、4分の1にしてみました。

画像の準備ができたら、gooブログにログインします。

20170708-2-2.jpg

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


/* カレンダー背景 */ 部分を探し出します。
20170708-3.jpg


/* カレンダー背景 */

.calendar{
font-size: ;
}

部分の

.calendar{
(ここに background-image: url(); というタグを挿入します)
font-size: ;
}

カレンダーの背景画像を設定しよう



先ほど大きさを縮小した画像を、gooブログにアップロードします。

20170708-2-1.jpg


貼付け用のタグ(オリジナル)のURLをコピーします。

<img src="http://blogimg.goo.ne.jp/user_image/24/94/d4020de851b9d00702c96267406b52d4.jpg">
URL部分のみコピーします。



これをHTMLデータに挿入した background-image: url(); 部分のカッコ内にペーストします。

プレビューで確認すると・・・
20170708-5.jpg

まとめ



いかがでしたか?

今回のカレンダーに表示させた画像は、画像の大きさを変更するたびに表示部分が変わります。横画像、縦画像によっても表示部分が変わります。

是非、いくつか試して作成したブログに合うカレンダー背景を表現しよう。


カテゴリ:

TOPへ