もう既に昨日になりますがこのブログのデザインをリニューアルしました。(PC版のみですが)
理由はいくつかあるのですが、まず以前のデザインに飽きていたと言うのがありますw
過去のエントリなども、大体大丈夫だとは思いますが「ここデザイン崩れてるよ!」等ありましたらコメントやメールなどで教えていただけると幸いです。
デザインコンセプト
今回考えたのは以下の4点。
- デザインは出しゃばりすぎずシンプルに、かつできるだけ上品にする
- 以前のデザイン以降、新しく追加された機能にできるだけ対応しつつ、それらをさりげなくさせる(仰々しくさせない)
- ブラウザによって見た目がかわっても良いので、よりエンハンスメントなスタイルにする
- jQuery を少しだけ覚えたのでそれを使ってゴニョゴニョする
それぞれ簡単に説明すると・・・
デザインは出しゃばりすぎずシンプルに、かつできるだけ上品にする
以前のデザインで気になっていたのは、全体的にブルーが強すぎてそれ以外の物が置きにくかった点です。
そのため今回は全体を薄いグレーでまとめ、それぞれのパーツもあまり濃い色にはしませんでした。
色々薄すぎるかどうか、な部分ももちろんあるのですが個人的にはぎりぎりのライン。そしてそれが薄すぎて見えなくても困らないようには配慮したつもりです。
新しく追加された機能にできるだけ対応しつつ、それらをさりげなくさせる
新しく追加された機能とは
- livedoor Blog 開発日誌 : 共通テーマと訪問者カウンターをリニューアルしました - livedoor Blog(ブログ)
- livedoor Blog 開発日誌 : 「livedoor プロフィール」公開のお知らせ - livedoor Blog(ブログ)
- livedoor Blog 開発日誌 : ブログのページ移動(ナビゲーション機能)を強化しました - livedoor Blog(ブログ)
- livedoor Blog 開発日誌 : 同じカテゴリの最新記事を表示する機能を追加しました(7/29 Update!!) - livedoor Blog(ブログ)
- livedoor Blog 開発日誌 : ブログのカテゴリ別に最新記事を表示するRSSを公開しました - livedoor Blog(ブログ)
- livedoor クリップ - ブログに「クリップコメント」を設置する方法
などです。
特にクリップコメントはコメントやトラックバックなどと同じような表示で馴染ませることができたので満足していますw
ブラウザによって見た目がかわっても良いので、よりエンハンスメントなスタイルにする
ある意味メインだったりしますw
CSSサポートが未熟なブラウザでも最低限のスタイルは保ちつつ、より多くのスタイルをサポートしているブラウザでは、よりリッチなスタイルを提供できるようにしてみました。
具体的には border-radius や RGBA、box-shadow などですね。
そのためブラウザによって表示が異なるはずです。
個人的なおすすめは Safari、もしくは Firefox 3.1 Beta です。
ちなみに Google Chrome が Webkit 使ってるくせに CSS のバグがあるのは何とかならないですかね?
jQuery を少しだけ覚えたのでそれを使ってゴニョゴニョする
少しだけゴニョゴニョしてますw まぁ、主にプラグイン使って程度ですけど。
今回使用したプラグインは
- Collapsorz :: jQuery Plugins by Aaron Kuzemchak
- InnerFade with jquery
- jQuery tutorial: Text box hints
- Plugins | jQuery Plugins
- jQuery Easing Plugin
とか、そんな感じです。
- ブログネタ:
- ライブドアブログのカスタマイズ に参加中!