貼っていただけたらうれしいです


Yahoo!ブックマークに登録



Googleブログ内検索
Loading
2007-12-11 18:22:31

CSS カレンダーに画像をつけてカレンダーらしく?

テーマ:ブログ

なんか・・・・・
むずかしく、むずかしくやっていると、いうか
よく考えないで思いつきでやっちゃってる・・・
フォローしておくとチャント完成はしているんですよ・・・・
タイトル文字→画像にとか・・・今回のカレンダーとか・・・・




ただ・・・・
もっとカンタンにできる方法があるって~だけですから・・・・
やり終わって、あとで気がつくだけですから・・・・・




今回は・・・・
backgroundに複数の画像を配置できないので

ペンギンのアニメーションGIFをバラして・・・・50枚くらいになりました

1枚づつタイトル画像をくっつけて・・・それを50枚加工して・・・

全部をあわせて・・・またアニメーションに戻して・・・・・

・・・・・なんて、面倒なことやっていました・・・





でも 、落ち着いて考えてみると・・・・・・・

??少し前にも同じこと書いたような・・・・・




下がダメなら・・・上があるじゃん・・・・!!

ってふつーならすぐ気が付くのでしょうが・・・・・



ようは、

タイトルの下ではなくて

カレンダーの上ってことなんです

これならすでにタイトルに画像を使用している方でも導入可能ってことで紹介できます



例のごとく、青字部分をCSSの下にコピペしてください


#calendar .menu_frame{
margin:5px auto;
padding:130px 0 0 0;
background-image:url(画像のURL);
background-repeat : no-repeat;
background-position: center top;
}




カレンダーに画像



カレンダー自体の背景に画像を使う場合


#calendar .menu_frame{
background-image:url(画像のURL);
background-repeat : no-repeat;
background-position: center bottom;
}


カレンダー背景に画像

※画像を選ばないとカレンダーが見難くなります
  か、数字を白くしちゃうとか・・・・
  前もって画像のサイズをカレンダーに合わせておいてください


ちなみに・・・・

曜日の色変えは(日を赤に、土を青にする場合)


#calendar .sun{
color: #ff0000;
}

#calendar .sat{
color: #0000ff;
}




※スキンによっては変更できない場合があります
※画像はサイドの幅に収まるサイズに加工してから使用ください





CSS カレンダーをかわいく

CSS カレンダーをかわいく 2

CSS カレンダーをかわいく 3

CSS カレンダーをかわいく 4

CSS カレンダーをかわいく 5

CSS カレンダーをかわいく 6

CSS カレンダーをかわいく 7

CSS カレンダーをかわいく 8

CSS カレンダーをかわいく 緑組応援団

PR

コメント

[コメントをする]

75 ■ありがとうございました

更新して待ってたら出ました
タイムラグがあったのかもしれなかったのですね
ありがとうございました!

76 ■無題

初めまして。
参考にさせて頂いております。
カレンダーをしてみたのですが、margin:5px auto;の部分がどうしても大きくあいてしまうのですがどのようにしたら良いのでしょうか?
宜しくお願い致します。

77 ■>沙羅さま

すみません記事の書き方が悪かったようで・・
間違っているのは
http://ameblo.jp/exlink/entry-10079857036.html
コチラの記事のほうです


#calendar .menu_title{/*カレンダー*/
background-image:url(http://stat.ameba.jp/user_images/20090509/23/yoshie1969/b0/b5/g/t01400030_0140003010178465127.gif);
width:165px;/*画像の横横幅が違う場合はそのつど指定*/
height:190px;/*画像の縦、縦が違う場合はそのつど指定*/
}

画像は同じなので・・・
width:165px;/*画像の横横幅が違う場合はそのつど指定*/
height:190px;/*画像の縦、縦が違う場合はそのつど指定*/
この2行は削除してください

78 ■無題

早速削除してみました(*^.^*)
有り難う御座いますm(_ _)mペコリ
これからも宜しくお願い致しますp(^^)q

79 ■無題

かわいくできました!
ありがとうございます!!

80 ■無題

カレンダーの文字の色を変えるにはどうしたらいいですか??

81 ■>はるなさま

>カレンダーの文字の色・・
タイトル?
月?
曜日?
日付?
記事のある日付?
どれでしょう?

82 ■無題

すいませんあの、サイドメニュータイトルの「カレンダー」と、カレンダーの間があいてしまうのですが直せますか?

