Templates for SLMaMe

今回は、サイドバーの位置を右側に変更してみます。
デフォルトでは、2カラムレイアウトの場合はサイドバーが左側に、3カラムレイアウトの場合は左側か両側に配置されています。

閲覧者の視線は表示域の左上からスタートすると言われています。情報が重要なサイトはコンテンツを左側に、メニューによる誘導が重要なサイトはサイドバーを左側に配置していることが多いですね。

ご注意ください

この方法は、デフォルトテンプレート「シンプルグレイ」（固定幅）をカスタマイズした場合を例に挙げています。

使用しているテンプレートが「幅100%」以外であれば、他のテンプレートでもこの方法で同じ効果を得ることが出来ると思いますが、当方では全てのテンプレートに対しての検証は行っておりませんので、保証は致しかねます。

CSS を修正する

テンプレート「スタイルシート」の以下の部分が、コンテンツとサイドバーのスタイルを指定しています。

#content　{

    width: 545px;

    float: right;

    background-color: #ffffff;

}



#links　{

    width: 185px;

    float: left;

    text-align: left;

    margin: 0px 0px 0px 0px;

    padding: 20px 0px 0px 10px;

    background-color: #ffffff;

    overflow: hidden;

}

表示位置を指定しているのは、「float: right;」「float: left;」の部分です。「float」は「浮遊物」を意味します。デフォルトではコンテンツ（#content）を右側（right）に、サイドバー（#links）を左側（left）に指定していますね。

以下のように修正します。

#content　{

    width: 545px;

    float: right;

    background-color: #ffffff;

}



#links　{

    width: 185px;

    float: left;

    text-align: left;

    margin: 0px 0px 0px 0px;

    padding: 20px 0px 0px 10px;

    background-color: #ffffff;

    overflow: hidden;

}

コンテンツの「float: right;」を「float: left;」に変更するだけです。



もしサイドバーがコンテンツの下に落ちてしまった場合は、コンテンツの横幅を指定している部分「width: 545px;」の数値を 10px ずつ減らしてみてください。または、サイドバーのマージン（margin）とパディング（padding）の数値を見直してください。

また、フッターが変な位置に上がってきてしまった場合は、「#footer」にある「clear: both;」が削除されていないか、記述ミスしていないか確認してください。

このように、用途に合わせてレイアウトを見直すと、よりユーザーに優しいブログになります。