Twenty Tenのサイドバーの幅を変更する方法

以前「WordPressのテーマ変えました」という記事でArrasテーマに変えたと紹介して、しばらくはこれにしようみたいな感じで書いたんですけど、結局またテーマをTwenty Tenに戻しました。

まず大きな変更点として、サイドバーの幅を変更したので、その方法を紹介します。

サイドバーの幅を変更

まぁ、自分で考えながらあれこれいじってみたんですけど、どの数字をどうやっていじったらいいのか全くわからず・・・・。お手上げの状態でしたw

もうこれは、Google先生に聞くしかないなぁと・・・で、ググったらもの凄くわかりやすいページを見つけました!

アルファシスさんのブログの中の「WordPressの Twenty Ten テーマ の サイドバーの幅を広げる方法」という記事で、とてもわかりやすい図と、変更後の何パターンかの例を出して解説しています。

全くわからなかった私でも、一回でできました^^

私が変更した後のCSSはこれです。

[css]
#primary,
#secondary {
float: right;
overflow: hidden;
width: 300px;
}

#container {
float: left;
margin: 0 -320px 0 0;
width: 100%;
}

#content {
margin: 0 360px 0 0px;
}

#main .widget-area ul {
margin-left: 0;
padding: 0 0px 0 0;
}

#content img {
margin: 0;
height: auto;
max-width: 580px;
width: auto;
}
[/css]

これをTwenty Tenの子テーマのstyle.cssに貼りつけただけで、変更点は以下の3点です。

  • サイドバーを300pxに広げた。
  • それにあわせてコンテンツ部分の幅の縮小。
  • 両端の20pxぶんの余白をなくして幅いっぱいに。

この3点を変更したことによって、サイドバーが広く使えるようになりました。

まとめ

この変更方法を公開してくれていたアルファシスさんはWebやさんなんでしょうか?

ど素人の私でも簡単に変更できるぐらいの、超わかりやすい記事に感謝します。