うつ病けんけんのFedora/FreeBSD/Linux/UNIXのまとめ日記

またまた、blogデザインを替えました。
とってもシンプルなデザインをもとに、 CSSプロパティをいじったり、 Livedoor用というかMT用の特殊タグを弄って。

ブログトップ絵

ブログトップ絵を抜本的に差し替えました。
カラフルというか虹色ですね。全色というか。
The Best of L’Arc~en~Ciel 1998-2000 (通常盤)
クチコミを見る
好きなんで。 L'arc~en~Ciel=フランス語で虹という意味だそうで。

で、なんで菱形かというと、 倉木麻衣ちゃんの
DIAMOND WAVE(初回限定盤)(DVD付)
クチコミを見る
好きなんで。
ブリリアントカットじゃないですけどね(´・ω・｀)

あ、今度ブリリアントカットを
Inkscapeマスターテクニック 【無料グラフィックソフト「インクスケープ」を極める】 (100%ムックシリーズ)
クチコミを見る
を使ってデザインしてみますか。

デザインカラー

皆さんお気づきのように、 背景色はブラックです。
もとのテンプレートは背景色は白色で、文字色は黒だったので、 文字が見えなくなりながら地道に変更して行きました。

苦労した(*´∀｀*)
デザインカラーは、

Web creators (ウェブクリエイターズ) 2009年 12月号 [雑誌]
クチコミを見る
を参考にして、黒とマジェンダを組み合わせて ガーリーな配色。

2段組、左メニュー、リキッドレイアウト

レイアウトが一番こだわった箇所。
ワザと、メッセージボードとプラグインカラムの高さをずらしてダイナミックさを表現。

そして、ブラウザのサイズや解像度のサイズによって、幅が伸び縮みするリキッドレイアウトというのを採用しています。
そして、右側にプラグインがあったのですが、CSSを弄って左側に移動させています。

blogデザインを変更するためのコツ

最初は、HTML/CSSをblogでいじるとわけがわからなくなるので、 世間に非公開でもいいので、

詳解HTML & CSS & JavaScript辞典
クチコミを見る
をみて自分でHTML/CSSをひたすら試す。 でしょうか。

blogデザインを変更する際に参考にした書籍の写真

ここで紹介した雑誌は本当にこのとおり買ったものだったり。 全部説明して載せたいけど内容が濃すぎて書く元気ありましぇん。 申し訳ないですが、上記リンクからご購入を(*´∀｀*)

本当に買ってることを証明するために写真をペタン

ということです。

デザインは綺麗なもの多いのですが、レイアウトが崩れるものが多い…

特に、メッセージボードを強引に挿入すると崩れる…
というわけなんで、このデザインをちまちまと弄って、俺得にしますかね。

HTML/CSSって難しい…

一応、個別記事の時にもメッセージボードが出ていて、 検索結果に対応する記事の前にずるずらと、 メッセージボードが表示されるとじゃまかな？と思って消しました。

このLivedoor固有のタグを理解するのに時間が…

Livedoor blogは、MT(Move Type) blogシステムの拡張みたいですね。 Webデザインは、奥が深い…

Web デザインのレイアウトは、

写真のように、 一生懸命、内容を吟味したんですけどねえ。
まあ、この雑誌のidのつけ方、 content,container,main,sub,extraという業界標準？のつけ方も 書いてあって非常に参考にはなりましたけども。

Web creators (ウェブクリエイターズ) 2007年 10月号 [雑誌]
クチコミを見る
を読みた押して、自信持ってたのですが、
使い倒すにはまだまだ修行が入りますなあ。

XHTML+CSS プロが教える“本当の使い方”
クチコミを見る