CSSはどこに書く?

JimdoでCSSを書こうとすると、主に次の2箇所に書くことになります。

  1. レイアウト画面のCSS(「レイアウト」→「独自レイアウト」→「CSS」)
  2. ヘッダー部(「設定」→「ヘッダー部を編集」)

どちらに書いてもちゃんと反映されますが、この2つはどのように使い分けるのがよいのでしょうか?

 

レイアウト画面のCSSに書く内容

レイアウト画面のCSSには、レイアウトに関するものだけを書くようにします。

  • 全体的な配置(ヘッダー,ナビゲーション,サイドバー,コンテント,フッターの位置とサイズ)
  • 背景画像
  • ヘッダーのスタイル
  • ナビゲーションのスタイル
  • フッターのスタイル

 

ヘッダー部に書く内容

ヘッダー部には、レイアウトが変わっても変わらないもの、つまり見出しや表などコンテンツの内容のスタイルを書くようにします。

  • コンテントに配置する内容のスタイル(特に見出し,表)
  • サイドバーに配置する内容のスタイル(特に見出し,表)

 

こうすることで、独自レイアウトから既製のレイアウトに変更したときでも、見出しや表などのスタイルは維持できるというわけです。

また、ヘッダー部に書いたCSSの方がレイアウト画面のCSSよりも優先順位が高いので、特別な使い方として、前回の記事「ヘッダー部のCSSで既製レイアウトのスタイルを上書きする」の様な使い方があります。

 

ヘッダー部にCSSを書くときは、styleタグで囲みます。

<style type="text/css">
/*<![CDATA[*/
<!--
    // ここに書きます
-->
/*]]>*/
</style>

配色については、レイアウト画面に書くかヘッダー部に書くか判断に迷うところです。レイアウトによって白っぽかったり黒っぽかったりするので、配色もおのずと引きずられてしまうのですが、Jimdoでは「スタイル」で配色を決めることになっており、レイアウトとは分離されています。そのコンセプトに従うなら、配色はヘッダー部に書いて、レイアウトとは分離しておいた方が良さそうです。