デフォルトテーマ:レイアウト調整①左配置

レイアウト調整:カラムの左配置

デフォルトのテーマTwenty Tenを自己流にデザインしていく過程を記事にしています。

ヴィジェットを左側に配置する

デフォルトのテーマでは、ヴィジェットのサイドバーは、右側に配置されています。このサイドバーを左側というレイアウトにしていきます。
をみてみると、内容や記事は「#container」「#content 」、ヴィジェットのサイドバーは「#primary」、のdivでくくられています。

ヴィジェットエリア2は「#secondary 」です。
⇒そこで、cssの登場です。

スタイルシートの中の#container&#contentをみると
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
#content {
margin: 0 280px 0 20px;
}

・・・・です。
この、float とmarginを変更します。
この状態で左側への表示は可能とはなりますが、
そして、ヴィジェット1のサイドバー部分にあたる「#primary 」にかかる以下の記述を
#primary,
#secondary {
float: left;
overflow: hidden;
width: 220px;
}

・・・・・以下のように変更(floatをrightへ・・・そのままでも表示はされていましたが・・・)

#primary,
#secondary {
float: right;
overflow: hidden;
width: 220px;
}
とすると、以下のようにサイドバーを左側に配置する左右の入れ替えが完了しました。

master の紹介

サイト作成で、ワードプレスというものを知り、phpやcssの初心者なりに自己流にカスタマイズしていこうと思っています。 ワードプレスの機能やプラグインを使えば結構楽しくサイトが作れます。
カテゴリー: デフォルトテーマをカスタマイズ   タグ: ,   この投稿のパーマリンク

コメントは受け付けていません。