FC2ブログのテンプレート工房

HTMLを編集します。
初期状態のlightframeは次のような構成になっています。

〜

<div id="center-left">

<div id="center">
〜
</div><!--/center-->

<div id="left">
〜
</div><!--/left-->

<br class="c-both">

</div><!--/left_center-->

<div id="right">
〜
</div><!--/right-->

〜

これを次のように並べ替えます。〜の部分も含めて並べ替えてください。

〜

<div id="right">
〜
</div><!--/right-->

<div id="center-left">

<div id="left">
〜
</div><!--/left-->

<div id="center">
〜
</div><!--/center-->

<br class="c-both">

</div><!--/left_center-->

〜

左メニュー、右記事の２カラムにしたい場合は
<div id="right">
〜
</div><!--/right-->
を、
右メニュー、左記事の２カラムにしたい場合は
<div id="left">
〜
</div><!--/left-->
をそれぞれ削除してください。
次にスタイルシートを編集します。

/******** ▼ サイトの幅 ▼ */
#outline {
width:1000px;
margin:0 10px;
}
#center {
width:526px; /* 削除 */
float:right; /* 削除 */
margin-left:230px; /* leftの幅+間隔 */
}
#left {
width:217px;
float:left;
}
#right {
width:217px;
float:right;
}
#center-left {
width:763px; /* 削除 */
float:left; /* 削除 */
margin-right:230px; /* rightの幅+間隔 */
}
/******** ▲ サイトの幅 ▲ */

灰色の部分を削除、茶色部分を追加してください。ただし
左メニュー、右記事の２カラムにしたい場合は
margin-right:230px; /* rightの幅+間隔 */を、
右メニュー、左記事の２カラムにしたい場合は
margin-left:230px; /* leftの幅+間隔 */
をそれぞれ削除してください。

これで左右のメニューカラムは固定、記事部分の中央カラムはブラウザに合わせた可変幅になります。
少々難しいカスタマイズなので「複製」でコピーをバックアップしてからカスタマイズしてください。

HTMLを編集します。
プラグイン３の上に設置したい場合は
<!--▼▼ プラグイン カテゴリー３ ▼▼-->の上に、
プラグイン３の下に設置したい場合は
<!--▲▲ プラグイン カテゴリー３ ▲▲-->の下に次の記述を加えてください。

<!--▼最新記事ナビゲーション▼-->
<!--not_permanent_area-->
<!--not_category_area-->
<!--not_date_area-->
<!--not_search_area-->
<!--not_titlelist_area-->
<div class="various_outline">
<!--index_area-->
<div class="various_title">最新の記事</div>
<!--/index_area-->
<!--not_index_area-->
<div class="various_title">アーカイブ</div>
<!--/not_index_area-->
<div class="various_body">
<div class="various_text">
<ul>
<!--topentry-->
<li><a href="#entry<%topentry_no>" title="記事の先頭へ">
<%topentry_title>&nbsp;[<%topentry_year>/<%topentry_month>/<%topentry_day>]
</a></li>
<!--/topentry-->
</ul>
</div><!--/various_text-->
<div class="various_navi">
<!--prevpage-->
<a href="<%prevpage_url>">≪前ページ</a>
<!--/prevpage-->
<!--nextpage-->
<a href="<%nextpage_url>">次ページ≫</a>
<!--/nextpage-->
</div><!--/various_navi-->
</div><!--/various_body-->
</div><!--/various_outline-->
<!--/not_titlelist_area-->
<!--/not_search_area-->
<!--/not_date_area-->
<!--/not_category_area-->
<!--/not_permanent_area-->
<!--▲最新記事ナビゲーション▲-->

これで最新の記事の便利ナビが設置できます。

HTMLを編集します。

<!--▲▲ ヘッダー ▲▲-->

<div id="center-left">

<div id="center">
〜
</div><!--/center-->

<div id="left">
〜
</div><!--/left-->

<br class="c-both">

</div><!--/left_center-->

<div id="right">
〜
</div><!--/right-->

<br class="c-both">

<!--▼▼ フッター ▼▼-->

これを下記のように配置を変えます。

<!--▲▲ ヘッダー ▲▲-->

<div id="right">
〜
</div><!--/right-->

<div id="center-left">

<div id="left">
〜
</div><!--/left-->

<div id="center">
〜
</div><!--/center-->

<br class="c-both">

</div><!--/left_center-->

<br class="c-both">

<!--▼▼ フッター ▼▼-->

