CSSでの2カラムのエントリー側(左)可変でメニュー側(右)固定方法

標記のメモ。私のブログのレイアウトがまさにそうです。

適当になるべく分かりやすいようにサンプルページ作ったんで、ソース見てみてください。

サンプルページ
http://pelolias.com/wp-content/uploads/index1.html
ポイントとしては

  • ネガティブマージンを用いる。(margin-right:201px;の部分)
  • floatプロパティを使った後はclear:bothする。(まぁ常識っちゃ常識ですけど)
  • 私が勝手に思うだけですけど、container(全体)にはmin-widthを実寸で設定した方がいいと思います。(そうしないとエントリーの幅が0pxになるので)

あと、2カラムのエントリーが左でメニューをわざわざ右にするのには訳があります。
検索エンジンのクローラーというのはhtml文章の先頭から記事本文の始まりが早ければ早いほどフレッシュで良くできたサイトと認識するらしいです。(審議のほどは問い合わせてください笑)
なので私はこのレイアウトを使ってます。・・・というのは嘘で実際はこの2カラムでエントリーが左でメニューが右な形が単純に好きなだけです。上記のことは後から知りました。笑
実際どうなってるのかは誰にもわかりませんけどね!
賢威(ケンイ)っていうツール?を使うと3カラムや2カラム(左メニュー、右エントリー)なのにソース上は本文を先頭に持ってこれる、みたいな技術を内包してるらしいですね。実際効果あるのか知らないですけどSEOのためにそこまでするってすごいですね(´Д`)倹約家ならぬ、もはや吝嗇家の私からしたらそういうのに金を使うのは虫唾が走るほど気に食いません・・・。

あと私個人的に固定幅のサイトはあまり好きません。なぜ固定するのか意味がわからないです。せっかくのワイドディスプレイが全然活かされないじゃないか!と、そのようなサイトに遭遇する度に毎回思うのですが皆さんどうですか?天下のグーグルさんのホームページやドキュメントなんかも全部可変レイアウトですよ。
それともアレなんですかね。固定のほうがSEO的に良いんですかね。まぁ広告の設置場所とかの関係でしょうけど。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク