【CSS】サイドバーの左右を変更する方法

サイドバーの左右を変更する方法についての覚書です。

サンプルとして、テーマ「Twenty Ten」を取り上げます。

まず、Firefoxのアドオン「Firebug」を使って、Webブラウザ上でCSSの仮編集を行います。

WS000691

Firebugでhtmlの構成を見てみると、「header」と「footer」の間に「main」というidがあって、その中に「container」と「primary」というidがあることから、投稿記事の部分が「container」、サイドバーの部分が「primary」ではないか、と推測がつきます。

float01

CSSの方を見てみると、「container」には「float:left」、「primary」には「float:right」という命令がかかっていることがわかり、これが左右を決しているのかな、という推測ができます。

float02
float03

試しに「left」と「right」を入れ替えてみると、

float04
float05

案の定、左右が入れ替わり、サイドバーが左側に移動しました。

float06

次に寸法を微調整します。

float07

いい感じになりました。

float08

修正した内容を「外観」→「CSS編集」の編集欄に貼り付け、

float09

「スタイルシートを保存」をクリック。

float10

以上の操作で、サイドバーが左側に移りました。この表示はWebブラウザ「Safari」でのものですが、

float11

「Firefox」や

float12

「Google Chrome」や

float13

「インターネットエクスプローラ」でもちゃんとCSSの編集内容が反映されているか確認します。

float14

なお、テーマ「Twenty Ten」においては、これだけではCSSの編集は不完全で、もう少し微修正が必要です。

投稿者: comemo

WordPress.com での記事の作成方法など

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。