<< カレンダーのバックグランドにア... コメント欄の背景の指定方法 >>
 

カレンダーのバックグランドにイメージを表示する


めざせマイスキンを運営しているtomoさんのCSS編集 序2 模索編を参考にしてカレンダーのバックグランドにイメージを表示してみました。
tomoさんのCSSの解説は非常に分かりやすいので参考になります。



カレンダーのバックグランドイメージの表示


CSS編集で、DIV.CAL_BODY を探してみてください。この部分に画像を追加します。


a0031863_19243783.jpg

図1 設置例


DIV.CAL_BODY {


WIDTH: 150PX;
TEXT-ALIGN: CENTER;

  /*------- ここから追加 ---------*/

background-image:url(イメージファイル名);
background-repeat:repeat-x;
background-position:bottom;

  /*------- ここまで ---------*/


}
図2 CSS設置コード


今日のポイント
  • 今回選んだイメージが下に配置して表示する画像のため、 background-position:bottom;を指定し、X方向(横方)に画像が並ぶように background-repeat:repeat-x;で指定しています。




素材はとんとん工房さんからお借りしています。リンクウエアなのでご使用の際にはリンクをお願いします。

ぽっと

CopyRight(C) 2004 All rights reserved by potto37



追記
ブログの玉手箱さんのところで可愛い設置例とコードがあります。可愛いので是非見てください。

