chocobit

html5テスト運用中

Search

サイトデザインを大幅に変更してみた

タイトルどおりです。具体的にはこんな感じ。

ロゴマーク作成

前回の変更は、エントリー「タイトルをデザイン」を見てもらったら分かるように、「chocobit」っていうタイトルのみの変更だったわけだけど、その横に大きめのチョコを置いてみました。
さらに鏡面反射させたんで、Web2.0っぽいデザインになった？（これ言うのもちょっと恥ずかしい風潮ありますが…）

右下に「▲ Page Top」を追加

「▲ Page Top」は押してもらえば分かるとおり、スルーっとページ上部まで上がってくれるJavascript。
Web-Graphicsというサイトで紹介されてたものをそのまま使用させてもらいました。
設置は非常に簡単で、

function backToTop() {
    var x1 = x2 = x3 = 0;
    var y1 = y2 = y3 = 0;

    if (document.documentElement) {
        x1 = document.documentElement.scrollLeft || 0;
        y1 = document.documentElement.scrollTop || 0;
    }

    if (document.body) {
        x2 = document.body.scrollLeft || 0;
        y2 = document.body.scrollTop || 0;
    }

    x3 = window.scrollX || 0;
    y3 = window.scrollY || 0;

    var x = Math.max(x1, Math.max(x2, x3));
    var y = Math.max(y1, Math.max(y2, y3));

    window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));

    if (x > 0 || y > 0) {
        window.setTimeout("backToTop()", 25);
    }
}

このスクリプトをページ内でも外部リンクでもいいんで設置してやって、

<a href="#" onclick="backToTop(); return false">Back to Top</a>

というようなページトップへのリンクを貼るだけ。

ミニアイコンを色々取り入れた

使用したミニアイコンは、N.Design Studioさんのを少しカラー変更して使わせてもらいました。

デフォルトのフォントサイズをやや大きめに

フォントサイズは、最近大きく見やすくする傾向があるので、75%から80%に変更。
5%だけなんで、ホントにわずかですが、WEBデザインでデフォルトのフォントサイズ変えるのって、ちょっとした勇気いりません？

リキッドレイアウトに

今まで幅固定のレイアウトしかしてこなかったので、これまた少し勇気がいりましたが、やってみました。
「min-width」「max-width」も指定したので、モダンブラウザでは最大幅・最小幅があります。
IE6.0以下が未対応なので使うか迷ったのですが、7.0からは対応してるし、明日発売の「Windows Vista」はIE7.0が標準装備だからということを自分に言い聞かせて踏み切りました。

あと他にも背景色やCopyright部のデザイン、全体的にドロップシャドウなどの演出を加えたりと、色々いじってます。
これまでのデザインがβ版とも言いがたいものだったんで、これでようやくβ版！
（正式版は未定）

Tag

Message

Message

Trackbacks (0)

TrackBack URL

Page Top