カラム位置を変更する@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;
}