写真付きカレンダー風にしよう!(改) [実践編:サイドバー]
説 明
サイドバーのカレンダーを写真付きカレンダー風にアレンジします。
お気に入りの写真や季節の写真をさりげなく載せたらいかがですか?
【改訂:2011.07.14】
Win XP+IE8においてカレンダーの位置が下がらないという報告がありましたので、対策のために改訂しました。若干仕様も変更になっています。
完成形
※ 本記事では「シンプルプレート」スキンをベースに使用しています。
準 備
サンプルでは次の写真を使います。(180×120pixel)
編 集
1カレンダーの上部に写真を挿入する
.calendar-dateを変更します。
padding-topにアップロードした写真の高さの+20pxの数値を設定します。サンプルの写真の高さは120pxなので、140pxを設定します。
尚、+20pxとはだいたいの値です。
デザインとして写真の上下に10pxずつ間隔を空けるためにサンプルでは20pxとしましたが、実際には設定値が写真の高さより大きい数値(サンプルでは120px以上)になれば問題ありません。
ソースコード:
.calendar-date {
:
:
padding-top:140px;
}
:
:
padding-top:140px;
}
backgroundに写真のURLを設定します。
ソースコード:
.calendar-date {
:
:
padding-top:140px;
background:url("/_images/blog/_***/****/ファイル名") no-repeat;
}
:
:
padding-top:140px;
background:url("/_images/blog/_***/****/ファイル名") no-repeat;
}
注)url(" ")の中は画像ファイル名です。
画像を保存したときのファイル名をここに当てはめてください。
カレンダーっぽくするために、背景の色を白に設定します。(背景色を変えない方も、写真の位置を確認するために何色でもいいので一度背景色を設定することをオススメします。)
ソースコード:
.calendar-date {
:
:
padding-top:140px;
background:#FFFFFF url("/_images/blog/_***/****/ファイル名") no-repeat;
}
:
:
padding-top:140px;
background:#FFFFFF url("/_images/blog/_***/****/ファイル名") no-repeat;
}
写真の位置が左上(初期値)になっているので、横方向の中央(center)に、高さ方向は上から10pxの位置に設定します。
ソースコード:
.calendar-date {
:
:
padding-top:140px;
background:#FFFFFF url("/_images/blog/_***/****/ファイル名") no-repeat center 10px;
}
:
:
padding-top:140px;
background:#FFFFFF url("/_images/blog/_***/****/ファイル名") no-repeat center 10px;
}
カレンダー上部の幅(width)を設定します。
この幅は、サイドバーの幅より小さく、写真の横幅より大きい値にします。また、下のカレンダー部分の幅より小さくならない値にします。
サンプルでは写真幅が180pxなので、230pxに設定します。
ソースコード:
.calendar-date {
:
:
padding-top:140px;
background:#FFFFFF url("/_images/blog/_***/****/ファイル名") no-repeat center 10px;
width:230px;
}
:
:
padding-top:140px;
background:#FFFFFF url("/_images/blog/_***/****/ファイル名") no-repeat center 10px;
width:230px;
}
2カレンダー部分の背景色と幅を設定します
#calendar tableを変更します。
まず、1で設定したのと同じ背景色(#FFFFFF)を設定します。
ソースコード:
#calendar table {
:
:
background:#FFFFFF;
}
:
:
background:#FFFFFF;
}
次に、1で設定した値と同じ幅(230px)を設定します。
ソースコード:
#calendar table {
:
:
background:#FFFFFF;
width:230px;
}
:
:
background:#FFFFFF;
width:230px;
}
この時点で、写真部分とカレンダー部分に隙間が空いている方は、marginの値を確認してください。もしこの値が0以外でしたら、0pxに設定してください。
ソースコード:
#calendar table {
margin: 0px auto; :
:
background:#FFFFFF;
width:230px;
}
margin: 0px auto; :
:
background:#FFFFFF;
width:230px;
}
また、写真部分とカレンダー部分にズレがある場合は、widthの値(2箇所)を設定した値より大きくして調整してください。
3額縁のような枠組みを付けます
.calendar-date、#calendar tableを変更します。
borderにて、写真部分には上(top)、左(left)、右(right)に、カレンダー部分には左(left)、右(right)、下(bottom)に枠をつけます。
サンプルでは額縁のように見える稜線(ridge)をブログの背景色(#7f756b)で設定します。
ソースコード:
.calendar-date {
:
:
padding-top:140px;
background:#FFFFFF url("/_images/blog/_***/****/ファイル名") no-repeat center 10px;
width:230px;
border-top:8px ridge #7f756b;
border-left:8px ridge #7f756b;
border-right:8px ridge #7f756b;
}
#calendar table {
:
:
background:#FFFFFF;
width:230px;
border-left:8px ridge #7f756b;
border-right:8px ridge #7f756b;
border-bottom:8px ridge #7f756b;
}
:
:
padding-top:140px;
background:#FFFFFF url("/_images/blog/_***/****/ファイル名") no-repeat center 10px;
width:230px;
border-top:8px ridge #7f756b;
border-left:8px ridge #7f756b;
border-right:8px ridge #7f756b;
}
#calendar table {
:
:
background:#FFFFFF;
width:230px;
border-left:8px ridge #7f756b;
border-right:8px ridge #7f756b;
border-bottom:8px ridge #7f756b;
}
写真部分とカレンダー部分にズレが生じたので、調整します。
写真部分(.calendar-date)のwidthから、borderで設定した枠の太さ(左右)分を引いた値を設定し直してください。
サンプルでは、230pxから16px(8px×2)を引いた214pxを設定します。
ソースコード:
.calendar-date {
:
:
padding-top:140px;
background:#FFFFFF url("/_images/blog/_***/****/ファイル名") no-repeat center 10px;
width:214px;
border-top:8px ridge #7f756b;
border-left:8px ridge #7f756b;
border-right:8px ridge #7f756b;
}
:
:
padding-top:140px;
background:#FFFFFF url("/_images/blog/_***/****/ファイル名") no-repeat center 10px;
width:214px;
border-top:8px ridge #7f756b;
border-left:8px ridge #7f756b;
border-right:8px ridge #7f756b;
}
これで完成となりますが、背景色を付けたことによりカレンダーの日付が見えなくなった場合は、次のスタイル名のcolorを変更してください。
曜日 | #calendar th |
日付(更新していない日) | #calendar td |
日付(更新日) |
背景:#calendar td.link 文字:#calendar td.link a |
以上。
写真について
写真付きカレンダーに使用する写真のサイズは、サイドバー(.sidebar)に設定されているサイズの幅(width)より必ず小さいサイズにしてください。サイドバーのサイズより大きい写真にすると、思い通りのレイアウトにならなかったり、サイドバーのレイアウトが崩れたりします。
ちなみにサンプルで使用したスキンのサイドバーのサイズは266pxです。サンプルでは266pxより幅が小さく、さらにカレンダー部分の幅からはみ出さない程度の幅が良いと考え、幅が180pxの写真を使用しました。
デバッグ環境
OS | ブラウザ |
MacOS X | FireFox3.6.18 |
MacOS X | Safari4.1.3 |
Windows Vista | IE7 |
関連項目
■ 【背景】background [リファレンス]
■ 【文字】color [リファレンス]
■ 【ボックス】margin [リファレンス]
■ 【ボックス】padding [リファレンス]
■ カレンダーの日付部分を変更しよう! [実践編:サイドバー]
■ カレンダーの更新日の背景を画像にしよう! [実践編:サイドバー]
2011-07-14 18:43
nice!(7)
コメント(8)
かほりんさーん♪
今日のカスタムも素敵ですわ~。
・・・たぶんわかってないけど・・・(爆)
トップの写真も変えようと思いながら・・・もう半年。あはは・・・
が・・がんばります!
by miacat (2009-03-16 22:00)
* miacatさん *
お褒めの言葉ありがと〜♪
大丈夫、miacatさんはわかってるに違いない!
私もね、メインのブログをオリジナルにしようしようと思いつつ、まだなのよ。あはは。
こういうのは時間があるときに集中してやるのがいいわよね!(^^)b
by かほりん (2009-03-16 22:21)
こんな事もできるんやぁ~♪♪♪
・・・その前に4ワンの集合写真を撮って、、、
これまた大変(笑)
簡単で・・・やってるから、、、
上級編でやるんでしょ?!
何度も!チャレンジしたけど・・・思うようにならへんねん(^^ゞ
かほりん先生!!家庭訪問はあり???ですか(笑)
あ~~~ぁ~~~!!お家が近ければ、、、(T_T)
by GOMIMA (2009-03-17 17:06)
* GOMIMAさん *
こんなことも出来ちゃった。(笑)
カレンダー作成中に閃いて、思いついたからやってみたの。(^^)v
初心者さん対象にしてるから、もうすでに上級編の域ですよん。
問題は、選んだスキンによって難しかったり簡単だったりすることですね。
思うようにならないときは、スペルの間違いや、全角になってないかをまず疑ってくださ〜い。
家庭訪問、もちろんアリですよ!
GOMIMAさんちに宿泊&交通費出してくれたらね♪(^^)/
by かほりん (2009-03-17 19:09)
コメ、nice!は、はじめましてw
以前から、色の変更やら勉強させてもらってるんっです・が・・
失敗ばかりです・・・
カレンダーもやってみますぜww
by リン (2009-03-25 11:22)
* リンさん *
初めまして〜!ようこそデス♪
以前から見ていただいてたなんて、嬉しいです。
ありがとうございます。(^^)
なかなか簡単そうに見えても、サクッといかなくて、もどかしいのがスキン編集ですよね〜。(-_-;
スキンによってだいぶ作りも違うので、出来るだけ多くのスキンをサンプルに使用してやってみているんですが・・・。
とにかく、いろいろといじってみることです!
そのうちココを見なくてもご自身でやりたいことが出来るようになると思いますよ。
私も少しでもお手伝い出来たらなと思います。
これからもヨロシクお願いしますね!(^^)/
by かほりん (2009-03-25 11:47)
こんばんは。
大変遅くなってすみません><
コメント残してたつもりが入れ忘れてたみたいで・w・
親切に返答していただけてありがとうございました!
今から見直してやってみます。
ありがとうございました!
by コトキャン (2011-07-25 23:36)
* コトキャンさん *
この度はご報告ありがとうございました〜♪
実践してくださる方がいらっしゃること、運営の励みになります!
これからもよろしくお願いしますね〜♪(^^)/
by かほりん (2011-07-26 14:54)