知識、知恵のカタマリ

[PR]コレがGoogleの検索ストーリー

解決済

clip!clip!
Ads By Google

カレンダーの幅の変更は、どの部分ですか?

Meadow(2カラム)のデザインを利用して各種のカスタマイズを行っています。

フリーエリアを含むカテゴリーの幅が190pxなので、
それにできるだけ近いサイズにカレンダーの幅を変更したいと思いますが、
現在、見てみると、.calendartable{width:188px; なのに、
190pxの幅より大きくなっていて、状況がよくわかりません。

カレンダーに関しては、カスタマイズをしていて、
最初は180pxだったのを188にしました。さらに、文字も太字だったのをノーマルに変更しています。
デフォルトの状態では、日付にリンクがはられた状態で、2桁の数字が縦方向にズレてしまい、表示くずれが起こったため(日曜日~火曜日までの3セルのみがズレました)、なんとなく手探りで180pxを188pxに変更したら、ズレが直ったのでそのまま使っているという、かなりいいかげんな状態です(汗)。

サイドの幅や、カレンターテーブルの幅、カレンダー内の数字のフォント、
セルの幅、数字の周囲の余白(paddingですか??)なども、
しっかり理解したうえで、できるだけ、190pxに近い値に変更する方法、
つまり、カレンダー幅とカテゴリー欄の幅(バックグラウンドに色を付けている部分)
が、揃っているように見えるよう、修正する方法を教えてください。

お手数ですが、私のサイトをご覧いただいた上で、ご指導ください。
私のブログのURLは以下です。よろしくお願いします。


2006-12-27 11:11の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(2)

2.

2006-12-28 03:37:20ベスト
サイドは190pxでなく、175pxなのではないでしょうか
.calendartable{
の後
width:188px;

width:175px;
にし
後はサイドに揃う様に
margin:0 10px 0 0;
を追加してやるとどうでしょうか?

.calendartable{
width:175px;
margin:0 10px 0 0;

これで試して頂けませんか?

kiss115さんの指示通りに変更したら、できました(喜)。
カレンダー幅が小さくなり、他のカテゴリーの幅に近づきました。
カレンダー内の文字のズレもなく、正しく表示されています。

丁寧な回答をありがとうございました。

1.

2006-12-28 02:07:30
CSSを拝見して気付いたことを書きます。
カレンダーのCSSの一帯の中に
.calendarwd{width:194px;}
というものがありますので、これを188に変更してみるのはいかがでしょうか?
宜しければお試し下さい。

見当違いでしたらすみません。
結果をコメント欄でお知らせ頂ければ幸いです。
回答レベル : アドバイス
Ads By Google

コメント(7)

#1.  Kiss115
2006-12-28 03:39:12

CSSはバックアップされているという事でしたので
ダメだったら元に戻してください^^;

2006-12-28 10:35:23

望さん、回答をありがとうございます。
やってみましたが、カレンダー幅は変わりませんでした(涙)。

そこで、kiss115さんのやり方で試してみたら、カレンダーの幅が小さくなり、他のカテゴリーやフリーエリアよりやや小さいサイズになりました。
これで行こうと思います。

お二人とも、回答をありがとうございました。

2006-12-28 10:42:16

kiss115さん、ひとつ質問なのですが、
サイドは190pxでなく、175pxなのでは…とあるのは、CSSのどの部分を見れば良かったのでしょう?

お手数ですが、今後の参考に教えていただければ助かります。
よろしくお願いします。

2006-12-28 10:50:52

見当違いの回答ですみません(>_<)
Kiss115さんではありませんが、サイドは190pxでなく、175pxなのではというのは、CSSのこの部分のことだと思います。

.side{
width:190px;_width:175px;
二つ並んでいて不思議だとは思っていたのですが、後ろのものが優先されるのやもしれません。
もし190pxの記述が不要なら削除しても大丈夫なのではないでしょうか。

#5.  Kiss115
2006-12-28 11:13:50

私は全くのド素人でCSSの基礎など全く理解しておりません^^;
ですので”カン”で申し訳ないのですが
望さんも仰っている通り

.side{
の部分に
width:190px;_width:175px;
こう記載されているのと
見た感じ190pxもあるようには見えなかったので…^^;

それと
/*と*/で挟まれている記述はコメントアウトと言って
反映しないらしいです

ですので
.calendartable{
width:175px;
text-align:center;/*
margin-left:5px;
_margin:0 10px 0 0;*/
}
ではなく
.calendartable{
width:175px;
margin:0 10px 0 0;
text-align:center;/*
margin-left:5px;
_*/
}
こうしてみて頂けませんか

左端が揃うと思うのですが…。

2006-12-28 21:14:37

望さん、コメントをありがとうございます。
CSSの .side の部分を見れば良かったのですね。判りました。

.side{
width:190px;_width:175px;

の部分、2つ並んでいるので、実は前から不思議でした。
後ろの数字が反映しているのですね。
でも、削除はちょっと不安です。現状は上手く機能しているので、
とりあえず今はこのまま並べて置いておこうと思います。

2006-12-28 21:16:11

kiss115さん、追記でのコメントをありがとうございます。
私は、前回もらった回答で、幅が小さくなったので、
ほとんど満足してしまっていました(汗)。

コメントアウトの部分は全く知りませんでした。
私は、margin とか padding のような、余白の指定について
よく理解できてないので、少し勉強してみます。

まずはkiss115さんの指示通りにやってみると、端がきれいに揃いました。
私が言うのもヘンですが、カレンダー部分を見て惚れ惚れしています。
本当にありがとうございました。

kiss115さんのレベルで「ド素人でCSSの基礎など全く理解してない」となると
私などは、自分の存在意義さえ見つけられないほど落ち込みます(笑)。
今後とも、よろしくご指導ください。

トラックバック(2)

トラックバックURL: