公開テンプレートのサイドバーのカラム幅を変更する

公開テンプレートのサイドバーのカラム幅を変更する

Posted at December 20,2006 1:36 AM
Tag:[CSS, Customize, Template]

公開テンプレートのサイドバーのカラム幅の変更方法についてご質問を頂いておりますので、本エントリーで変更方法をご紹介致します。

CSSは公開しているテンプレートで(多分)共通ですので、テンプレート配布のブログ(Movable Type / Serene Bach / FC2 ブログ / Seesaa ブログ / livedoor ブログ等)をお使いでしたらどれでも適用可能と思われます。

修正するのはスタイルシートのみです。スタイルシートを修正する箇所には似たようなセレクタが並んでおりますので、修正する際には、下記の該当する修正リストのセレクタ名の部分をマウスコピーして、編集画面(またはエディタ)上で検索すると良いでしょう。

なお、固定レイアウトの場合は下記のツールを是非ご利用ください。

テンプレートカスタマイズ支援ツール Column Resizer

Column Resizer ロゴ

1.固定レイアウト

1.1 3カラムレイアウト

スタイルシート後方に出現する、リスト1.1 の赤色部分(2ヶ所)を変更します。

リスト1.1 固定レイアウト・3カラムの変更箇所

.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
    :
  (中略)
    :
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
    float: left;
    width: 185px;
}

上の 850px は3カラム全体(左・中央・右)の幅、そして下の 185px が左右サイドバーの幅です。ということで、まず 185px をお好みの幅に変更してください。ここでは 15px 加えて 200px にひろげる例で進めます。

そして、この値を元に上の 850px の部分を修正します。算出式は

元の値 + サイドバー幅の増分×2

になります。今回の例では、

850px + (200px - 185px) ×2 = 880px

となるので、880px を設定します。
サイドバーの幅をデフォルト値より少なくした場合は、逆に 850px から減算します。

ちなみにサイドバーの全体幅は 185px ですが、余白を左右 15px とっているので、実際に表示される幅はデフォルトで 155px です。Google Adsense のキーワード広告等、160px で設定されている部品をおさめるには、5px 加えて 190px にすれば(多分)大丈夫だと思います。

1.2 2カラムレイアウト(左サイドバー/右サイドバー)

左サイドバーの場合、スタイルシート後方に出現する、リスト1.2 の赤色で示したサイドバーの幅を、お好みの値に変更します。

リスト1.2 固定レイアウト・2カラム(左サイドバー)の変更箇所

.layout-two-column-left #links-left-box {
    float: left;
    width: 185px;
}

右サイドバーの場合、左サイドバー同様、リスト1.3 の赤色で示したサイドバーの幅を、お好みの値に変更します。

リスト1.3 固定レイアウト・2カラム(右サイドバー)の変更箇所

.layout-two-column-right #links-right-box {
    float: left;
    width: 185px;
}

そして、左サイドバー・右サイドバー、いずれの場合もリスト1.4 の赤色部分を併せて変更してください。

リスト1.4 固定レイアウト・2カラム(左サイドバー・右サイドバー共通)の変更箇所

/* 2カラム用 */
.layout-two-column-left #box,
.layout-two-column-right #box {
    width: 665px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

665px は 2カラム全体の幅を示しており、変更したサイドバー幅の値を元に、665px の部分を修正します。算出式は

元の値 + サイドバー幅の増分

となります。
例えば、サイドバー幅 185px を 200px にひろげた場合は、

665px + (200px - 185px) = 680px

となるので、680px を設定します。

2.リキッドレイアウト

2.1 3カラムレイアウト

スタイルシート後方に出現する、リスト2.1 の赤色部分(3ヶ所)を変更します。

リスト2.1 リキッドレイアウト・3カラムの変更箇所

/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}

ちょっとややこしいですが、155px はサイドバーに実際に表示される部分の幅、最初の185px がサイドバー全体の幅が設定されています。

まず、サイドバーの表示部分 155px の値を変更した後、

元の値 + サイドバー幅の増分

を加算してください。例えばサイドバーの表示部分の幅を 155px から 160px に変更した場合、185px の部分は、

185px + (160px - 155px) = 190px

となり、190px を設定します。

2.2 2カラムレイアウト(左サイドバー)

スタイルシート後方に出現する、リスト2.2 の赤色部分(2ヶ所)を変更します。

リスト2.2 リキッドレイアウト・2カラム(左サイドバー)の変更箇所

/* 2カラム(リキッドレイアウト:左サイドバー) */
.layout-two-column-liquid-left #content {
    margin: 0 0 10px 185px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}
.layout-two-column-liquid-left #links-left {
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}

値の変更方法は2.1項を参考にしてください。

2.3 2カラムレイアウト(右サイドバー)

スタイルシート後方に出現する、リスト2.3 の赤色部分(2ヶ所)を変更します。

リスト2.3 リキッドレイアウト・2カラム(右サイドバー)の変更箇所

/* 2カラム(リキッドレイアウト:右サイドバー) */
.layout-two-column-liquid-right #content {
    margin: 0 185px 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-two-column-liquid-right #links-right {
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}

