« 漂泊感 | トップページ | ドイツの子供乗せ自転車 »

2009年4月12日 (日曜日)

ブログ 模様替え

ご覧の通り、久しぶりにブログのデザインを変えてみました。
サイドバーが右に2列というのは、あまり見ないデザインでしょう。

いままで右サイドバー1列のレイアウトを使っていました。これは、狭い画面の人でも読みやすいように、本文は左側に配置したほうがよかろうとの考えからです。ヘッダもあまり大きくない、シンプルなものを選んでいます。しかし、ブログパーツに凝り始めると、サイドバー1列では長くなりがち。かといって、左右にサイドバーがある3列レイアウトの既製テンプレートは、中央の本文カラムの幅が狭くて窮屈です。
(リッチテンプレートを使わなければいい、というのは言いっこなしで。)

そこで見つけたのがこのデザインなのですが、ココログのテンプレート集には、直接収録されていないものなので、あまり使われているのを見ません。シンプルながら個性的ではないかと、ほくそ笑んでいます。これはココログにテンプレートを提供している業者のひとつdecowebのサイトで配布されているものです。配布CSSを読んでみたら、右サイドバーの一つ目は論理上は「左サイドバー」で、
left: 550px;
width:200px;
と、大きな水平オフセットを与え、中央の本文カラムを
left: -200px;
width:550px;
として、左サイドバーの幅と等しい負のオフセットを与えて左端に寄せていました。なるほどね。ページの表示のとき、よく見ると本文より左サイドバーが先に読み込まれるのが分かります。

本文幅550px、サイドバーが200pxずつ、計950pxで、XGAに近い幅を占めてしまうのは、さっき言った「狭い画面でも見やすい」主義に反してしまいます。それでも操作性を考え、左サイドバーには、ブログのナビゲーションに関する、ココログ標準のパーツを配置。本文より先に読み込まれるので、重いパーツは置かないようにしました。右サイドバーは遊びのパーツ。狭い画面で切れたり、読み込みが遅くても差し支えのないものにしました。

実は1年くらい前に、このデザインを見つけて試してみていたのですが、当時使っていたブログパーツと相性が悪くて、保留してしたもの。いま試したら問題なかったので、ようやく模様替えできました。

|

« 漂泊感 | トップページ | ドイツの子供乗せ自転車 »

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

コメント

う~む。think
背景が表示されるまで、ちょっと時間がかかりますね。

投稿: ごんざぶろう | 2009年4月14日 (火曜日) 19:40

最初、濃い灰色に黒でなんて読みにくい配色、と思いました。firefoxだからかもしれませんが、ぱらぱらとレンダリングされてほとんど最後に本文の背景が明るい灰色になりますね。

投稿: おーの | 2009年4月14日 (火曜日) 21:42

そういう率直な意見を待っていました。
海外だから遅いのかな、とも思いましたが、国内でもやっぱり遅いのですね。think

CSSを見てみると、背景は本文からサイドバーまで繋がった、幅950×高さ10の細長い画像で出来ていて、結局、遊びの右サイドバーのレンダリングが終わって、高さが確定してから、縦方向にタイル表示されていました。遅いわけです。

背景画像表示前の背景色が暗いグレー#555(ヘッダと本文の間にある色と同じ)だったのを、背景画像の本文部分と同じ明るいグレー#F4F4F4に変えてみました。これでレンダリング中も見やすいし、完了後の切り替わりも違和感ないかと思います。

ご意見ありがとうございました。

投稿: ごんざぶろう | 2009年4月15日 (水曜日) 00:13

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/23831/44649513

この記事へのトラックバック一覧です: ブログ 模様替え:

« 漂泊感 | トップページ | ドイツの子供乗せ自転車 »