コンテンツとサイドバーの配置を自由に変更する

横書きの場合、視線が左から右へ、上から下へ進んでいくので、ページの左上が自然と視線が集まりやすくなります。

そのため、一番見てほしいものを左上に配置するのが効果的になります。

コンテンツをメインに見て欲しいから、コンテンツを左側に。
回遊率を高めたいから、サイドバーを左側に。

そのブログの目的によって、コンテンツやサイドバーの位置は変わってくるかと思います。

そこでFirstUpでは、コンテンツとサイドバーの配置を変更できるようにしてみました。

カスタマイズ方法

デフォルトでは、左側にコンテンツ、右側にサイドバーが配置されております。これを逆にするためのカスタマイズです。

firstup-customizeのフォルダ内にある、style.cssを開きます。

382行目から下にあるレイアウト変更 – コンテンツとサイドバーの位置を変更するの部分で変更可能です。386行目の/*と398行目の*/でCSSを適用させないためにコメントアウトしてあります。

これを削除すれば、そのスタイルが適用されます。

適用するコードは以下のものです。

CSS

  1. #main{
  2. float: right;
  3. }
  4. #sidebar{
  5. float: left;
  6. }
  7. #side{
  8. margin: 0 40px 0 0;
  9. }

もしデフォルトの配置に戻したい場合には、386行目に/*、398行目に*/を記述するか、上記CSSを削除すれば元に戻ります。

コンテンツとサイドバーの配置を自由に変更する by

コメントを残す