2004年9月9日
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-09-08 19:22 | │├カレンダー | Trackback(7) | Comments(13)
トラックバックURL : http://potto.exblog.jp/tb/997612
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Tracked from 流れ星の散歩道(^_-)-☆ at 2004-09-08 21:59
タイトル : ちょっとスキン変更!
ぽっとの陽だまり研究室を運営するぽっとさんのブログにカレンダーのバックグランドにイメージを表示するという、おもしろそうな技が紹介されていたので、トラバさせていただき、思わずトライしてみました。 背景に銀杏を入れてみたんですけど、紅葉に銀杏でちょっとくどくなっちゃったかな(笑)。 しばらく、このままで試してみたいと思います。 私のblogも色々とデコレーションしすぎて、少し整理したほうがいいのかもしれません。 時間を見て、ちょっと考えたいと思います。 あと、やってみたいなぁとひそかに思っているのは、MIDIを設置してみたいですね♪ 自動的に流れないよ...... more
Tracked from ブログの玉手箱 at 2004-09-09 20:29
タイトル : カレンダーの背景に画像を表示
ぽっとの陽だまり研究室さんのカレンダーのバックグランドにイメージを表示するを参考にしてカレンダーの背景に画像を表示しました。 ぽっとさんの記事は目が離せないですねぇ。 使用しているスキンが「ペーパー」ですので、カレンダーの部分に背景色が設定してありました。 それをリマークするのがポイントでした。 ●カレンダー本体部分 DIV.CAL { WIDTH : 158PX; MARGIN : 5PX 0PX; PADDING-BOTTOM : 10PX; BORDER : 1PX SOLID #CECECE; TEXT-ALIGN : CENTER...... more
Tracked from ブログの玉手箱 at 2004-09-09 20:34
タイトル : カレンダーの今日の日付にアイコンを表示
ぽっとの陽だまり研究室さんのカレンダーのバックグランドにイメージを表示するを参考にしてカレンダーの今日の日付にアイコンを表示しました。 どうせならということでアニメーションgifにしました。 ウインクする猫のイラストやこの丸いアニメーションのアイコンはとんとん工房さんからお借りしています。... more
Tracked from ken道いっちょくせん at 2004-09-26 17:38
タイトル : さらにカスタマイズ
カレンダーの背景に画像を入れて見ました この方法はぽっとの陽だまり研究室さんの記事を参考にさせていただきました。 カレンダーの背景画像はラルクマニアライフ(S.O.A.P.マニアライフか?)さんからお借りしていますので、当ブログからの持ち出しはご遠慮ください。 ほんとにいろんな方法があるんですねー。 まだまだやりたい事いっぱいです。 だんだんとオリジナリティが出てくるのが嬉しいです。... more
Tracked from AOK's Style... at 2004-12-02 01:47
タイトル : 早速スキン編集!
ぽっとの陽だまり研究室様のカレンダーのバックグランドにイメージを表示する を参考に トラブル解決、第一弾として早速、活用させていただきました。 なかなか簡単で最高!寂しいカレンダーがパッとしました (散々悩んでたわりに立ち直りは早いです。ハイ。) やり方は簡単。まずはカレンダーの指定をしている DIV.CAL {  } というところを探し(カレンダー全体の指定) この中に背景イメージの指定を入れてあげる DIV.CAL {         --------------...... more
Tracked from 姫のひとりごと。 at 2004-12-04 12:40
タイトル : カレンダーに背景をつける。
カレンダーに背景。 別になくてもいいかなと思ったんだけど、できるものなら一度やってみたい。 ここのところ、スキンをいじりたくてしょうがないらしい。ただの好奇心。 ぽっとの陽だまり研究室で背景のつけ方が紹介されていたので、 その通りにやってみることに。 DIV.CAL_BADY のところに、ふむふむ。 background-image:url(イメージファイル名); background-repeat:repeat-x; background-position:bottom; ...... more
Tracked from ■ 創生地 ■夢の架け橋.. at 2005-05-17 00:09
タイトル : 【スキン編集】僕のカレンダーに○○さんがぁ!!
HTMLが良くわからない、管理人のライナーです。 なんですか、藪から棒に。 でも本当に良くわからないです。HTMLのH程度しか分からないです。 H程度しか分からないんですってば! スケベなだけにとか言わないで。 でも分からないなりに、野生の感で必死に色々な所弄くり倒しています。 そんなこのブログを見た方に、「HTML知ってるじゃないの、じゃあここ教えて」って聞かれちゃったりします。もう事件発生です。 そう聞かれてしまうと、答えるべく勉強するのがちょっぴり良い所? うん、少しは良...... more
Commented by hikkoro-dayori21 at 2004-09-08 22:05
こんばんは。
さっそくトラバさせていただきました。ありがとうございます。

今まで少し寂しかったカレンダーもデコレーション出来て
嬉しいです♪

よろしかったら、ご覧下さいませ。
Commented by potto37 at 2004-09-08 22:14
hikkoroさん、こんばんは^^
設置が早いですね。
hikkoroさんのスキンは、やっぱり癒し系ですね。
Commented by hikkoro-dayori21 at 2004-09-08 22:55
そんなことないですよ。
なるべく柔らかい色を使おうとしていたら、こういう形になってしまいました。

もっとうまく素材を組み合わせられたら良いんですけど・・・。
Commented by aok_dm at 2004-12-02 01:54
ぽっとさん、こんばんわ。
直りました!!!いじくりました!!!
よかったら寄ってってくださいまし。
ありがとうございました。
Commented by potto37 at 2004-12-02 19:24
aok_dmさん、こんばんは^^
直ってよかったですね。
これで、いろいろ遊べますね。
Commented by camxhime at 2004-12-04 12:56
できましたぁ☆ またまたTBさせてもらいました。
また遊びに来ます♪
Commented by potto37 at 2004-12-04 17:30
camxhimeさん、こんにちは^^
TBありがとうございます。
いつも遊びに来て頂いてありがとうございます。
自分の思ったように出来ると嬉しいですね。
Commented by ocean_wind03 at 2005-01-10 18:34
はじめまして。
トラバさせていただきました。
参考になるものたくさんで、どれから手をだしていいかわかりませんが、少しづつ替えてみたいと思います。
とても参考になります。
Commented by potto37 at 2005-01-11 21:16
ocean_wind03さん、はじめまして^^
リンクありがとうございます。
スキン編集は楽しいので、いろいろ遊んで下さいね。
Commented by liner-s at 2005-05-17 00:13
どうもはじめましてっ!
色々悩んで探しているうちに、素敵なブログに出会えて幸せなライナーと申します。
とても勉強になりました(^^)
このカレンダーに画像を挿入する方法さっそくやっちゃいましたw
それと、紹介がてらTBさせて頂きました。
本当にありがとうございます。
Commented by potto37 at 2005-05-17 20:47
ライナーさん、はじめまして。
遊びに来ていただいて、ありがとうございます。
私のサイトはゆっくりペースなので、気長に遊びに来て下さいね。

Commented by appa_boston at 2006-06-26 06:43
はじめまして。APPAと申します。今回カレンダーに背景画を設定する方法を検索していた際に、こちらのブログに辿り着きました。いろいろと参考にさせていただきました。ありがとうございました。
Commented by potto37 at 2006-06-26 20:24
はじめまして、APPAさん。
カレンダーの画像のセンスがいいですね。
ゆっくり更新ですが、これからも楽しんで下さいね。
<< カレンダーのバックグランドにア... コメント欄の背景の指定方法 >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。