上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

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


ここでは、このカラムの配置を次のように変更します。
plugin1|main|plugin2,3


まず、
/*────────────────────────────────────────
■ 各カラムの幅・配置設定
────────────────────────────────────────*/

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



関連記事


コメント

    コメントの投稿

    (コメントの編集・削除時に必要)
    (管理者にだけ表示を許可する)

    質問の際のお願い

    テンプレートに関する質問は、それぞれのテンプレート専用の記事にて受け付けています。トップページの「Templates Information」から、各テンプレート用の記事へリンクが張ってあります。

    質問の際には、情報の共有のため非公開コメントはご遠慮くださいませ。
    また、使用しているバージョンによって編集内容が異なる事があるため、多くの場合ソースコードの確認が必要になります。出来る限りブログのURLを入力してください。ブログのURLを公開したくない場合は、質問内容を公開コメントで投稿した後、非公開コメントにてブログのアドレスを追加投稿してくださいませ。

    質問以外のコメントは、ご自由にコメントしていただいて結構です。たくさんのコメントお待ちしております。


    トラックバック

    Trackback URL
    Trackbacks


    Recent Entries

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。