BLOG CATEGORY

Monthly Archives

長フチコンテンツ

サイバーアクセル？何者や

サイバーアクセル？<br />何者や
サイバーアクセル？
何者や

ホームページ制作？だからどうした①

ホームページ制作？<br />だからどうした①
ホームページ制作？
だからどうした①

ホームページ制作？だからどうした②

ホームページ制作？<br />だからどうした②
ホームページ制作？
だからどうした②

SEO対策？怪しい話しか聞かないぞ

SEO対策？<span>怪しい話<br />しか聞かないぞ</span>
SEO対策？怪しい話
しか聞かないぞ

集客アドバイザー？よう分からん

集客アドバイザー？<br />よう分からん
集客アドバイザー？
よう分からん

俺なりのまとめを伝える！

俺なりのまとめを伝える！
俺なりのまとめを伝える！

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズＴＯＰ » ブログ » 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へ