値の変更方法は2.1項を参考にしてください。

3.中央カラム幅も変更する(固定レイアウトの場合のみ)

3.1 3カラムの場合

中央カラムの幅を変更する場合は下記の赤色部分を修正します。増加分はリスト1.1 の 850px の部分に、さらに追加します。

リスト3.1 固定レイアウト・3カラムの変更箇所

.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

3.2 2カラム(左サイドバー)の場合

下記の赤色部分を修正します。増加分はリスト1.4 の 665px の部分に、さらに追加します。

リスト3.2 固定レイアウト・2カラム(左サイドバー)の変更箇所

/* 2カラム(左サイドバー) */
.layout-two-column-left #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}

3.3 2カラム(右サイドバー)の場合

下記の赤色部分を修正します。増加分はリスト1.4 の 665px の部分に、さらに追加します。

リスト3.2 固定レイアウト・2カラム(右サイドバー)の変更箇所

/* 2カラム(右サイドバー) */
.layout-two-column-right #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}

中央カラム幅のみ変更する場合は「中央カラムにバナー広告を表示する」を参照願います。

関連記事
トラックバックURL


コメント

yujiroさん、こんばんは^^
おかげさまで、サイドバーのカラム幅を変えることができました?っ♪♪
いつも、わかりやすく説明してくださって、感謝感謝です?!

[1] Posted by chi : February 26, 2007 2:15 AM

>chiさん
こんばんは。
ご利用&ご連絡ありがとうございました。
うまくできたようで良かったです。
ではでは!

[2] Posted by yujiro : February 26, 2007 11:27 PM

Yurijoさん、

MT3.2用固定3カラムのテンプレートを使用しているのですが、テンプレートカスタマイズ支援ツールを使って全体的な幅を下記のサイズくらいまで広げたいのですが、これをこのまま入力してもデザインが崩れてしまいます。
他にブログに影を付ける仕様ししているので、これとの調整が上手く行かないことも原因だと思われます。色々とサイズを変えてみたのですが、全体的な幅は増えても右端の線が表示されなかったり、影が表示されなかったりします。現在のデザインを生かしたまま(影も付ける)下記サイズに変更したい場合、どういう数字を入れれば良いのでしょうか?

/* 3 columns */
.layout-three-column #box {
width: 1024px;
}
.layout-three-column #content {
width:542px;
}
.layout-three-column #links-left-box {
width:240px;
}
.layout-three-column #links-right-box {
width:240px;
}

[3] Posted by kunio : May 30, 2007 10:16 AM

>kunioさん
こんにちは。
ご質問の件ですが、全体の幅をあと 20px ひろげて

.layout-three-column #box {
width: 1044px;
}

にしてみてください。
理由は #inner のパディングが左右に 10px ずつあるためです。

ブログの影用の画像は上記のサイズにあわせて幅をひろげたものを利用してください。
ご不明な点がありましたら再度ご連絡ください。
それではよろしくお願い致します。

[4] Posted by yujiro : May 30, 2007 2:49 PM

Yujiroさん、

アドバイス有り難うございます。
下記入力してみたのですが、幅は広がるのです左右の枠線が伸びません。
どこが間違っていますでしょうか?

/* 3 columns */
.layout-three-column #box {
width: 1044px;
}
.layout-three-column #inner {
_height:100%;
padding: 0 10px 0px 10px;
background: url("back_fixed.gif") repeat-y top center;
}
.layout-three-column #content {
float: left;
width: 542px;
margin: 0 0 20px 0;
border-bottom: 1px solid #666699;
border-left: 1px solid #666699;
border-right: 1px solid #666699;
}
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
float: left;
width: 240px;
}
.layout-three-column #links-left,
.layout-three-column #links-right {
padding: 15px 15px 0 15px;
color: #818181;
}

.layout-three-column #footer {
padding: 10px;
border-top: 1px solid #666699;
border-bottom: 1px solid #666699;
color: #ffffff;
background: #8fabbe;
font-size: 12px;
text-align: center;
}

[5] Posted by kunio : May 30, 2007 3:19 PM

Yujiroさん、

自己レスです。影画像準備忘れました。
再度挑戦してみます。

また連絡致します。

[6] Posted by kunio : May 30, 2007 3:23 PM

Yujiroさん、

背景影画像を訂正したら直りました。
有り難うございました。

もう1つ質問なのですが、サイドバーの文字が大きすぎるので小さく調整したいのですが、どこで設定すれば良いのでしょうか?

[7] Posted by kunio : May 30, 2007 4:07 PM

Yujiroさん、

何度もすみません。

上記サイドバーの文字を大きくするため色々といじっていたところ、下記エラーが出るようになってしまいました。探してみたのでが、どこがおかしいのか分からなくなってしまいました。修正方法が分かればお教え下さい。

日付アーカイブ「Monthly20070601000000」の再構築に失敗しました: テンプレート「エントリー・アーカイブ」の再構築に失敗しました: タグでエラーが発生しました: MTEntryTitleタグが、エントリーのコンテキスト外で使われた可能性があります。コンテナの外に誤って記述していませんか?

