カラム位置を変更する@Herba-3c

★ 対象テンプレート：Herba-3c

Herba-3cは標準では次のようなカラム配置になっています。



ここでは、このカラムの配置を次のように変更します。



まず、

/*────────────────────────────────────────
 ■ 各カラムの幅・配置設定
────────────────────────────────────────*/
#three-column-container {
    width           : 77%;
    float           : left;
}
#main {
    width           : 69%;
    float           : left;
}
#plugin1 {
    width           : 30%;
    float           : right;
} 
#plugin23 {
    width           : 22%;
    float           : right;
}

を、次のように置き換えます。

/*────────────────────────────────────────
 ■ 各カラムの幅・配置設定
────────────────────────────────────────*/
#three-column-container {
    width           : 77%;
    float           : left;
}
#main {
    width           : 69%;
    float           : right;
}
#plugin1 {
    width           : 30%;
    float           : left;
} 
#plugin23 {
    width           : 22%;
    float           : right;
}

次に、細かい表示の調整として、

/*────────────────────────────────────────
 ■ サブメニュー包括要素の設定
────────────────────────────────────────*/
.submenu {
    padding-top     : 2.5em;
    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_sub_border.png");
    background-repeat   : repeat-y;
    background-position : left top;
    /* for IE5 */
    text-align      : center;
}
.submenu .plugin1-container, 
.submenu .plugin23-container  {
    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_sub_border_end.png");
    background-repeat   : no-repeat;
    background-position : left bottom;
    padding-bottom      : 60px;
    /* for IE5 */
    text-align      : left;
}
/*────────────────────────────────────────
 ■ 各メニューを包括する要素の設定
────────────────────────────────────────*/
.submenu .menuitem {
    margin-bottom   : 1em;
    padding         : 0 0 0 12px;
}

この部分を次のように置き換えます。

/*────────────────────────────────────────
 ■ サブメニュー包括要素の設定
────────────────────────────────────────*/
#plugin1.submenu {
    padding-top     : 2.5em;
    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_sub_border.png");
    background-repeat   : repeat-y;
    background-position : right top;
    /* for IE5 */
    text-align      : center;
}
#plugin23.submenu {
    padding-top     : 2.5em;
    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_sub_border.png");
    background-repeat   : repeat-y;
    background-position : left top;
    /* for IE5 */
    text-align      : center;
}
.submenu .plugin1-container {
    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_sub_border_end.png");
    background-repeat   : no-repeat;
    background-position : right bottom;
    padding-bottom      : 60px;
    /* for IE5 */
    text-align      : left;
}
.submenu .plugin23-container {
    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_sub_border_end.png");
    background-repeat   : no-repeat;
    background-position : left bottom;
    padding-bottom      : 60px;
    /* for IE5 */
    text-align      : left;
}
/*────────────────────────────────────────
 ■ 各メニューを包括する要素の設定
────────────────────────────────────────*/
#plugin1.submenu .menuitem {
    margin-bottom   : 1em;
    padding         : 0 12px 0 0;
}
#plugin23.submenu .menuitem {
    margin-bottom   : 1em;
    padding         : 0 0 0 12px;
}

表示幅を固定する@Daylight

★ 対象テンプレート：Daylight

スタイルシートを編集します。

#wrapper {
    border-left     : 1px solid #999;
    border-right    : 1px solid #999;    
    border-bottom   : none;
    padding         : 0 1px;
    margin          : 0 auto;
    min-width       : 600px;
    max-width       : 900px;
    background-color    : #fff;
    position        : relative;
    
    /*　for IE5　*/
    text-align      : left;
}

このなかの、

    min-width       : 600px;
    max-width       : 900px;

の部分を、次のように書き換えてください。

    width           : 800px;

ここでは例として幅を800ピクセルで固定しています。幅のサイズはご自由に変更してください。

次に、

* html #wrapper {
    width : expression(
                (document.documentElement.clientWidth > 800)? "800px" :
                (document.documentElement.clientWidth < 600)? "600px" :
                "auto"
            );
    /* for IE */
    *height         : 1%;
}

という記述が続けて書いてあるので、この部分を削除してください。