« ココログのエラーメッセージについて | トップページ | CNNのリポーターはエイリアン? »

2008/07/22

ブログのデザインを大幅に変更した

ブックマークに追加する
ほぼ、2年ぶりにブログのデザインを大幅に変更した。
# 見た目は、左サイドバーが右サイドバーに移動しただけに見えるが裏側はかなり変更している。
# 特に、携帯ユーザにとっては、サイトにアクセスしたときに、サイドバーの文字ではなく、本文が
# 最初に来るはずなので、後ろの方で本文が途切れることも少なくなるはず...

まず、今回、変更するにあたって、CSSのフレームワークを使用した。このCSSのフレームワークを選定するにあたって、有名処で言うと、Blueprint960 Grid SystemYAML (Yet Another Multicolumn Layout)といったものがあるが、今回は、構築時にGUIのツールが使用できる、YAMLを使うことにした。

このYAMLのGUIツール、YAML Builderというものであるが、このツール、ドラッグ&ドロップでデザインを決めていけるので、ラフなイメージを固めていくのが非常に楽である。


YAML Builderの画面例



このツールでラフデザインが作ると、サンプルコード(xhtml, css)が生成されるので、その生成された雛型を元にして、最終的に使用したいページにdivタグを組み込んでいく。

このフレームワークは、YAMLのサイトよりダウンロードしたモジュールから、「/yaml」以下をサーバにアップロードしておく必要があるが、ココログにアップロードするには、一個ずつアップロードしないと駄目なのでちょっと面倒。

YAML Builderで生成されたコードとYAMLフレームワークのファイル群のセットで無事にページが表示される。

なお、このCSSフレームワーク、何が嬉しいかというと、いわゆるIEバグ対応が組み込まれており(通常、CSSフレームワークと称するものは大体、このIEバグ対応を謳っている)、CSSデザインの鬼門でもあるIEバグの対応がかなり楽になっている。

サイドバーの細かいところはまだ微調整が必要だが、大体は新デザインに移行した。
今回、このYAML導入により、デザイン変更で、TypePadのテンプレート変更以前に、スタイルシートの変更だけで済む部分がかなり増えたのでデザイン変更がかなり楽になっている。

# さすがに、2000エントリ近くを再構築するのは、時間がかかりすぎるが、
# スタイルシートの変更はファイルのアップロードだけで済むので...

# なお、jQueryをいじる予定であったが、動きが一部おかしいので別途調整...


■2008年7月23日追記
印刷用のCSSを設定した。
実はYAML Builderで作った雛型のサンプルコードには印刷用のCSSがコメント化された状態で含まれており、マニュアルの「3.9.1 Printing Preparation」の解説を見て、適切なテンプレートを選ぶだけで標準的な印刷用CSSが設定できてしまう。

●お探し物は見つかりましたか?まだの方は以下の検索をご利用下さい。
 
当ブログ内 (within this blog) Web
●当ブログのRSSフィードをお手持ちのRSSリーダーにご登録いただくと、エントリ追加時のみ更新通知が届くため、確認の手間が省けます。よろしければ、どうぞ。
当ブログのRSSフィード
●当ブログの更新情報+α(deliciousのブックマーク他)はTwitter経由でも確認できます。是非フォローしてください。(実はRSSフィードよりも更新が早かったりします)

|

ウェブログ・ココログ関連」カテゴリの記事

blog comments powered by Disqus


●Google広告


●その他の広告



トラックバック

この記事のトラックバックURL:

●トラックバックされる方へのご注意
本文中でこのエントリのアドレスを引用してください。引用(言及リンク)がない場合はスパム(迷惑行為)として削除します。
なお、迷惑行為かどうかを人力で判定しているため、トラックバックが反映されるまでに少々、お時間を頂いています。
For foreigners: If you would like to trackback to this entry, please include permlink of this entry in your entry. If your entry doesn't include this permlink, I will delete your trackback as spam.

この記事へのトラックバック一覧です: ブログのデザインを大幅に変更した:

 
Google