上記の広告は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;
}



スポンサーサイト

★ 対象テンプレート:Herba

HTMLとCSSの編集を行います。
[ HTML ]
    <!-- 【 ▼メインエリア ここから 】 -->
<div id="main"><div class="main-container">

↑この箇所を次で置き換えてください。

    <!-- 【 ▼メインエリア ここから 】 -->
<div id="main"><div class="main-container">
<!--plugin-->
<div id="plugin3">
<!--plugin_third-->
<div class="menuitem plugin-<%plugin_third_tag>"">
<h2><span><%plugin_third_title></span></h2>
<div class="menu-body">
<%plugin_third_description>
<%plugin_third_content>
<%plugin_third_description2>
</div>
</div>
<!--/plugin_third-->
</div>
<!--/plugin-->


また、
    <!-- 【 ▼サブエリア ここから 】 -->
より下にある、
        <div id="plugin3">
<!--plugin_third-->
<div class="menuitem plugin-<%plugin_third_tag>"">
<h2><span><%plugin_third_title></span></h2>
<div class="menu-body">
<%plugin_third_description>
<%plugin_third_content>
<%plugin_third_description2>
</div>
</div>
<!--/plugin_third-->
</div>
の部分を削除してください。HTMLの編集は以上です。

[CSS]
スタイルシートに、以下の記述を追加してください。
#plugin3 .menuitem{
margin-bottom : 1.5em;
}
#plugin3 .menu-body{
width : 95%;
margin-left : 5%;
/*
右側へのインデントを大きくしたい場合は、margin-leftの値を大きくし、
widthの値 + margin-leftの値が100%以下になるようにwidthの値を
調節してください。
*/


overflow : auto;
padding-bottom : 25px;

/* for IE */
*overflow-x : auto;
*overflow-y : hidden;
}
#plugin3 h2 {
margin : 0;
padding : 0.5em 1em 0.5em 0;
background-image : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_sub_menutitle.gif");
background-repeat : no-repeat;
background-position : right center;
font-size : 100%;
font-weight : bold;
}
#plugin3 h2 span{
background-color : #fff;
padding : 0 0.3em 0 0;
}
#plugin3 ul {
padding-left : 20px;
list-style-type : square;
}
#plugin3 dd {
padding-left : 20px;
}
#plugin3 input,
#plugin3 textarea {
margin : 2px 0px;
padding : 1px;
}
CSSの編集は以上です。

★ 対象テンプレート:Herba

スタイルシートの編集を行います。
/*────────────────────────────────────────
■ メインコンテンツを包括する要素の設定
エントリー部(メイン)を包括する要素の設定。
────────────────────────────────────────*/

#main {
float : left;
width : 64%;
overflow : hidden;
padding-top : 1em;
}

また、
/*────────────────────────────────────────
■ サブメニュー包括要素の設定
────────────────────────────────────────*/

div#sub{
width : 35%;
padding-top : 2.5em;
float : right;
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;
}

このそれぞれの「width」の値によってカラムの幅が定められています。
二つのwidthの値の合計が100%を超えないよう(99%あたりにしておくのが無難かと)にそれぞれの幅を調整してください。

★ 対象テンプレート:Herba

まず初めに、タイトルに使いたい画像をアップロードしておきます。
次に、スタイルシートの編集から、
.header-container {
background-image : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_title.jpg");
background-repeat : no-repeat;
background-position : left top;
width : 100%;
}
という箇所を探してください。
この中の、
    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/herba_title.jpg");
という部分で、タイトルエリアの画像が設定されています。
この、「url("」と「")」の中の部分を、アップロードした画像のURLで置き換えてください。
画像の配置に関しては、background-positionプロパティを編集してください。



Recent Entries

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