83 ■>空姫(☆ゝωб)♪さま

#calendar .menu_title{/*カレンダー*/
background-image:url(http://member.fumi23.com/api/getpicture.php?mid=212528&width=600&height=600&type=imagebox&file=9c99d84f931ca3ca40e12470196c4999.png);
width:165px;/*画像の横横幅が違う場合はそのつど指定*/
height:190px;/*画像の縦、縦が違う場合はそのつど指定*/
}


#recent_comment h4.menu_title{/*最近のコメント*/
background-image:url(http://stat.ameba.jp/user_images/20090813/14/happy-smile-39/ec/66/p/t01620071_0162007110232090061.png);
height:71px;/*画像の縦、縦が違う場合はそのつど指定*/
}


width:165px;/*画像の横横幅が違う場合はそのつど指定*/
height:190px;/*画像の縦、縦が違う場合はそのつど指定*/
とか
height:71px;/*画像の縦、縦が違う場合はそのつど指定*/
これは画像サイズが違う場合はこうしてください・・って例ですので
画像サイズが同じなのでこの部分を削除ください

84 ■無題

な、なるほど!!
できましたうれしいです!!
ありがとうございましたぁ♪

85 ■無題

画像のURLを入れたんですが
  CSSに入れても表示されませんでした;;
  何故ですか?

86 ■無題

カレンダーの文字色はどう変えるのですか?

87 ■>翼//.さま

カレンダーの文字色は
http://ameblo.jp/exlink/entry-10100817699.html


最初にCSSに書いたここ・・
background-image:url(C:\Documents and Settings\Briiaan Myaaa\My Documents\原画画像 。CUTEY♪JAM。.files\20071216_274905.jpg);
画像のURLが違います
これはあなたのパソコンの画像がある場所であなた以外には誰も見ることが出来ません

とりあえずはすぐ下に正しい画像のURLを入れた同じCSSがあるので表示されていますが
この部分は削除しておいた方がいいです

88 ■無題

初めてCSSを触ります。
設定変更前のプレビューではうまく仕上がっていたのですが、変更を保存すると「リクエストは既に処理中であるか無効です」のエラーが出てしまい、変更できませんでした。
初心者なので、わかりやすく教えていただけるとうれしいです。
よろしくお願いします♪

89 ■>Anisaさま

なんかアメブロ側のエラーなのに
さもこちらが間違っているようなエラーメッセージには頭にきますが気にしないで下さい

わたしも時々やられています

気にしないで保存ボタンを押してください
何回かやってダメなら
アメブロの機嫌が悪いようなので
CSSをメモ帳とかに保存しておいて後日やり直せばOKです

90 ■無題

わかりました。
またTRYしてみます☆
これからも、こちらでいろいろと勉強させていただきますね。
どうもありがとうございました♪

91 ■無題

全然できません。

#calendar .menu_frame{
margin:5px auto;
padding:130px 0 0 0;
background-image:url(画像のURL);
background-repeat : no-repeat;
background-position: center top;
}


↑これでやりたいんです。

教えてください。

92 ■>邑夏さま

CSS 動きません・・ 質問するその前に
http://ameblo.jp/exlink/entry-10131393930.html

ここの1番目の原因がCSSの一番最後にあります
なので・・どんなCSSを最後に付け加えても全滅状態です

93 ■無題

えっと・・・1番後っていうのは・・・
どのあたりでしょうか?

どこら辺の後のことでしょうか?

94 ■>邑夏さま

1番最後・・
1番下のことです

/*サイドバーの後ろに画像挿入*/

