カレンダーの幅の変更は、どの部分ですか?
Meadow(2カラム)のデザインを利用して各種のカスタマイズを行っています。フリーエリアを含むカテゴリーの幅が190pxなので、
それにできるだけ近いサイズにカレンダーの幅を変更したいと思いますが、
現在、見てみると、.calendartable{width:188px; なのに、
190pxの幅より大きくなっていて、状況がよくわかりません。
カレンダーに関しては、カスタマイズをしていて、
最初は180pxだったのを188にしました。さらに、文字も太字だったのをノーマルに変更しています。
デフォルトの状態では、日付にリンクがはられた状態で、2桁の数字が縦方向にズレてしまい、表示くずれが起こったため(日曜日~火曜日までの3セルのみがズレました)、なんとなく手探りで180pxを188pxに変更したら、ズレが直ったのでそのまま使っているという、かなりいいかげんな状態です(汗)。
サイドの幅や、カレンターテーブルの幅、カレンダー内の数字のフォント、
セルの幅、数字の周囲の余白(paddingですか??)なども、
しっかり理解したうえで、できるだけ、190pxに近い値に変更する方法、
つまり、カレンダー幅とカテゴリー欄の幅(バックグラウンドに色を付けている部分)
が、揃っているように見えるよう、修正する方法を教えてください。
お手数ですが、私のサイトをご覧いただいた上で、ご指導ください。
私のブログのURLは以下です。よろしくお願いします。
回答(2)
2.

.calendartable{
の後width:188px;を
width:175px;にし
後はサイドに揃う様に
margin:0 10px 0 0;を追加してやるとどうでしょうか?
.calendartable{
width:175px;
margin:0 10px 0 0;
これで試して頂けませんか?
kiss115さんの指示通りに変更したら、できました(喜)。
カレンダー幅が小さくなり、他のカテゴリーの幅に近づきました。
カレンダー内の文字のズレもなく、正しく表示されています。
丁寧な回答をありがとうございました。
1.
カレンダーのCSSの一帯の中に
.calendarwd{width:194px;}
というものがありますので、これを188に変更してみるのはいかがでしょうか?宜しければお試し下さい。
見当違いでしたらすみません。
結果をコメント欄でお知らせ頂ければ幸いです。
コメント(7)
CSSはバックアップされているという事でしたので
ダメだったら元に戻してください^^;
望さん、回答をありがとうございます。
やってみましたが、カレンダー幅は変わりませんでした(涙)。
そこで、kiss115さんのやり方で試してみたら、カレンダーの幅が小さくなり、他のカテゴリーやフリーエリアよりやや小さいサイズになりました。
これで行こうと思います。
お二人とも、回答をありがとうございました。
kiss115さん、ひとつ質問なのですが、
サイドは190pxでなく、175pxなのでは…とあるのは、CSSのどの部分を見れば良かったのでしょう?
お手数ですが、今後の参考に教えていただければ助かります。
よろしくお願いします。
見当違いの回答ですみません(>_<)
Kiss115さんではありませんが、サイドは190pxでなく、175pxなのではというのは、CSSのこの部分のことだと思います。
.side{
width:190px;_width:175px;
二つ並んでいて不思議だとは思っていたのですが、後ろのものが優先されるのやもしれません。もし190pxの記述が不要なら削除しても大丈夫なのではないでしょうか。
私は全くのド素人で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;
_*/
}
こうしてみて頂けませんか左端が揃うと思うのですが…。
望さん、コメントをありがとうございます。
CSSの .side の部分を見れば良かったのですね。判りました。
.side{
width:190px;_width:175px;
の部分、2つ並んでいるので、実は前から不思議でした。
後ろの数字が反映しているのですね。
でも、削除はちょっと不安です。現状は上手く機能しているので、
とりあえず今はこのまま並べて置いておこうと思います。
kiss115さん、追記でのコメントをありがとうございます。
私は、前回もらった回答で、幅が小さくなったので、
ほとんど満足してしまっていました(汗)。
コメントアウトの部分は全く知りませんでした。
私は、margin とか padding のような、余白の指定について
よく理解できてないので、少し勉強してみます。
まずはkiss115さんの指示通りにやってみると、端がきれいに揃いました。
私が言うのもヘンですが、カレンダー部分を見て惚れ惚れしています。
本当にありがとうございました。
kiss115さんのレベルで「ド素人でCSSの基礎など全く理解してない」となると
私などは、自分の存在意義さえ見つけられないほど落ち込みます(笑)。
今後とも、よろしくご指導ください。



