2007年07月27日

カレンダーの投稿日にマークをつけよう 

もう一般的な属性は紹介したと思うので、今回からは応用iconN06みたいなかんじで紹介していきたいと思います。
今回はカレンダーのアレンジです。
ブログの記事を投稿した日にマークを付けたいと思います。
また、マウスカーソルが上に乗るとマークも変わるってこともしてみます。
使用するマーク用の画像は、



いつものこの星です。
この星が記事を投稿した日だけ表示されるようにします。


設定（例）


/*曜日*/
.calendarweek{
color:#000000;
font-size:14px;
font-weight: bold;
font-style:italic;
font-family:"Times New Roman";
width:20px;
text-align:center;
}

/*日付*/
.calendard{
color:#000000;
font-style:italic;
font-family:"Times New Roman";
font-size:10px;
width:20px;
line-height:20px;
text-align: center;
}

/*日付リンク*/
.calendard a{
background:url("http://shiga-saku.net/usr/customshichao/calender-icon1.jpg");
background-repeat:no-repeat;
color:#000000;
width:20px;
line-height:20px;
display:block;
margin:0 auto;
text-decoration:none;
}

っとまぁ、これがこのブログのカレンダーの曜日と日付の設定です。
これを参考にアレンジしてみてくださいね。
っとその前に、今回出てきた新しい属性は「margin」、「line-height」、「display」になります。
ではそれぞれの属性の説明を・・・。


margin


「margin」は「padding」と似ていまして、「padding」が枠の内側の余白設定だとしたら、「margin」は枠の外側の余白設定となります。
値は「padding」と一緒なので、過去の記事を参考にしてくださいね。
また、「auto」という値は、自動設定という意味です。
ですから上の場合、縦の余白が0pxで、横が自動ということになります。


line-height


「line-height」は行と行の間を数値で設定したりすることです。
縦の設定ということで「height」にも似ていますね。


display


「display」は「inline （インライン要素）」と「block （ブロックレベル要素）」が主に指定できます。


display : block ;

「inline」は要素の後に改行が入らないように設定するのに対し、「block」は改行が入るように設定します。
っとまぁ、これの説明はちょっと大変ですので省きますが、上の場合、形を崩さないために用いました。


ポイント


今回のポイントは「width」と「line-height」、「display」にあると思います。
画像のサイズと同じサイズに設定し、尚且つ形を崩さないようにするということです。


width : 画像の横幅 ;
line-height : 画像の縦幅 ;
display : block ;

これらを設定しないと上手く表示できないと思いますので、要チェックです。
あとはみなさんのサイドバーの横幅やカレンダーのそれぞれの幅に応じて画像のサイズを微調整して設定してみてください。
これで記事を投稿した日だけにマークが表示されるようになると思います。


次に応用の、マウスが上に乗ったらマークが変わるようにしてみます。
これを行うにはもう1枚画像が必要となります。
今回は、マウスが上に乗ったら、星が渦巻きになるようにしてみます。
ってことで画像は



これです。


設定


/*日付リンク*/
.calendard a:hover{
background:url("http://shiga-saku.net/usr/customshichao/calender-icon2.jpg");
background-repeat:no-repeat;
color:#ffffff;
}

っとなります。
「a:hover」は以前にも紹介しましたが、マウスが上に乗ったときという意味です。
上の「.calendard a」が記事を投稿した日のリンク全体設定ですから、


width:20px;
line-height:20px;
display:block;
margin:0 auto;
text-decoration:none;

これらを設定しなくても継承されるので、「.calendard a:hover」では、これらの設定は必要ないと思います。
もちろん変更も可能だと思いますけど。


まとめ


今回のは細かな設定が必要とされますので、上のをコピー＆貼り付けされたところで、上手く表示されないと思います。
画像のサイズ、カレンダーなどの幅設定を微調整しながらチャレンジしてみてくださいねkao10


次回はブログの記事の部分の構造を紹介したいと思います。
これから先は、あまり属性の紹介もないと思いますので、IDとCLASSの紹介がメインになると思います。
いろんな属性を使って、皆さんのお好みのデザインになるようアレンジしてみてくださいね。
それではお疲れ様でしたkao05


～追記～

上で紹介した「.calendard a」や「.calendard a:hover」のクラスがスタイルシート内にない場合は、これらのクラスを付け加えてください。
もっと細かく設定される場合は「.calendard a:link (未訪問）」、「.calendard a:visited (訪問済み）」、「.calendard a:active (クリック時）」も付け加えてくださいねicon23

設定が上手く反映されない場合

.calendard a{
background:#000000;
color:#ffffff;
}

この設定で上手く反映されない場合は、↓の設定で試してみてください。

.calendard a , .calendar a{
background:#000000;
color:#ffffff;
}

カレンダーの日付のhtmlソースはほぼ↓のようになっています。

<td class="calendard"><span class="calendar">1</span></td>

各日付には「calendard」と「calendar」のクラスが同時に設定されていますから、どちらか片方の設定しても上手くいかなかったら両方同じ設定にしてしまおうということです。
スタイルシートでそれぞれ「.calendard」と「.calendar」に分けて設定するのもいいですけど、結局は同じことなので「,（カンマ）」を使ってグループ化して設定されるといいと思います。

Posted by nory at 00:03│Comments(8)│TrackBack(0) │サイドバー
このBlogのトップへ│前の記事│次の記事

この記事へのトラックバックURL

http://customshichao.shiga-saku.net/t43990
この記事へのコメント
はじめまして滋賀咲くブロガーのhisattiと言います。
カレンダーの投稿日にマークをつけたいのですが、具体的にどうすればいいのか教えていただけませんか？
勉強不足でこれを読んだだけでは、どうしていいのかわからないのです。。。
事務局に聞いたのですが、サポート対象からはずれるそうです。
よろしくお願いします。
Posted by hisattihisatti at 2007年09月23日 18:31
＞hisattiさん
はじめまして。
一応hisattiさんがご利用されてるテンプレートの標準を元に、順番に説明していきますが、説明下手ですので、分からなかったらまたコメントしてください。

1.設定場所
所有されているブログの『管理画面TOP』の左一覧から『テンプレート』→『カスタマイズ』へと進みます。
そこに『スタイルシート』と題された、背景がピンクの欄がありますよね。
その中から『.calendard { /*日付(セル)*/ line-height: 130%; margin:2px; text-align:center; }』を探してください。
その下に以下の文章を追加してください。

/*日付リンク*/
.calendard a{
background:#ff0000;
}

/*日付リンク（未訪問）*/
.calendard a:link{
background:#ff0000;
}

/*日付リンク（訪問済み）*/
.calendard a:visited{
background:#ff0000;
}

/*日付リンク（クリック時）*/
.calendard a:active{
background:#ff0000;
}

/*日付リンク（マウスカーソルが上に乗った時）*/
.calendard a:hover{
background:#ff0000;
}

2.設定方法
マークといっても、日付の背景に色を付けたり画像を用いたりできますので、両方説明します。

①色だけの場合
上記のそれぞれ『background:#ff0000;』を変更します。
『#ff0000』が色の指定ですから、記事投稿画面の文字色設定などで確認してお好みに変更してください。

②画像を使う場合
画像はすでに用意されていると考えての上で説明します。
上記のそれぞれ『background:』に続けて『url("画像");
background-repeat:no-repeat;』を追加します。
『画像』は、投稿日に表示させたい画像のurlを入力します。
hisattiさんが滋賀咲くにアップされてる場合だと『http://shiga-saku.net/usr/oyako/〇〇.jpg』といったかんじです。
ですからhisattiさんの場合だと、

.calendard a{
background:url("http://shiga-saku.net/usr/oyako/〇〇.jpg");
background-repeat:no-repeat;
}

といったようになります。
説明では画像形式をjpgにしていますが、余計な部分を透明化させるという点ではgifがいいと思います。

まとめ
とりあえずこんなかんじですが、画像を用いるとなると、画像サイズや他の『width』といった横幅設定を確認しながら繰り返し設定しないと上手く表示できないと思います。
またブラウザによっても多少幅が違ってきますから、画像となるとちょっと大変です。
ちなみにこのブログのカレンダーは、IE7ではキレイに表示されますが、他のブラウザで見ると崩れていると思います。
それらをご承知の上でいろいろ試して設定してみてくださいね。
Posted by norynory at 2007年09月23日 20:35
norryさま
コピーして貼り付けてみたんですが、色がつかないんです(-_-;)
うーん難しい。。。
Posted by hisattihisatti at 2007年09月24日 12:28
＞hisattiさん
hisattiさんのブログを見させていただきましたが、カレンダーの投稿日の背景が赤になってると思うのですが？
ただマウスオーバーの場合、文字まで赤になって見えなくなりますね。
必要とあれば以下の文章をそれぞれ追加してください。

.calendard a{
background:#ff0000;
color:#ffffff;
text-decoration:none;
}

「color」が文字色です。
「text-decoration」は文字下の下線を消したい時に追加してください。

画像を使用されたい場合は相談に乗りますよ。
どんなイメージがいいとかコメントに書いてもらえれば、僕の方で作成しても構いませんし。
ブラウザ確認などでちょっと時間がかかるかもしれませんけどね。
Posted by norynory at 2007年09月24日 13:19
norryさま
ご丁寧にありがとうございます。
投稿日に下線は入りましたが、色が私が見る限り背景赤くないのです？？？
マウスオーバー(ってマウスを文字の上に持っていくことですか？)すると赤くなり、持っていかないと今薄いグリーンですねー
なぜ私が見るのとnorryさんが見てる画面が違うのでしょうか？？？

でも下線入っただけで十分です！ほんとにありがとうございましたm(__)m
Posted by hisattihisatti at 2007年09月24日 14:55
＞hisattiさん
ホントごめんなさい。
もう１度以下の文章をコピー＆貼り付けしてお試しください。

色は背景が赤、基本文字色が白、マウスが上に乗ったときの文字色が黒にしてありますから、そこはお好みに変更してください。
また「text-decoration:underline;」は下線が付く設定ですから、消す場合は「underline」を「none」に変更してください。


/*日付リンク*/
.calendard a,.calendar a{
color:#ffffff;
background:#ff0000;
text-decoration:underline;
}

/*日付リンク（未訪問）*/
.calendard a:link,.calendar a:link{
color:#ffffff;
background:#ff0000;
text-decoration:underline;
}

/*日付リンク（訪問済み）*/
.calendard a:visited,.calendar a:visited{
color:#ffffff;
background:#ff0000;
text-decoration:underline;
}

/*日付リンク（クリック時）*/
.calendard a:active,.calendar a:active{
color:#ffffff;
background:#ff0000;
text-decoration:underline;
}

/*日付リンク（マウスカーソルが上に乗った時）*/
.calendard a:hover,.calendar a:hover{
color:#000000;
background:#ff0000;
text-decoration:underline;
}
Posted by norynory at 2007年09月24日 21:33
norryさま
ほんと何度もすいませんですm(__)m
他の子のPCから見ると、ちゃんと赤い帯が背景にあるそうで、うちのPCのカラー設定？がおかしいのかもです。。。
上記のを再度貼り付けましたが、うちのPCでは結果は同じなんです(-_-;)
たぶん他の方が見たら、ちゃんとうまくなってると思いますので、また見てもらいますね。
色々とご指導頂きありがとうございました。
Posted by hisatti at 2007年09月25日 10:27
＞hisattiさん
そうでしたか。
赤だけダメなんですかね？
たまたま僕が選択した色がhisattiさんのPCではNGだったんですね・・・。
設定の方はちゃんと反映されてますからご心配なく(^o^)
確認できるようになったら、お好みの色に変更したりして楽しんでくださいね♪
Posted by norynory at 2007年09月25日 21:07
この記事へのコメントを書く