カラム表示の調整～表示領域を増やすには～

2009/11/11 2022/03/31

【パソコン】［カスタマイズ］ 0

3カラム

当ブログは3カラムの表示形態を採用しているが､
場合によってはメイン記事のスペースを広げたい場合がある｡

例えば､こんな時 …
・ Google カスタム検索を採用し､検索結果を自ブログ内に表示する場合
・サイトマップ(archives.html)を一面表示する場合

【対応策】
参考サイト：創るmetaboy サイトマップ頁

当ブログのエリア構成は下記の通り
・ 3カラムをヘッダーとフッターで挟んでいる形式
・ 3カラムはメイン(Content）と左バーのセット(Wrapper）に
　右バーがくっ付いている形式

Header部
Container部＝メイン部＋両サイドバー
　・ Content部＝メイン部
　・ Wrapper部＝メイン部＋左バー
　・ sidebar_right部＝右バー
Footer部

（１）表示領域の拡大をFC2で行う場合､エリア（モード）変数を利用する｡
　例えば検索結果表示する場合は  を使用するが
　その際に右バーを非表示にしWrapper部だけ表示する場合は
　右バー部を  で挟む｡

<div id="sidebar_right">
右カラムのコンテンツ</div>

（２）右バーが非表示になった分､メイン部を拡大表示するには
　Content部の表示を通常時と検索結果表示時の2パターンCSSを準備する｡
　（検索結果表示時用のCSSを新たに追加）

■ 通常時

<div id="wrapper">
左カラム＋メインカラムのコンテンツ</div>

■ 検索結果表示時

<div id="wrapper2">
左カラム＋メインカラムのコンテンツ</div>

※「wrapper2」のCSSを別途用意

【スポンサーリンク】

関連記事

コメント歓迎!! 0

まだ、コメントはございません。

comment form
コメントは承認制です。装飾バーは利用できません。