![あせる](https://stat.ameba.jp/blog/ucs/img/char/char2/029.gif)
はやくベースのサイトを作っちゃいたい><
そこで、Web Diary Professionalへの回帰
![ビックリマーク](https://stat.ameba.jp/blog/ucs/img/char/char2/039.gif)
Web Libertyさんで配布されている3段組みのスキンに変更し、できるだけ以前のSSIサイトに近くなるようにCSSをカスタマイズ。
出来上がったのは、こちら(http://cgi20.plala.or.jp/vitz/diary.cgi)
大きく違う点。
前は
position: relative;
にして、全体を画面の中央に表示させていました。
しかし今度は構造上それができないので、
position: absolute;
にして全要素をピクセル単位で指定することにしました。
よって、PCブラウザで見ると全体が左寄り。
最初は気持ち悪いなぁと思ったけど、そういうものだと思えばそんなに気にならないかも(笑)
iPad Safariでは横向きでぴったり収まります
![ラブラブ](https://stat.ameba.jp/blog/ucs/img/char/char2/035.gif)
左サイドバーにはカテゴリ&サブカテゴリを表示。
カテゴリのみ背景画像をつけました。
今はいいけど、いずれカテゴリ&サブカテゴリが増えたらここに収まりきらなくなるな(^^;
中央部分は、記事エリア。
以前は日本語部分が英語部分よりも大きくとってありましたが、今回は50:50に。
やっぱり半々のほうがバランス良い
![晴れ](https://stat.ameba.jp/blog/ucs/img/char/char2/022.gif)
最初にサイトを開いた時は、最新の記事が表示されます。
divにスクロールバーをつけて、ページ内に収まるように。
記事の下にページナビゲーションをつけました。
右サイドバーの上部はカレンダー。
これだけフォントをSerifに変えてみたり。
日付をクリックすると、その日にアップした記事一覧が表示されます。
カレンダーの「≪」・「≫」や右サイドバー下部の「Monthly log」から月を指定すると、その月にアップした記事一覧が表示されます。
試に10個ほど記事をあげてみましたが、大丈夫そう
![音譜](https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif)
![合格](https://stat.ameba.jp/blog/ucs/img/char/char2/304.gif)
とりあえずはここまで。
他の部分も暇をみつけてはコツコツ気長にやっていきたいと思います
![ペンギン](https://stat.ameba.jp/blog/ucs/img/char/char2/015.gif)
![音譜](https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif)