小粋空間  -  a cheap joke and a play on words site

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

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

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

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

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

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

１．固定レイアウト

１．１ 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 にすれば（多分）大丈夫だと思います。

１．２ 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 を設定します。

２．リキッドレイアウト

２．１ 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カラム(リキッドレイアウト：左サイドバー) */
.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カラムレイアウト（右サイドバー）

スタイルシート後方に出現する、リスト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;
}

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

３．中央カラム幅も変更する（固定レイアウトの場合のみ）

３．１ 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;
}

３．２ 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;
}

３．３ 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;
}

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

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

/* サイドメニュータイトル */
.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%;
}

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

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

.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;
}