サイト改装 | ウェブデザインのお勉強♪ HTML5, CSS, CGI...

ウェブデザインのお勉強♪ HTML5, CSS, CGI...

『Dear Diary』…昔からHP作りが好きで、最近HTML5を中心にまた独学で勉強を始めました。
CSS等の練習や、変わっていくであろうサイトの備忘録も兼ねて、ウェブデザインについて日々の気付き etc. を綴ります。

Freo設置に苦しむ中、サイトにアップしたいことは日々増える一方あせる
はやくベースのサイトを作っちゃいたい><

そこで、Web Diary Professionalへの回帰ビックリマーク

Web Libertyさんで配布されている3段組みのスキンに変更し、できるだけ以前のSSIサイトに近くなるようにCSSをカスタマイズ。


出来上がったのは、こちら(http://cgi20.plala.or.jp/vitz/diary.cgi)


大きく違う点。
前は
position: relative;
にして、全体を画面の中央に表示させていました。

しかし今度は構造上それができないので、
position: absolute; 
にして全要素をピクセル単位で指定することにしました。

よって、PCブラウザで見ると全体が左寄り。
最初は気持ち悪いなぁと思ったけど、そういうものだと思えばそんなに気にならないかも(笑)

$ウェブデザインのお勉強♪ HTML5, CSS, CGI...-20131116_Chrome


iPad Safariでは横向きでぴったり収まりますラブラブ

$ウェブデザインのお勉強♪ HTML5, CSS, CGI...-20131116_ipad safari



左サイドバーにはカテゴリ&サブカテゴリを表示。
カテゴリのみ背景画像をつけました。
今はいいけど、いずれカテゴリ&サブカテゴリが増えたらここに収まりきらなくなるな(^^;

中央部分は、記事エリア。
以前は日本語部分が英語部分よりも大きくとってありましたが、今回は50:50に。
やっぱり半々のほうがバランス良い晴れ
最初にサイトを開いた時は、最新の記事が表示されます。

divにスクロールバーをつけて、ページ内に収まるように。
ウェブデザインのお勉強♪ HTML5, CSS, CGI...-20131116_Chrome2

記事の下にページナビゲーションをつけました。

右サイドバーの上部はカレンダー。
これだけフォントをSerifに変えてみたり。
日付をクリックすると、その日にアップした記事一覧が表示されます。
ウェブデザインのお勉強♪ HTML5, CSS, CGI...-20131116_Chrome calendar



カレンダーの「≪」・「≫」や右サイドバー下部の「Monthly log」から月を指定すると、その月にアップした記事一覧が表示されます。
ウェブデザインのお勉強♪ HTML5, CSS, CGI...-20131116_Chrome 月別記事一覧



試に10個ほど記事をあげてみましたが、大丈夫そう音譜 ほんと自己満足の世界ですね合格(笑)

とりあえずはここまで。
他の部分も暇をみつけてはコツコツ気長にやっていきたいと思いますペンギン音譜