• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

PATE NOTE

ゆるく生きる思考と技術

  • note profile
  • note magazine
  • Contact Us
  • privacy policy

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

2011-04-27 by PATE

以前「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やさんなんでしょうか?

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

Filed Under: WordPress, ブログ運営

最初のサイドバー

かれこれ10年以上ネットで稼ぎながらゆるく生きています。Twitterフォロワー1万人越えインフルエンサーの中の人。こうしてゆるーく生きていくための思考と技術をnoteに書いてます。1000円/月だけどランチ1回我慢する程度で社畜の人生とおさらばできると思えば安いもんです。こう見えて意外と人気なんですよ。

note はこちら

人気の投稿

  • 「.htaccess」でのファビコン設置方法【チカッパ!レンタルサーバー】
    「.htaccess」でのファビコン設置方法【チカッパ!レンタルサーバー】
  • Discordのチャンネル名が日本語対応
    Discordのチャンネル名が日本語対応
  • Apple WatchのDigital Crownは左側にしておくといいよ
    Apple WatchのDigital Crownは左側にしておくといいよ

Twitter

ツイート

Instagram

Instagram でフォロー

Footer

Category

Archive

© 2025 PATE NOTE