WordPressの Twenty Ten テーマ の サイドバーの幅を広げる方法

投稿日: 2011年1月9日 作成者: alphasis

WordPress（ワードプレス）の Twenty Ten テーマ の style.css をカスタマイズして、サイドバーの幅を変更する方法についての解説記事。
全体の幅（940px）を変更しないで、コンテンツとサイドバーの幅の割り当てを変更する。

style.css を開く

wp-content/themes/twentyten フォルダーにある style.css をテキストエディタで開く。
管理パネルで編集する場合は、

  1. 外観をクリック。
  2. テーマ編集をクリック。
  3. 右下にあるスタイルシートをクリック。

サイドバーの幅に関連する場所

サイドバーの幅に関連する指定をしているのは、下記の場所。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*
LAYOUT: Two columns
DESCRIPTION: Two-column fixed layout with one sidebar right of content
*/

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}
#content {
    margin: 0 280px 0 20px;
}
#primary,
#secondary {
    float: right;
    overflow: hidden;
    width: 220px;
}
#secondary {
    clear: right;
}
#footer {
    clear: both;
    width: 100%;
}

と

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Main sidebars */
#main .widget-area ul {
    margin-left: 0;
    padding: 0 20px 0 0;
}
#main .widget-area ul ul {
    border: none;
    margin-left: 1.3em;
    padding: 0;
}
#primary {
}
#secondary {
}

と

1
2
3
4
5
6
7
8
9
/* =Images
-------------------------------------------------------------- */

#content img {
    margin: 0;
    height: auto;
    max-width: 640px;
    width: auto;
}

変更箇所

サイドバーの幅に関連する変更箇所は、最大で５ヶ所。それぞれの数値は関連しているので注意が必要だ。
wordpress-twenty_ten-sidebar-width.png

Ａ

1
2
3
4
5
6
#primary,
#secondary {
    float: right;
    overflow: hidden;
    width: 220px;
}

の「220px」。この数値をＡとする。
240px 迄なら、Ａの数値を変更するだけでも大丈夫。

Ｂ

1
2
3
4
5
#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

の「-240px」。この数値をＢとする。
Ａの数値を 241px以上に設定する場合、Ｂの数値も変更する必要がある。
数値の頭にマイナスがついていることに注意。

Ｃ

1
2
3
#content {
    margin: 0 280px 0 20px;
}

の「280px」。この数値をＣとする。
Ａの数値を 281px以上に設定する場合、Ｃの数値も増やす必要がある。

Ｄ

1
2
3
4
#main .widget-area ul {
    margin-left: 0;
    padding: 0 20px 0 0;
}

の「20px」。この数値をＤとする。
ウィジェットの表示領域の幅は、Ａ－Ｄとなる。

Ｅ

1
2
3
4
5
6
#content img {
    margin: 0;
    height: auto;
    max-width: 640px;
    width: auto;
}

の「640px」。この数値をＥとする。
Ａの数値を 281px以上に設定する場合、Ｅの数値を減らす必要がある。

具体例

サイドバーの幅を 250px に広げる場合

サイドバーの幅を 250px に広げる場合は、
Ａ：250px
Ｂ：250px
Ｃ：変更なし
Ｄ：0px
Ｅ：変更なし
よって、下記のように変更する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*
LAYOUT: Two columns
DESCRIPTION: Two-column fixed layout with one sidebar right of content
*/

#container {
    float: left;
    margin: 0 -250px 0 0;
    width: 100%;
}
#content {
    margin: 0 280px 0 20px;
}
#primary,
#secondary {
    float: right;
    overflow: hidden;
    width: 250px;
}
#secondary {
    clear: right;
}
#footer {
    clear: both;
    width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Main sidebars */
#main .widget-area ul {
    margin-left: 0;
    padding: 0 0 0 0;
}
#main .widget-area ul ul {
    border: none;
    margin-left: 1.3em;
    padding: 0;
}
#primary {
}
#secondary {
}

サイドバーの幅を 300px に広げる場合

サイドバーの幅を 300px に広げる場合は、
Ａ：300px
Ｂ：300px
Ｃ：320px =300+20(コンテンツとサイドバーの間の余白分)
Ｄ：0px
Ｅ：600px = 940-320-20
よって、下記のように変更する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*
LAYOUT: Two columns
DESCRIPTION: Two-column fixed layout with one sidebar right of content
*/

#container {
    float: left;
    margin: 0 -300px 0 0;
    width: 100%;
}
#content {
    margin: 0 320px 0 20px;
}
#primary,
#secondary {
    float: right;
    overflow: hidden;
    width: 300px;
}
#secondary {
    clear: right;
}
#footer {
    clear: both;
    width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Main sidebars */
#main .widget-area ul {
    margin-left: 0;
    padding: 0 0 0 0;
}
#main .widget-area ul ul {
    border: none;
    margin-left: 1.3em;
    padding: 0;
}
#primary {
}
#secondary {
}
1
2
3
4
5
6
#content img {
    margin: 0;
    height: auto;
    max-width: 600px;
    width: auto;
}

サイドバーの幅を 336px に広げる場合

サイドバーの幅を 336px に広げる場合は、
Ａ：336px
Ｂ：336px
Ｃ：356px =336+20(コンテンツとサイドバーの間の余白分)
Ｄ：0px
Ｅ：564px = 940-356-20
よって、下記のように変更する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*
LAYOUT: Two columns
DESCRIPTION: Two-column fixed layout with one sidebar right of content
*/

#container {
    float: left;
    margin: 0 -336px 0 0;
    width: 100%;
}
#content {
    margin: 0 356px 0 20px;
}
#primary,
#secondary {
    float: right;
    overflow: hidden;
    width: 336px;
}
#secondary {
    clear: right;
}
#footer {
    clear: both;
    width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Main sidebars */
#main .widget-area ul {
    margin-left: 0;
    padding: 0 0 0 0;
}
#main .widget-area ul ul {
    border: none;
    margin-left: 1.3em;
    padding: 0;
}
#primary {
}
#secondary {
}
1
2
3
4
5
6
#content img {
    margin: 0;
    height: auto;
    max-width: 564px;
    width: auto;
}

スポンサード リンク

カテゴリー: WordPress, テーマ パーマリンク