Scribbling for "Scripting"

ここのところFC2ブログをベースにサイトを作成しているのですが、カテゴリごとに表示内容を分けたいことがよくあります。
FC2ではテンプレート上でテンプレート変数というタグのようなものを利用して、かなり自由なカスタマイズができるのですが、カテゴリ毎に表示を変更したい場合、直接指定できるテンプレート変数は無いようです。
幸いカテゴリ番号が得られるテンプレート変数がありましたので、スタイルシートを使って表示と非表示を切り替えることにしました。
以下の例はテンプレート上で、日付の表示部分をカテゴリ毎に表示するかしないかを切り換える例です。

・HTML
<div class="dispcno<%cno>">
<div class="date"><%topentry_year>年<%topentry_month>月<%topentry_day>日（<%topentry_youbi>）</div>
</div>

・CSS
.dispcno {display: block;}
.dispcno0 {display: block;}
.dispcno1 {display: block;}
.dispcno2 {display: none;}
.dispcno3 {display: none;}
.dispcno4 {display: none;}


単純にカテゴリ番号をつけたクラスを指定して、表示非表示を切り替えているだけです。ただし、この方法ではモバイル環境など、CSSへの対応が不十分な環境では非表示の部分が表示されてしまうので、大がかりな表示内容の変更は避けたほうがよさそうです。

ここのブログのテーマを作っているときに、IEでのみテキストの選択がうまくいかないという現象に遭遇しました。
原因を調べてみたところ、どうやらスタイルシートのPosition:absoluteで位置指定した要素ではIEのテキスト選択がうまくいかないらしい。これまでも見る側としてはこのような現象は知っていたのですが、作る側としては3段組のサイトを作成した今回が初めて出会った現象でした。
これを解決するもっとも簡単な方法としては、テキスト選択される可能性の高いメインコンテンツ部分はmarginで位置指定をし、テキスト選択する可能性が低いと思われるサイドバー部分をPosition:absoluteで位置指定します。
例えばここのブログではこんな感じです（必要部分のみ抽出）

CSS:
#content {
  width:900px;
  margin:auto;
  position:relative;
}
#header {
  height:99px;
}
#main{
  width:540px;
  margin-left:170px;
  margin-top:100px;
}
#sidebar {
  width:170px;
  position:absolute;
  left:0px;
  top:100px;
}
#sidebar2 {
  width:170px;
  position:absolute;
  left:730px;
  top:100px;
}
HTML:
<div id="content">
  <div id="header">
    ヘッダ
  </div>
  <div id="main">
    メイン
  </div>
  <div id="sidebar">
    右サイドバー
  </div>
  <div id="sidebar2">
    左サイドバー
  </div>
</div>

tableタグでレイアウトしていた頃に比べると、CSSでのレイアウトは非常に理に適ってはいるのですが、このようなブラウザ間の差異には結構泣かされます。