-- --: カレンダー[追記アリ]: SSブログ

	ブログをはじめるログイン

カレンダー[追記アリ]　[ソネットブログカスタマイズ] [編集]

今回は予告通り「ソネットブログカスタマイズ」の「カレンダーver」でいってみます。
もうカレンダーを触ってる人も、まだ手をつけてない人も、興味がある人は読んでって頂けると嬉しいです。最近はリヴリー以外のお客様や、コレを見てソネブロに返り咲き（ｗ）してくれている方がいらしてとてもやりがいがあります。ありがとうございます＾＾
すっごい長いです。（作成にトータル10時間くらいかかった(*≧ｍ≦*)ププッ）日曜丸ごと使ってカレンダーカスタマイズしちゃって下さいｗ
（あ、日曜は出かける事が多いので質問回答は月曜になってしまうと思います）

↑見本でいくつか用意してみました。まぁこんな感じで色々出来ますよ♪ってお話です。前回までのカスタマイズはコチラまで進んでます。今日から始める方は一番はじめから進むとわかりやすいです。ではＣＳＳを開いて下さい。

今は全体の文字色を変えただけの状態なので

こんな感じだと思います。変更出来る箇所は大きくわけて3つ。また番号をつけてみました。

んではカレンダーのcss箇所は真ん中よりちょっと下。上から順番に説明していきます。
いつも言いますが、ド素人につき「こうすればこうなった」というお話なので違うやり方もあると思います。改善情報は頂けるととてもありがたいデス。

/*--Calendar--*/

.calendar-date {
text-align:center;
}
/*--↑この記述は、文字を真ん中にする為の記述。触る必要ナシ--*/

#calendar table {
margin:3px auto;
text-align:center;
}

/*--①--*/

#calendar th {
height:20px;
width:20px;
font-weight:normal;
}

th.sun {
color:#ff0000;
}

th.sat {
color:#0000ff;
}

/*--②--*/

#calendar td{
height:20px;
width:20px;
}

#calendar td.link {
background:#d0ceb7;
font-weight:bold;
}

#calendar td a{
}

/*--③--*/

↑は何も触ってない状態です。
まずは①番。カレンダーを囲んでる部分のお話。

例1

背景に色をつける

#calendar table {
margin:3px auto;
text-align:center;
background:#33ccff;
}

例2	背景に色をつけ周りを囲む。

#calendar table {
margin:3px auto;
text-align:center;
background:#33ccff;
border-width : 3px 3px 3px 3px;
border-style : dotted dotted dotted dotted;
border-color :#ff0066;
}

<例2の補足>
border-width : 3px 3px 3px 3px;
数を小さくすると点が小さくなり、大きくするとでかくなる。
3px 3px 3px 3px;左から順に[上][右][下][左]になるので、
例えば3px 0px 3px 0px;にした場合は上下しか点が出ない事になる。

同様、左右だけ。や上と左だけ。点の大きさを変えるなど、上下左右全て色を変えたり、二重線にしたりなど・・・コチラの記事と同じ事なので参照にして下さい。

例3

画像に変える。

#calendar table {
margin:3px auto;
text-align:center;
background:url(/blog/_images/blog/・・・.gif) no-repeat;
}

<例2の補足>
いつもと同じなので画像の入れ方などはコチラです。
今この背景画像は、

↑を（170px×165px）使用しました。が、これだと、見ている環境によって大きく崩れます。下がなかったり右がなかたり・・・・なので上下左右しっかり囲んである画像は、あんまりオススメ出来ません。
背景を画像で入れるなら薄っすらとしたどっから見てもＯＫな画像
例えば

こんな感じの画像がいいと思います。これからやっていく、②、③の肯定で全体の大きさなどは変わってきますので最後まで読んでから画像を作成して下さい。

追記

画像で固定する場合、例えば9月は6週間、8月は5週・・・と大きさが違う事が判明・・・なので小さめの画像を作成し

