ブログのデザイン＆レイアウトを変更してみたよ

　唐突に思い立って、ブログのデザインを変更してみました。これまでは「２列右側サイドバー」だったのを、「３列両側サイドバー」に変更です。

　個人的には「３列右側サードバー」という変則的なデザインにかな～り惹かれたんですが、実際にやってみると、ちょっと読みづらくて断念しました。

　ついでにブログの幅も 800×600 用だったのを、1024×768 に合わせてみました。BROWSIZE.ORG 様のツールで、ユーザーさんの画面の大きさが調べられるんですが、一番多いモニタの幅が 961～1024 なんですよね。ちなみにモニタの幅が 800 近辺の人の割合は １４％ ほど。さて、この割合は多いのか？少ないのか？

　とは言っても、最近売られてるデスクトップＰＣのモニタは１７インチ以上ばかりだし、ノートＰＣだって平気で表示幅が 1000 超えてるし・・・いいよね、いいよね（言い訳）。

　ちなみに、ジャストブログで３列のデザインを選択すると問答無用で 800×600 レイアウトになっちゃうんで CSS を弄らなきゃなりません。つうわけで、「カスタムＣＳＳを編集」で変更したＣＳＳを晒してみます。

・３列両側サイドバー用
div#container {   width: 990px; } div#banner{   width: 980px; } .layout-three-column div#alpha { margin: 0; padding: 0; width: 200px; background: #e6ecf2; } .layout-three-column div#alpha-inner { margin: 0; } .layout-three-column div#beta { margin: 15px 15px ; padding: 0; width: 525px; background: none; } .layout-three-column div#beta-inner { margin: 0; } .layout-three-column div#gamma { margin: 0; padding: 0; width: 225px; background: #e6ecf2; } .layout-three-column div#gamma-inner { margin: 0; } .module-content { margin: 0; padding: 0; } .module-list { margin: 5px; padding: 5px; } .module-list-item { margin: 0; }

・３列右側サイドバー用
div#container {   width: 990px; } div#banner{   width: 980px; } .layout-three-column-right div#alpha { margin: 15px 15px 0; width: 515px; background: none; } .layout-three-column-right div#beta { margin: 0; width: 210px; background: #e6ecf2; } .layout-three-column-right div#gamma { margin: 0; width: 225px; background: #e6ecf2; } .module-content { margin: 0; padding: 0; } .module-list { margin: 5px; padding: 5px; } .module-list-item { margin: 0; }

Comments

[yohsuke]

僕がノートから見ている時、800ですよ。(笑)

メインマシンの方はデュアルモニタですが。

[夢界]

コメントありがとうございます。

あれま、そうでしたか。

じゃぁ、ウチのブログはメインマシンの方で見ていただくということで。

今後とも、よろしくお願いします。