これで
右カラム(プラグイン２)→左カラム(プラグイン１)→中央カラム(記事)
という順序で表示されるようになります。
表示される位置は以前と変わりません。

ただ、検索エンジンはHTMLの上部に書かれているキーワードほど重要視します。
SEOまで考えた場合、このカスタマイズはお薦めではありません。

HTMLを編集します。

〜
<!--▲▲ プラグイン カテゴリー2 ▲▲-->

</div><!--/right-->

<br class="c-both">

<!--▼▼ ページ下部フリーエリア ▼▼-->
<div class="plugin3_outline">
<div class="plugin3_title">ここにタイトルを記述</div>
<div class="plugin3_body">

ここに好きなタグや文言を挿入

</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->
<!--▲▲ ページ下部フリーエリア ▲▲-->

<!--▼▼ フッター ▼▼-->
〜

これでプラグイン３と同じデザインの枠でフリースペースを設置できます。お好きなようにご活用ください。


【追記 2008/06/15】
上記カスタマイズはフリースペースが全体のサイズ幅で設置されます。
プラグイン３の幅（記事の幅）と同じ幅で設置したい場合は次の箇所に挿入してください。

〜
<!--▲ページナビゲーション(全体ページ)▲-->
<!--/not_permanent_area-->

<!--▼▼ ページ下部フリーエリア ▼▼-->
<div class="plugin3_outline">
<div class="plugin3_title">ここにタイトルを記述</div>
<div class="plugin3_body">

ここに好きなタグや文言を挿入

</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->
<!--▲▲ ページ下部フリーエリア ▲▲-->

<!--▲▲ メイン表示 ▲▲-->

</div><!--/center-->
〜

HTMLを編集します。

<div id="outline">

<!--▼▼ ヘッダー ▼▼-->
〜
<!--▲▲ ヘッダー ▲▲-->

<div id="center-left">

<div id="center">

このヘッダー部分を下記箇所に移動します。

<div id="outline">

<div id="center-left">

<div id="center">

<!--▼▼ ヘッダー ▼▼-->
〜
<!--▲▲ ヘッダー ▲▲-->

これで左右のカラムが一番上まで伸び、ヘッダーが中央カラム内に表示されます。
幅が広めに設定してあるlightframeには有効なカスタマイズかも知れません。

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

/*********************************** ▼ ヘッダー ▼ */
〜

#header_body {
〜
background-image: url(http://〜); /* 画像URL */
height: 300px; /* 画像の高さ */
background-repeat: no-repeat; /* 画像の並べ方 */
background-position: center; /* 表示位置 */
}
/*********************************** ▲ ヘッダー ▲ */

上記箇所に各記述を加えてください。

http://〜 に画像のURLを設定してください。
height に画像の高さを設定してください。

background-repeat は画像の並べ方を設定します。
no-repeat ひとつだけ表示
repeat-x 横に並べて繰り返し表示
repeat-y 縦に並べて繰り返し表示
repeat 縦にも横にも敷き詰めて繰り返し表示

background-position は表示位置を設定します。
center 中央寄せ
left 左寄せ
right 右寄せ

又は%で詳細な位置を設定することも可能です。
例　background-position: 5% 50%;

1番目の数値　左右に対応　少ないほど左　多いほど右
2番目の数値　上下に対応　少ないほど上　多いほど下

ヘッダーの背景画像はブログの顔と言っても過言ではないほど個性がでます。
ぜひ素晴らしい画像を用意してこのカスタマイズに挑戦してくださいね。

まずプラグインタイトルの背景を画像にする方法を紹介します。
プラグインタイトルの背景に使う画像を用意してください。
初期値のままだとサイズは高さ22px,幅217px程です。

画像をアップロードしたらスタイルシートを編集します。