#calendar table {
background:url(/blog/_images/blog/・・.gif) no-repeat;
background-position: right bottom;
margin:3px auto;
text-align:center;
}

赤字部分（訳は、背景画像の表示位置を右下に表示ってとこです）を足すといつでも右下に画像がきてしっくりいきます(゜-゜*)(。。*)ウンウン(右下以外・中央や左などはコチラを参照ください)

ついでに、

#calendar table {
background:url(/blog/・・・.gif) no-repeat #ffffff;
background-position: right bottom;
margin:3px auto;
text-align:center;
}

センス上ありえませんが、わかりやすいように白（#ffffff）を足してます。通常この画像でいけば黒（#000000）ですねｗこのように、画像の後ろに色を足す事で、色も入るので、サイドバーの全体の色を変更されている人でも使えます。（このやり方は前回、武槻さんが教えて下さった内容を適用しています）

次、②番ρ(^-^*)ノイッテミヨー!
結局全て、①と同様、色をつけるか、画像を入れるか、と大きくわけて2種類です。（カレンダーに限らず全て同じ事）なのでCSSの意味がわかればあちらこちらいじっていけるのです(o-ｪ-)ﾌﾑﾌﾑ　でも記述によってはソネブロが対応していない。ブラウザーが対応していないものがあるので注意が必要なのであります。
わかりやすいようにとりあえず今やった①を元の状態に戻しました。②も何もしていない状態からはじめてきます！！

#calendar th {
height:20px;
width:20px;
font-weight:normal;
}
↑曜日全体の指定　

th.sun {
color:#ff0000;
}
↑「日」の指定　

th.sat {
color:#0000ff;
}
↑「土」の指定　

ポイント

現在、日曜と土曜の分しか設定枠がないので、
th.sat {
color:#0000ff;
}
の下へでも、（まぁどこでもいいんだが）月曜から金曜を書き足します。

th.mon {
}

th.tue {
}

th.wed {
}

th.thu {
}

th.fri {
}

th.sat {
}

書き足した状態を過程して続けます。
（※So-net blogの使い方CSSセレクタ(タグ)一覧の水曜日箇所「.web」はどう考えても間違えですｗ）

例1	背景に色をつける・囲む・色変更他

これについてはさっきも書きましたが自分の好みで無限です。例題を出すとキリがないので例は1つだけ入れておきます。以前やった記事枠内の変更やリンク装飾などでも同じような事が書いてあるので参考にして下さい。

#calendar th {
※height:10px;
（訳）高さを20pxから10pxに低く変更

width:20px;
font-weight:normal;

※background:#000000;
（訳）背景色を黒に

※border-width : 1px;
※border-style : solid;
※border-color :#ff0066;
（訳）周りを1pxの線（solid）で#ff0066色で囲。（この時、全て囲むのであれば①でやった時のように4回同じ事を書く必要はありません。線で囲むか、点で囲むか囲まないかなど・・・好みに合わせて適用すべし）

※color:#ffffff;
（訳）文字色をここで白に一括指定してしまっているのでその下の各曜日の設定をしても無効になってしまいます。
}

例2	背景に画像を入れる。

一括で同じ画像を入れる場合は、

#calendar th {
height:20px;
width:20px;
font-weight:normal;
text-align:center;
background:url(/blog/_images/blog/・・・.gif) no-repeat;
}

<例2の補足>
今回

（20px×20px）の画像を用意しました。
text-align:center;　は、文字を真ん中に寄せる為に入れてます。
----------------------------------------------------
違う画像を入れる場合は・・・

#calendar th {
height:20px;
width:20px;
font-weight:normal;
text-align:center;
}

th.sun {
background:url(/blog/_images/

.gif) no-repeat;
color:#ff0000;
}

th.sat {
background:url(/blog/_images/

.gif) no-repeat;
color:#3300ff;
}

