てんぽ : 個別記事のシングルカラム化

共有テンプレbbsでやっているように、トップページでは2段組だけど個別記事表示のときは1段組にしたいという場合、 もちろんFC2独自ブロック変数の<!--permanent_area-->や<!--not_permanent_area-->を使います。

でも、たとえば個別記事表示のときにサイドメニューを消したいとして、単に<!--not_permanent_area-->でサイド部分を囲めばいいかというと、そうでもありません。

<div id="main">
　ここがメイン領域（本文）
</div>

<div id="sub">
　ここがサブ領域（サイドメニュー）
</div>

このようなソースで、<div id="main">と<div id="sub">にCSSで幅を指定してpositionやfloatで段組を作っているとします。 単に<div id="sub">〜</div>を<!--not_permanent_area-->で囲んだだけでは、個別記事表示のときに確かにサブ領域は消えますが、メイン領域の幅はサブ領域があるときと変わりません。CSSはそのままだからです。これではわざわざシングルカラムにする意味がない。ではどうするかというと。

<!--not_permanent_area-->
　<div id="main">
<!--/not_permanent_area-->
　　ここがメイン領域
<!--not_permanent_area-->
　</div>
<!--/not_permanent_area-->

<!--not_permanent_area-->
　<div id="sub">
　　ここがサブ領域
　</div>
<!--/not_permanent_area-->

このように、幅を規定しているdivタグを消してしまうんです。こうすれば個別記事表示のときにサブ領域が消えて、しかもメイン領域の幅を広げることができます。 もちろんこのdivがなくてもValidかつレイアウトが崩れないようにしなければなりませんが（あとdiv病にも注意）。

他にも、たとえばhead要素内のstyle要素でブロック変数とともにCSSを書くことで状況に応じたスタイル設定も可能なので、それを利用する手もあります。このテクニックについてはFCafe（空リンク非表示 2）で紹介されています。