.plugin1_title {
〜
background-image: url(http://〜画像URL〜);
}

.plugin2_title {
〜
background-image: url(http://〜画像URL〜);
}

これでプラグインタイトル背景が画像になります。


次にプラグイン本文の背景を画像にする方法を紹介します。
本文の場合は高さが可変なので、背景画像を繰り返し表示させずに右下に表示する方法を紹介します。

画像をアップロードしたらスタイルシートを編集します。

.plugin1_body {
〜
background-image: url(http://〜画像URL〜);
background-repeat: no-repeat;
background-position: right bottom;
}

.plugin2_body {
〜
background-image: url(http://〜画像URL〜);
background-repeat: no-repeat;
background-position: right bottom;
}

これでプラグイン本文の右下に画像が表示されます。

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

/*************************** ▼ 上部メニュー(プラグイン３) ▼ */
.plugin3_outline {
border-top: #e0e0e0 2px solid; /* 個別枠(上) */
border-right: #e0e0e0 2px solid; /* 個別枠(右) */
border-bottom:#e0e0e0 2px solid; /* 個別枠(下) */
border-left: #e0e0e0 2px solid; /* 個別枠(左) */
margin-bottom:20px;
}
.plugin3_title {
font-size:10pt; /* 文字サイズ(タイトル) */
font-weight:bold; /* 太字 (タイトル) */
color:#555555; /* 文字色 (タイトル) */
background-color:#f0f0f0; /* 背景色 (タイトル) */
border: #666666 1px solid; /* 枠 (タイトル) */
padding:5px 20px;
}
.plugin3_body {
font-size:10pt; /* 文字サイズ(本体) */
color:#000000; /* 文字色 (本体) */
background-color:#ffffff; /* 背景色 (本体) */
border-top: #e0e0e0 1px solid; /* 枠(上) (本体) */
border-left: #666666 1px solid; /* 枠(左) (本体) */
border-right: #666666 1px solid; /* 枠(右) (本体) */
border-bottom:#666666 1px solid; /* 枠(下) (本体) */
padding:5px 20px;
line-height: 1.3; /* 行間 (本体) */
}
/*************************** ▲ 上部メニュー(プラグイン３) ▲ */

上記各項目の値を変えるとプラグイン３のみデザインを変えることが出来ます。line-heightは行間を変えたいときに加えてください。

HTMLを編集します。

<!--▼コメント編集▼-->
〜
<label for="comment">COMMENT:</label><br />

<script type="text/javascript" src="http://blog44.fc2.com/load.js"></script>

<textarea id="comment" cols="55" rows="8" name="edit[body]"><%edit_body></textarea><br />
〜
<!--▲コメント編集▲-->

<script type="text/javascript" src="http://blog44.fc2.com/load.js"></script>を上記箇所に挿入するとコメント編集時にも絵文字を挿入する機能をつけることが出来ます。

この機能は本来標準装備させるべきものを私が付け忘れてしまったものです。申し訳ありません。

【左側をメニュー、右側を記事にする場合】

HTMLを編集します。

<!--▼▼ プラグイン カテゴリー2 ▼▼-->
<!--plugin-->
〜
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー2 ▲▲-->

この記述を削除、または表示させたいところへ移動します。
例えばプラグイン1の下に表示させたければ<!--▲▲ プラグイン カテゴリー１ ▲▲-->のすぐ下に移動させます。

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

/******************************************* ▼ サイトの幅 ▼ */
#outline {
width:1000px; /* 全体 */
margin:0 auto;
}
#center {
width:743px; /* 中央 */
float:right;
}
#left {
width:217px; /* 左 */
float:left;
}
#right {
width:0px; /* 右 */
float:right;
}
#center-left {
width:1000px; /* 全体と同じ値を設定 */
float:left;
}
/******************************************* ▲ サイトの幅 ▲ */

1.右は0に設定。
2.center_leftは全体と同じ値に設定。

これで２カラムになります。右の幅が減った分、中央や左を増やすか全体を狭める等して調整してください。
全体-中央-左=記事とメニューの間隔となります。


【右側をメニュー、左側を記事にする場合】

HTMLを編集します。

<!--▼▼ プラグイン カテゴリー1 ▼▼-->
<!--plugin-->
〜
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー1 ▲▲-->

この記述を削除、または表示させたいところへ移動します。
例えばプラグイン2の上に表示させたければ<!--▼▼ プラグイン カテゴリー２ ▼▼-->のすぐ上に移動させます。

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

/******************************************* ▼ サイトの幅 ▼ */
#outline {
width:1000px; /* 全体 */
margin:0 auto;
}
#center {
width:763px; /* 中央 */
float:right;
}
#left {
width:0px; /* 左 */
float:left;
}
#right {
width:217px; /* 右 */
float:right;
}
#center-left {
width:763px; /* 中央と同じ値を設定 */
float:left;
}
/******************************************* ▲ サイトの幅 ▲ */

1.左は0に設定。
2.center_leftは中央と同じ値に設定。

これで２カラムになります。左の幅が減った分、中央や右を増やすか全体を狭める等して調整してください。
全体-中央-右=記事とメニューの間隔となります。

少し複雑ですが頑張ってお好みのサイズになるようにカスタマイズしてくださいね。