blog対応の初心者向けオリジナルスキン作成講座です。明サイドバーのカレンダーを写真付きカレンダー風にアレンジします。XP+IE8においてカレンダーの位置が下がらないという報告がありましたので、対策のために改訂しました。若干仕様も変更になっています。本記事では「シンプルプレート」スキンをベースに使用しています。備テンプレート(ベーススキン)を選びます。カレンダーに使用する写真を用意します。写真をご自身のブログ内にアップロードします。サンプルでは次の写真を使います。集1カレンダーの上部に写真を挿入する.calendar-dateを変更します。padding-topにアップロードした写真の高さの+20pxの数値を設定します。サンプルの写真の高さは120pxなので、140pxを設定します。+20pxとはだいたいの値です。デザインとして写真の上下に10pxずつ間隔を空けるためにサンプルでは20pxとしましたが、実際には設定値が写真の高さより大きい数値(サンプルでは120px以上)になれば問題ありません。{::padding-top:140px;}backgroundに写真のURLを設定します。")の中は画像ファイル名です。画像を保存したときのファイル名をここに当てはめてください。カレンダーっぽくするために、背景の色を白に設定します。(背景色を変えない方も、写真の位置を確認するために何色でもいいので一度背景色を設定することをオススメします。no-repeat;}写真の位置が左上(初期値)になっているので、横方向の中央(center)に、高さ方向は上から10pxの位置に設定します。10px;}カレンダー上部の幅(width)を設定します。この幅は、サイドバーの幅より小さく、写真の横幅より大きい値にします。下のカレンダー部分の幅より小さくならない値にします。サンプルでは写真幅が180pxなので、230pxに設定します。tableを変更します。1で設定したのと同じ背景色(#FFFFFF)を設定します。{::background:#FFFFFF;}次に、1で設定した値と同じ幅(230px)を設定します。{::background:#FFFFFF;width:230px;}この時点で、写真部分とカレンダー部分に隙間が空いている方は、marginの値を確認してください。この値が0以外でしたら、0pxに設定してください。::background:#FFFFFF;width:230px;}また、写真部分とカレンダー部分にズレがある場合は、widthの値(2箇所)を設定した値より大きくして調整してください。tableを変更します。borderにて、写真部分には上(top)、左(left)、右(right)に、カレンダー部分には左(left)、右(right)、下(bottom)に枠をつけます。サンプルでは額縁のように見える稜線(ridge)をブログの背景色(#7f756b)で設定します。#7f756b;}写真部分とカレンダー部分にズレが生じたので、調整します。写真部分(.calendar-date)のwidthから、borderで設定した枠の太さ(左右)分を引いた値を設定し直してください。サンプルでは、230pxから16px(8px×2)を引いた214pxを設定します。#7f756b;}これで完成となりますが、背景色を付けたことによりカレンダーの日付が見えなくなった場合は、次のスタイル名のcolorを変更してください。写真について写真付きカレンダーに使用する写真のサイズは、サイドバー(.sidebar)に設定されているサイズの幅(width)より必ず小さいサイズにしてください。サイドバーのサイズより大きい写真にすると、思い通りのレイアウトにならなかったり、サイドバーのレイアウトが崩れたりします。ちなみにサンプルで使用したスキンのサイドバーのサイズは266pxです。サンプルでは266pxより幅が小さく、さらにカレンダー部分の幅からはみ出さない程度の幅が良いと考え、幅が180pxの写真を使用しました。コメント(8)あなたは既にnice!を行っています。一定件数以上前のnice!は表示されませんのでご了承ください。今日のカスタムも素敵ですわ~。・・・たぶんわかってないけど・・・(爆)トップの写真も変えようと思いながら・・・もう半年。大丈夫、miacatさんはわかってるに違いない!私もね、メインのブログをオリジナルにしようしようと思いつつ、まだなのよ。*こんなことも出来ちゃった。(笑)カレンダー作成中に閃いて、思いついたからやってみたの。(^^)v初心者さん対象にしてるから、もうすでに上級編の域ですよん。問題は、選んだスキンによって難しかったり簡単だったりすることですね。思うようにならないときは、スペルの間違いや、全角になってないかをまず疑ってくださ〜い。以前から見ていただいてたなんて、嬉しいです。ありがとうございます。(^^)なかなか簡単そうに見えても、サクッといかなくて、もどかしいのがスキン編集ですよね〜。(-_-;スキンによってだいぶ作りも違うので、出来るだけ多くのスキンをサンプルに使用してやってみているんですが・・・。いじってみることです!そのうちココを見なくてもご自身でやりたいことが出来るようになると思いますよ。私も少しでもお手伝い出来たらなと思います。11:47)こんばんは。親切に返答していただけてありがとうございました!今から見直してやってみます。14:54)コメントを書くコメント投稿に失敗しました。未入力の項目があります。認証コードが一致しませんでした。半角英数字のみのコメントは受け付けできません。お名前:URL:コメント:画像認証:下の画像に表示されている文字を入力してください。ブログトップお知らせいつもご訪問いただきありがとうございます。更新が滞っておりますが運営中です。皆様のお役に立てれば幸いです♪コメントや質問は随時受け付けております。質問に対する回答には現象確認のため少々お時間をいただくことがありますが、ご了承ください。スパムコメント対策として、So-netログインユーザのみコメントの書き込みを許可しております。よって、会員以外の方はコメントの書き込みが出来ない状態になっておりますが、ご了承くださいませ。..ありがとうございました。