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

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

個別記事のシングルカラム化

2005年05月06日(金)

共有テンプレ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)で紹介されています。

#7
カテゴリ:未分類
タグ[ FC2ブログ カスタマイズ ]

同じカテゴリの記事

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/7-fa73285a

<<『NARUTO』第133話 | 「ここ」というアンカー>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。