2005年08月19日 17:04
新環境後のカレンダーヘッドの件
ライブドアブログが新環境に移行してからいろいろありますが、自分もあって質問もあったので記事にしてみます。(質問した方にはそちらの記事で回答を書いてます)
カレンダーに << と >> がついて移動できるようになりましたが、これがついたためにバランスが崩れた(左右に広がりすぎたり、年月が改行されたりなど)場合は
.calendarhead の中の
letter-spacing:5px;
の部分の数値を小さくすれば多分収まるでしょう。
自分の場合は1pxにしてみました。
しかし、ヘッド全体がなぜか左よせ。これを中央寄せにならないものかとmarginあたりいじってみましたができず。
どうすればいいのかわかった方、教えてください。→追記3へ
※追記
年月が英語表記の場合、いちばん長い月(Septemberなど)は letter-spacing が 0px でもだめかもしれません。サイドバー全体の幅を広げるか、日本語表記にするかくらいしかいまは思いつきません。
※追記2
0ならいちばん長い月でもぎりぎり大丈夫かもしれません。9月になればわかります。
※追記3(8/20):ヘッド全体の中央寄せ
なんということなかった。
.calendarhead の中に text-align:center; を入れればいいだけの話だった。
※追記4(8/20):独自タグが追加されてた
.calendarpre{margin-right:-10px;color:#6A5ACD;font-weight:blod;}
.calendarnext{margin-left:-10px;color:#6A5ACD;font-weight:blod;}
↑これが。colorは a:link の中で指定している色とあわせればいいんじゃないでしょうか。
そもそもこれらをどうやるのかというのは、下のコメント欄に書きました。
※追記5(9/4)
Mac版IEだとカレンダー本体だけ左詰になってしまうようです。
.calendartable の margin 設定を
margin:0px 24px 10px 24px;
などととすればぴったり真ん中になります。
(.calendartable の width が 150px で border が左右に 1px 、links の width が 200px でだとしてそれらを差し引いて左右計算するとを 24px となる)
詳しくはMacChipsさんが8/4の記事にまとめてくださってますのでそちらも参考にしてみてください。
カレンダーに << と >> がついて移動できるようになりましたが、これがついたためにバランスが崩れた(左右に広がりすぎたり、年月が改行されたりなど)場合は
.calendarhead の中の
letter-spacing:5px;
の部分の数値を小さくすれば多分収まるでしょう。
自分の場合は1pxにしてみました。
どうすればいいのかわかった方、教えてください。
※追記
年月が英語表記の場合、いちばん長い月(Septemberなど)は letter-spacing が 0px でもだめかもしれません。サイドバー全体の幅を広げるか、日本語表記にするかくらいしかいまは思いつきません。
※追記2
0ならいちばん長い月でもぎりぎり大丈夫かもしれません。9月になればわかります。
※追記3(8/20):ヘッド全体の中央寄せ
なんということなかった。
.calendarhead の中に text-align:center; を入れればいいだけの話だった。
※追記4(8/20):独自タグが追加されてた
.calendarpre{margin-right:-10px;color:#6A5ACD;font-weight:blod;}
.calendarnext{margin-left:-10px;color:#6A5ACD;font-weight:blod;}
↑これが。colorは a:link の中で指定している色とあわせればいいんじゃないでしょうか。
そもそもこれらをどうやるのかというのは、下のコメント欄に書きました。
※追記5(9/4)
Mac版IEだとカレンダー本体だけ左詰になってしまうようです。
.calendartable の margin 設定を
margin:0px 24px 10px 24px;
などととすればぴったり真ん中になります。
(.calendartable の width が 150px で border が左右に 1px 、links の width が 200px でだとしてそれらを差し引いて左右計算するとを 24px となる)
詳しくはMacChipsさんが8/4の記事にまとめてくださってますのでそちらも参考にしてみてください。
トラックバックURL
コメント一覧
1. Posted by うたこ 2005年08月20日 08:31
カレンダーヘッドはどこから設定するのでしょうか?
とてもバランスが悪いのですが、どうしたらいいか
わからなくって・・・
とてもバランスが悪いのですが、どうしたらいいか
わからなくって・・・
2. Posted by junike 2005年08月20日 12:53
>うたこさん
記事を書いたりするときの画面の上のメニューに「ブログの設定/管理」がありますからそれをクリックし、開いた画面の左サイドバーに「デザインの設定」がありますからそれをクリックします。
いちばん右下に「カスタマイズ」というのがあるのでその絵のところをクリックします。
すると最初にすでに表示されているのがいま適用されているスタイルシートですから、それをずーっと下の方にスクロールしていけば、上の記事に書いた部分が見つかりますから、そこを1pxなり、0pxなりにしてから、「この内容で保存する」ボタンを押します。
保存されたら画面左上にある「ブログに設定を反映(再構築)」をクリックしてドロップダウンリストから「デザイン(CSS)」を選んで「ブログを再構築する」を押します。
これでできると思いますが、もしだめなら再構築のところで「インデックス(トップの記事)」の再構築もしてみてください。
記事を書いたりするときの画面の上のメニューに「ブログの設定/管理」がありますからそれをクリックし、開いた画面の左サイドバーに「デザインの設定」がありますからそれをクリックします。
いちばん右下に「カスタマイズ」というのがあるのでその絵のところをクリックします。
すると最初にすでに表示されているのがいま適用されているスタイルシートですから、それをずーっと下の方にスクロールしていけば、上の記事に書いた部分が見つかりますから、そこを1pxなり、0pxなりにしてから、「この内容で保存する」ボタンを押します。
保存されたら画面左上にある「ブログに設定を反映(再構築)」をクリックしてドロップダウンリストから「デザイン(CSS)」を選んで「ブログを再構築する」を押します。
これでできると思いますが、もしだめなら再構築のところで「インデックス(トップの記事)」の再構築もしてみてください。
3. Posted by うたこ 2005年08月21日 00:02
丁寧な説明どうもありがとうございました。
この手順でやってみて、無事に設定変更できました。
本当に助かりました。
心から感謝をこめて・・・!!
この手順でやってみて、無事に設定変更できました。
本当に助かりました。
心から感謝をこめて・・・!!
4. Posted by まるこ 2005年09月03日 19:36
junikeさん。こんばんわ。
いつもお世話になっておりますです。
カレンダー部分にtext-align:center; 入れさせてもらいました(^o^)
ええっと..
Operaについての件です。
もしよかったら私宛にメールしていただけたらお役に立つかもです。
いつもお世話になっておりますです。
カレンダー部分にtext-align:center; 入れさせてもらいました(^o^)
ええっと..
Operaについての件です。
もしよかったら私宛にメールしていただけたらお役に立つかもです。
5. Posted by まるこ 2005年09月03日 20:55
junikeさん
すいません。
.calendarhead の中に text-align:center; を入れているのですが
なぜかwin/IEで確認すると上の<<2005年9月>>部分は真ん中で、カレンダー部分は左詰めになったままなんです。(>_<)
すいません。
.calendarhead の中に text-align:center; を入れているのですが
なぜかwin/IEで確認すると上の<<2005年9月>>部分は真ん中で、カレンダー部分は左詰めになったままなんです。(>_<)
6. Posted by まるこ 2005年09月03日 22:16
なんどもすいません。
marginとwidthを入れることでどうにかこうにか
見栄えはよくなった?みたいです。
marginとwidthを入れることでどうにかこうにか
見栄えはよくなった?みたいです。
7. Posted by junike 2005年09月03日 23:23
まるこさん
Operaの件、あとでメールさせていただきます!!!
けど、アドレス公開してていいんですか?
一応そこだけ削除しておきますね。
カレンダーの件は次のコメントで。
Operaの件、あとでメールさせていただきます!!!
けど、アドレス公開してていいんですか?
一応そこだけ削除しておきますね。
カレンダーの件は次のコメントで。
8. Posted by junike 2005年09月03日 23:23
カレンダー部分というのはカレンダー本体ということでしょうか?
ヘッドの部分と本体は別ものですからヘッドのcenterだけでは本体は左詰のままになるのはわかる気がします(Macだとcenterになってるってことですか?)
おそらく width と margin を入れたというのは
.calendartable の margin:0 0 10px 20px のことだと思いますが、
もしかしたら margin:0 auto 10px auto; というふうに左右の部分をautoにするか、
margin:0px 24px 10px 24px;
とすればぴったり真ん中になるかもしれません(.calendartable の width は 150px のままで)。linksの width が 200px でborder:1px なのでそれを差し引いて左右を 24px としてみました。
うまくいかなかったら元に戻してください。いまのままでも全然大丈夫ですから一応参考までに。
ヘッドの部分と本体は別ものですからヘッドのcenterだけでは本体は左詰のままになるのはわかる気がします(Macだとcenterになってるってことですか?)
おそらく width と margin を入れたというのは
.calendartable の margin:0 0 10px 20px のことだと思いますが、
もしかしたら margin:0 auto 10px auto; というふうに左右の部分をautoにするか、
margin:0px 24px 10px 24px;
とすればぴったり真ん中になるかもしれません(.calendartable の width は 150px のままで)。linksの width が 200px でborder:1px なのでそれを差し引いて左右を 24px としてみました。
うまくいかなかったら元に戻してください。いまのままでも全然大丈夫ですから一応参考までに。
9. Posted by まるこ 2005年09月04日 09:59
Junikeさん
おはようございます。スタイルシート修正してみました。
確認ありがとうございました。
margin:0 auto 10px auto; にするとかわらず左詰めになったままだったのですが
margin:0px 24px 10px 24px; にするとピッタリ真ん中にくるようになりました。
いつもIEだけがくせもので見え方が違うのにはこまってしまいます(>_<)。
メアドの削除ありがとうございました。
メールお待ちしております♪ (^o^)
おはようございます。スタイルシート修正してみました。
確認ありがとうございました。
margin:0 auto 10px auto; にするとかわらず左詰めになったままだったのですが
margin:0px 24px 10px 24px; にするとピッタリ真ん中にくるようになりました。
いつもIEだけがくせもので見え方が違うのにはこまってしまいます(>_<)。
メアドの削除ありがとうございました。
メールお待ちしております♪ (^o^)