#sub_a{
background-image : url(http://stat.ameba.jp/user_images/20090907/20/tsuna-hayato-takeshi/d6/10/j/t02200367_0240040010248976278.jpg) ;/サイド左/
}
#sub_b{
background-image : url(http://stat.ameba.jp/user_images/20090907/13/tsuna-hayato-takeshi/02/24/j/t02200367_0240040010248731926.jpg) ;/サイド右/
←■■ 閉じられていますか?■■

95 ■質問です。


カレンダーの上に画像をやりたいんですが、
何回もやってるのに「リクエストは既に処理中であるか無効です 」って出てきてできません。
これは画像が大きすぎるからでしょうか?

大きさは450×338ピクセルです。

何がいけないのか全くわかりません。


ご回答いただけると助かります。

96 ■>★陸夢★さま

リクエストは既に処理中であるか無効です

・・・
これはしょっちゅう出ます・・
無視して保存ボタン
それでもダメならCSSをコピーしてメモ帳とかに貼り付けて保存しておいて
時間を置いてから再度やってください

ただ・・サイドは横幅170pxですから・・
画像が大きすぎるのは確かです
CSSではサイズ調整は出来ませんので表示するサイズに加工してから使ってください

97 ■無題

>実験委員さま

ご丁寧にありがとうございました!
これから頑張ってみます★

98 ■質問お願いいたします。

これと「カレンダーをかわいく」の記事にあるものとを併用したいのですが、
色が変わっている部分(記事を書いた日)と重なる部分の画像が消えてしまいます。
通常のカレンダーだと消えることはないのですが・・・

できればカレンダーの色も変えたいので、併用できる方法がありましたら教えてください。

99 ■>ちょびさま

こんなことですか?
カレンダー18に手を加えたのですが・・

/*■■ カレンダー18 ■■*/
#calendar table {/*全体*/
color:#ffc0ff;/*文字色*/
font-weight:bold;/*太文字*/
font-size: 1.2em;/*文字サイズ*/
border-top: 1px #ff80ff solid;/*線の太さ 色 線種*/
border-left: 1px #ff00ff solid;/*線の太さ 色 線種*/
border-right: 1px #ff00ff solid;/*線の太さ 色 線種*/
border-bottom: 1px #ff00ff solid;/*線の太さ 色 線種*/
border-collapse: collapse;
}
#calendar table caption a{/* <<と>> */
color:#ff00ff;/*文字色*/
padding: 3px 15px 0;
}
#calendar table caption{/*月*/
color:#ff00ff;/*文字色*/
border-top: 1px #ff00ff solid;/*線の太さ 色 線種*/
border-left: 1px #ff00ff solid;/*線の太さ 色 線種*/
border-right: 1px #ff00ff solid;/*線の太さ 色 線種*/
padding: 3px 15px 0;
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border-bottom: 1px #ff80ff solid;/*線の太さ 色 線種*/
padding: 0;
}
#calendar table td a{/*記事のある日*/
color:#ff00ff;/*文字色*/
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #ff00ff; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ff4080;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#80ffff;/*文字色*/
}

100 ■ありがとうございました!

迅速なお返事ありがとうございます。
無事できました♪
色もピンクが良かったのでそのまま使わせていただきます。
(もしかしてサイトに合うような色を選んでいただいた?(〃∇〃)

101 ■わかりません!

CSSの一番下に、
#calendar .menu_frame{
background-image:url(http://stat.ameba.jp/user_images/20091206/17/riri-hasemin/80/76/p/o0200020010331661169.png);
background-repeat : no-repeat;
background-position: center bottom;
}
と、はりつけたのですが、
画像が表示されません!
どこが、いけないのでしょう?

102 ■>べアリーナさま

CSSの一番最後・・

-※追加機能※-  って

CSS 動きません・・ 質問するその前に
http://ameblo.jp/exlink/entry-10131393930.html
3番目のエラー原因です
この下に書かれたCSSは有効になりません

103 ■ありがとうございました!

お早い回答ありがとうございました!
-※追加機能※-が駄目だったんですね…。

104 ■数字が縦に…

こんにちは。
初めてコメントいたします。

一つお聞きしたいのですが、
日にちが二桁の場合なんですけども
縦になってしまう原因はなんなのかご存知ありませんか?

例)
正→ 14 15 16 17
x↓
1 1 1 1
4 5 6 7

となってしまいます。
ブラウザによって違うのでしょうか?
こちらはファイヤーフォックスで編集し、
エクスプローラーで拝見したらこのような事態になっていました。

何かおわかりでしたら是非教えていただけないでしょうか?

105 ■>*チップンデール*さま

#calendar table{
width:160px;
margin:0 auto;
}
#calendar th{
padding:0;
}
#calendar td{
padding:3px 0;
}

CSSの最後に加えます

106 ■初めまして、

#calendar .menu_frame{
margin:5px auto;
padding:130px 0 0 0;
background-image:url(http://stat.ameba.jp/user_images/20100124/20/m-flute/e3/68/p/t01760177_0176017710387528671.png);
background-repeat : no-repeat;
background-position: center top;
}

とCSSの最後に貼り付けたのですが、
何度やっても画像が
表示されません;;
どこかおかしい所はありますか?

107 ■>莉緒★:)さま

