#blognavi
ブログのレイアウトを2段組から3段組に作り変える、とゆ~ミッション
∠(・_・)
サンプル作ったんで興味あるヒトのために公開。
目次ページにアクセスしてね。
オコトワリをひとつ。2段組→3段組のページサンプルは足をつっこんだ行きかがり上、ビアンコ&ロッソさんのブログデザインを借用してます。_(_^_)_

で、3段組レイアウトを組んでみての感想。
3段組を実装するには、HTMLとCSSを直編集する必要があります。それが可能なブログならOK。
目次ページのほうにCSSファイル(スタイルシート)へのリンクを付けておいたから、実装したいヒトはページソースとCSSファイルをコピっていって。
一応Windows環境での各種ブラウザによるテストは行いました。

サンプルなんでページ内のリンクは無効ですが、ページ上部のナビゲーションリンクはホバリング効果(リンクにマウスカーソルを合わせた時のアクション)は有効にしてあります。
スクリーンショット


2段組から移行の場合の問題点。
一番の問題点は投稿する画像の大きさです。最初から3段組レイアウトを選んで使っているケースと違って、途中からスキンを変更した場合、特に可変レイアウトでは記事エリアに表示できる画像の横幅に気をつけないと、レイアウトが崩れる可能性があります。
どうにも出来ないのはレイアウト変更前にアップしてきた画像の数々。レイアウト(スキン)を変えるってことは、過去のアーカイブ全般に影響を及ぼすので、

レイアウト崩れを起こしたくない場合は3段組に移行するにも、可変レイアウトではなく固定レイアウトを選ぶのが無難かなーー。
ココログやうらんが利用しているWORDPRESSなどのブログサービスで、画像を投稿すると画面に表示させるサムネイルが自動的に作成されるのは、上記にあげた問題点に対する対処策なんでしょうね。

サムネイルならサイズも小さいし容量も軽いから、低速回線ユーザでもサクサク、ページを閲覧することができるもん。ブログはパソコン初心者でもカンタンに始められます!ってあちこちで宣伝してるけど、パソコン初心者が必ずハマるのが大きい画像をそのままアップすること。
画像を表示できる掲示板でもアップする画像の大きさや容量に制限が設けられているのは、一人でも大きい画像をアップしてしまうことによる、他の不特定多数のユーザにかかる負担を減らすため。

ちなみにサンプルを作ってから、他所のブログはどうなってんじゃいとヤプログやらココログやらをチェックしてみました。
うらんが見たおともだちブログに限定した話になりますが、ココログは3段組固定レイアウトでは、横幅900ピクセル以上の画面サイズが必要になるものの、テキストは横幅800ピクセルに収まるように作られているのでセーフでした。(^^)v
ページ上部にFlashを使うスキンでも、ページの読み込み完了後にFlashオブジェクトを読み込む、といった、訪問者にストレスを感じさせない組み立てになってます。感心感心。流石@nifty。(^^;)

問題があるのはヤプログのほうでした。
一部の3段組レイアウト(スキン)で、Netscape7で横幅800ピクセルしか表示できない画面ではページを表示させると、ページ左端がチョン切れて見れない!のです。
これはスクロールさせて見るってことが不可能なので、カレンダーが火曜日からしか表示されないのはともかく、リンク文字列が途中からしか読めないのは不便ですっちゃ、、。(ーー;)

これはヤプログスタッフさんの検証テスト不足か、Netscape7+SVGAユーザを切り捨てたか、どちらなんだろうな。現実的にかなりマイノリティな組み合わせだし。
但し、この現象はヤプログすべての3段組スキンで現れる問題ではなく、一部の3段組スキンで発生すること。たとえば、カスピちゃんのスキンはOK、バニラさんやようちさんのスキンではNG、といった具合です。

まあ、ブラウザシェアではIEが独走してるし、ここ数年でパソコンを始めたって人はまずブラウザはIEしか使ってないとおもうから、おともだちのところで問題が出るということはないとおもいます。
でも「誰でも(どんなブラウザ、環境でも)アクセスできる」というHTML4のコンセプトからすると、ヤプログのスタッフ、デザイナーさんには一考してもらいたいぞ。。


  • そうなんだ・・・成る程ね
    為になりますがな・・・・色々勉強しなきゃ駄目かなあ
    スキンの種類によってはってことですね。
    因みに・・・画像はそれなりにサイズを小さくしないと
    ちょん切れてたのでそこだけは調整してますが・・
    ページの左端・・・切れているのか・・・・うぬぬぬ。
    だし・・昨夜は重かった・・・llllorz -- ようち (2006-07-10 10:15:47)
  • 出来たのですね!?すごいです!それに分かりやすく書いてくださってありがとうございます。
    CSSの中の、side barのところで、1箇所説明不足のところがありますので、メールしますね。
    -- ビアンコ&ロッソ (2006-07-10 12:23:54)
  • うちも3カラムだったりw
    最初は、2カラムだったんですけど
    著作権表示を一番に見てもらいたかったのもあるけどねw
    2カラムの時は、右サイドバーだったし

    今は、ヴァージョン2ですw
    というか、一回修正するつもりが・・・w

    ちなみに、真っ白なのも意味有りですw

    うちってうらんさんとこから見てどうなのか聞いて見たいのですが? -- コムムス (2006-07-11 00:05:06)
  • 連投、m(。-_-。)m スイマセーン

    うらんさんって、オペラユーザーなんですねw -- コムムス (2006-07-11 00:07:48)
  • こっちも亀レスでスミマセン。(^^ゞ
    ようちさん→
    悪いのはヤプログのほうだし(をい)IEユーザや今時の高解像度モニタを使ってるヒトの環境ではだいじょうぶだから、気にしなくてOKどえす。
    こういうとこは、サービスを提供する側が解決しとくべき問題なのだ。
    ビアンコ&ロッソさん→
    メール、、今から受信してきます。(^_^;)
    サンプルはあのままじゃ、ビアンコさんブログに流用できないですもんね。
    トモたま送ってくれたコムムスさん→
    たまごはいま冷蔵庫でお休みしておりまし、、。
    コムムスさんとこも3カラムすね。ソース、キャッシュに落として見てみよう。
    オペラも、はや、Ver.9になるのですね。
    IEはやっと、Ver.7それもベータ。低速回線でダウンロードできないしい。
    最近は、Firefoxメインですかね。 -- うらん (2006-07-13 17:03:32)
名前:
コメント:




カテゴリ: [インターネット] - &trackback() - 2006年07月10日 09:52:28

#blognavi
最終更新:2006年07月13日 17:03