th.mon {
background:url(/blog/_images/blog/

.gif) no-repeat;
color:#006600;
}

th.tue {
background:url(/blog/_images/blog/

.gif) no-repeat;
color:#ff9900;
}

th.wed {
background:url(/blog/_images/blog/

.gif) no-repeat;
color:#666666;
}

th.thu {
background:url(/blog/_images/blog/

.gif) no-repeat;
color:#00ffcc;
}

th.fri {
background:url(/blog/_images/blog/

.gif) no-repeat;
color:#cc00cc;
}

文字色だけ変更しましたが、画像7種変更もイケマス。

例3

全部画像に変える。

タイトル・説明文を消し画像へリンクを挿入を参考に、消し去る方法も一応伝授っす。画像の幅と高さは一定のものを作成。とりあえず今回は高さ15px、幅20pxの7つの画像を用意しました。

#calendar th {
height:15px;
width:20px;
font-weight:normal;
text-indent:-3000em;
}

th.sun {
background:url(

.gif) no-repeat;
}

th.mon {
background:url(

) no-repeat;
}

th.tue {
background:url(

) no-repeat;
}

th.wed {
background:url(

) no-repeat;
}

th.thu {
background:url(

) no-repeat;
}

th.fri {
background:url(

) no-repeat;
}

th.sat {
background:url(

) no-repeat;
}

で、最後は③の箇所です。
もうずっと同じ事なので、③ついては説明飛ばします。見本と見本タグだけです。
内容は①②と同じです。①②を参考にして下さい。

#calendar td{
height:20px;
width:20px;
}
↑日付箇所全体の指定　
#calendar td.link {
background:#d0ceb7;
font-weight:bold;
}
↑日付箇所リンクされる指定　
#calendar td a{
}
↑日付箇所リンク文字の指定　

例1	背景に色をつける・囲む・色変更他

#calendar td{
height:20px;
width:20px;
text-align: center;
line-height:1.2;
text-align:center;
background:#33ccff;
border-width : 1px;
border-style : dotted;
border-color :#ff0066;
color:#0000ff;
}

#calendar td.link {
height:20px;
width:20px;
text-align: center;
line-height:1.2;
background:#ff0000;
border-width : 1px;
border-style : solid;
border-color :#000000;
}

#calendar td a{
color:#ffffff(白);
font-weight:bold(太文字);
}

例1

画像に変更

#calendar td{
height:20px;
width:20px;
text-align: center;
line-height:1.2;
color:#5a3000;
background:url(

.gif) no-repeat center;
}

#calendar td.link {
height:20px;
width:20px;
text-align: center;
line-height:1.2;
background:url(

.gif) no-repeat center;
}

#calendar td a{
color:#ff0000;
font-weight:bold(太文字);
}

ポイント

画像を大きくする場合は、幅25pxくらいまでがしっくりきます。
ココの画像を大きくする場合は、②の
#calendar th {
height:20px;
width:20px;
も変えましょう。

(｀□´)　以上である。
質問受けます。質問記事を必ず読んでから質問して下さい。

カレンダー素材【付録素材】
　※当サイトＨＰﾞおよびブログ内の許可していない素材の持ち出しは禁止しています。

今回の記事用に見本用で作ったものです。
素材使用規約はいつもと一緒で
許可不要・リンク任意・再配布不可・直リン不可・加工可・加工後再配布不可・リクエスト不可です。意味が理解出来る方で必要な方は、右クリック→名前を付けて画像を保存してお持ち帰り下さい。
そのうち、追加します。（私のそのうちはあてになりませんｗ）
カレンダーの画像は小さいのでペイントなどで作成チャレンジしてみては？？
ペイントの使い方は、1キロバイトさんの説明がわかりやすいと思います。
もっと深く知りたければペイントで描く簡単イラスト講座がオススメです。あ、画像の質問は全く答えれませんのであしからず(*_ _)人ゴメンナサイ