[8] Posted by kunio : June 3, 2007 6:32 AM

Yujiroさん、

自己レスです。
上記再構築エラーは自己解決しました。ご迷惑をお掛けしました。
ただ、下記質問だけお教え頂けますでしょうか?

>もう1つ質問なのですが、サイドバーの文字が大きすぎるので小さく調整したいのですが、どこで設定すれば良いのでしょうか?

[9] Posted by kunio : June 4, 2007 11:26 AM

>kunioさん
こんにちは。
ご質問の件ですが、
サイドバーのタイトルは

/* サイドメニュータイトル */
.sidetitle {
    margin-top: 3px;
    padding: 2px 0 1px;
    _padding: 1px 0 2px;
    border: 1px solid  #666666;
    text-align: center;
    color: #416DAA;
    background: #f6f6f6;
    font-size: 11px;
    line-height: 140%;
}

リスト部分は

/* サイドメニュー */
.side {
    margin: 3px 0 20px;
    background: none;
    color: #444444
    font-size: 10px;
    _font-size: 9px;
    line-height: 150%;
}

の赤色部分を修正願います。
それではよろしくお願い致します。

[10] Posted by yujiro : June 4, 2007 2:12 PM

Yujiroさん、お返事ありがとうございます。

場所は分かるのですが、この数値を変えても表示に変化がありません。
何か他の制御している箇所があるのでしょうか?
また、IE6,7,Firefox,Safariとそれぞれフォントの大きさが違って表示されるのですが、これはブラウザの特性ということで仕方ないことなのでしょうか?

[11] Posted by kunio : June 4, 2007 2:30 PM

>kunioさん
それでは下記を追加願います。

.side li {
    font-size: 13px;
}

また、class="tree" を使っているリストについては下記の赤色部分を修正してください。

ul.tree {
    margin: 0 0 0 5px!important;
    padding: 0px!important;
    font-size: 9px;
    list-style: none!important;
}

ブラウザによって表示を同じにする場合は「CSSハック」を利用する手があります。
それではよろしくお願い致します。

[12] Posted by yujiro : June 4, 2007 5:10 PM

Yujiroさん、

アドバイスありがとうございました。
無事フォントサイズの変更ができるようになりました。

CSSハックも試してみたいと思います。
何度も有難うございました。

[13] Posted by kunio : June 5, 2007 2:39 PM

>kunioさん
こんにちは。
ご連絡ありがとうございます。
無事に直ったようで良かったです。
ではでは!

[14] Posted by yujiro : June 7, 2007 11:21 AM

初めまして。

初歩的な質問で申し訳ないのですが、
3カラムのサイドバーの幅を広げたいのですが、上手くいきません。
20pxほど幅を広げたいのですが、右側だけ広がります。

ご回答よろしくお願いいたします。

[15] Posted by 神代 : March 2, 2011 11:59 AM

自己解決しました。

お騒がせして、すみませんでした。

[16] Posted by 神代 : March 2, 2011 1:10 PM

>神代さん
こんばんは。
テンプレートご利用ありがとうございます。
ご質問の件、自己解決されたようでなによりです。
ではでは!

[17] Posted by yujiro logo : March 2, 2011 6:20 PM

再度質問失礼します。

WordPressでこちらのテンプレートを使用しようとしているのですが、
カラム幅が上手く変更できません。
Column Resizerを使って該当箇所を変更したのにも関わらず、上手く表示されません。
たぶん、他の箇所も変更する必要がありそうなのですが、どこをどう変更すれば良いか分かりません。

とりあえず、以下のように変更したいです。

/* 3 columns */
.layout-three-column #box {
width: 942px;
}
.layout-three-column #content {
width:500px;
}
.layout-three-column #links-left-box {
width:220px;
}
.layout-three-column #links-right-box {
width:220px;
}
.layout-three-column #footer {
width: 942px;
}

ご回答よろしくお願いいたします。

[18] Posted by 神代 : September 17, 2011 8:10 PM

>神代さん
こんばんは。
ご質問の件ですが、この記事自体の更新ができていないため、現在配布しているテンプレートとの乖離が発生していると思います。申し訳ありません。
別途コメントで回答致しますので少々お待ち頂けますでしょうか。
それではよろしくお願い致します。

[19] Posted by yujiro logo : September 18, 2011 2:32 AM

>神代さん
こんばんは。
以下のCSSをスタイルシートの最後に追加願えますでしょうか。

.layout-three-column #box {
    width: 942px;
}
html > body.layout-three-column #content {
    margin-left: 220px;
    width: 500px;
}
.layout-three-column #links-left-box {
    width: 220px;
}
html > body.layout-three-column #links-left-box {
    margin-left: -722px;
}
.layout-three-column #links-right-box {
    width: 220px;
}
.layout-three-column #footer {
    width: 942px;
}

それではよろしくお願い致します。

[20] Posted by yujiro logo : September 18, 2011 9:40 PM

>yujiroさん
無事できました。
また何かあれば質問させてください。
ありがとうございました!

[21] Posted by 神代 : September 20, 2011 10:57 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)