大丈夫のようですね

あと・・フリースペースのfontタグが閉じられていませんのでサイドメニュとか文字が大きくなっています

:はぴばあ<br>
<br>
(赤→)<font/>(←終)<br>
<br>
<br>
<br>
お世話になってる素材屋さん<br>


(赤→)<font/>(←終) → </font>

108 ■無題

はじめまして、こんにちは。
あめまりさんの所から飛んできましたww

すごいです!!とっても楽しいです♪

カレンダーCSSを頂いていきます。
そして読者登録をさせていただきたいです。
よろしくお願いします。

109 ■おはようございます。

カレンダーの日付を半分より下にしたくて
コメント欄を参考にさせていただきましたが、上手く配置できません。

もとをいじってしまったかもしれません。
教えていただけますか。
お願いします。

110 ■>You☆さま

CSSの真ん中より下で・・

/*■カレンダー - 基本設定 - サイド*/
#calendar{
}
#calendar .menu_title{
}
(赤→)}
}
}(←終)
#calendar table{
width:168px;
font-size:0.9em;
(赤→)line-height:2.95;(←終)
}
#calendar caption{
(赤→)padding:px 0;(←終)
}
#calendar caption a{
padding:0 5px;
}
#calendar th{
padding:0.5;
text-align:center;
}
#calendar td{
padding:0.5;
text-align:center;
}
/*■テーマ - 基本設定 - サイド*/


(赤→)}
}
}(←終)

カッコが余分です

(赤→)line-height:2.95;(←終)

line-height:1.3;



(赤→)padding:px 0;(←終)

padding:5px 0;


最後に
#calendar .menu_frame{
padding-top: 100px;
}
コレを付け加えます

また・・CSSの最後の部分
y拒否
<meta name="robots" content="noindex"> 検索拒否
<meta name="Slurp" content="noindex">
ここから最後まで
・・エラーになりますよ・・

111 ■有難うございました。

さっそく直しました。
綺麗に出来ました。

エラー部分も消しました。
有難うございました。<(_ _)>

112 ■無題

カレンダーの文字?数字?のみを中央寄せにしたいです。
サイドバー全体ではなく…

113 ■無題


カレンダーに画像を付けたくて㊦のように
CSSに付けました♪
でも出てきません...;;
何か間違っていますか?!

#calendar .menu_frame{
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20100323/11/c3/5d/j/o016001205x10-j-a-k-481269311835033.jpg);
background-repeat : no-repeat;
background-position: center bottom;
}

114 ■無題


何回もごめんなさい...;;

ブログの文字が勝手に
小さくなってしまうんですけど
何でですか?!教えてください

115 ■>大野*みなみ○。♪さま

フリースペースの一番最後の

<font color="#ffcccc" size="1">

コレを削除します

116 ■>大野*みなみ○。♪さま

CSS 動きません・・ 質問するその前に
http://ameblo.jp/exlink/entry-10131393930.html
1番目のエラーです

.amemberEntryTxt a{
margin-left: auto;
margin-right: auto;
text-align: center;
padding:0;
text-indent:-9999px;
display: block;
(←ココ)
#calendar .menu_frame{
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20100323/11/c3/5d/j/o016001205x10-j-a-k-481269311835033.jpg);
background-repeat : no-repeat;
background-position: center bottom;
}

117 ■>棗さま

#calendar table{
margin:0 auto;
}

118 ■無題

こんにちは!!!

直したいところがあります(´`;)

私のぶろぐはすべての字が小さくなります;;;
コチラ→http://ameblo.jp/gintamaai/
これはなんでなのでしょうか;;;
そして直すことはできるのでしょうか;;;

返信はメッセージにしてくださると嬉しいです

119 ■無題

カレンダーに画像を

入れたのですが、

サイズもしっかり合わせてやったのですが

画質が悪くてどうすればいいですか?

120 ■>奈美♪さま

ID公開して実際に見ないことにはなんとも・・

121 ■無題

これです!

122 ■無題

やったんですけど、

表示を確認するって押すとちゃんとなって

みれるんですけど、

保存してブログみると

なってにんですけど。

どうすればいいですか?

123 ■>奈美♪さま

言われるほどおかしな画質には見えませんが・・?

>保存してブログみるとなってにんですけど。
キーボードのf5キーを押してみてください

124 ■無題

直りました!

ありがとうございます。

コメント投稿

[PR]気になるキーワード