【左カラムを消して２カラムにする】

HTMLを編集します。下記箇所に赤い部分の記述を加えてください。

～

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

<div id="center-left">

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

<!--not_index_area-->
<div id="center" style="width:100%">
<!--/not_index_area-->

<!--▼▼ プラグイン カテゴリー３ ▼▼-->


～


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

<!--index_area-->
<div id="left">

<!--▼▼ プラグイン カテゴリー１ ▼▼-->

～

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

</div><!--/left-->
<!--/index_area-->

<br class="c-both" />

～

これでトップ以外の個別記事ページ等では左カラム(プラグイン１)が消えます。
消したカラムの幅のぶんだけ記事の幅が広がります。

HTMLを編集します。
以下のように色が付いた部分を加えてください。
青い部分はフリーエリアの数に応じて数字を変えてください。

～
<div id="center">

<!--▼ フリーエリア ▼-->

<!--▽ フリーエリア１ ▽-->
<div class="plugin3_outline">
<div class="plugin3_title" style="text-align: center;">フリーエリアタイトル１</div>
<div class="plugin3_body fa1">
<div style="text-align:left;">
ここにカテゴリー1のフリーエリアの内容を表示
</div>
</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->
<!--△ フリーエリア１ △-->

<!--▽ フリーエリア２ ▽-->
<div class="plugin3_outline">
<div class="plugin3_title" style="text-align: center;">フリーエリアタイトル２</div>
<div class="plugin3_body fa2">
<div style="text-align:left;">
ここにカテゴリー２のフリーエリアの内容を表示
</div>
</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->
<!--△ フリーエリア２ △-->

<!--▲ フリーエリア ▲-->

<!--▼▼ プラグイン カテゴリー３ ▼▼-->
～

そしてスタイルシートの末尾に以下を加えてください。

/* フリーエリア１の背景画像設定 */
.fa1 {
background: url("画像URL");
}

/* フリーエリア２の背景画像設定 */
.fa2 {
background: url("画像URL");
background-repeat: no-repeat; /* 繰り返し表示しない場合に設定 */
background-position: right bottom; /* 画像位置設定 */
}

上記要領でフリーエリアはいくつでも増やせます。
各フリーエリアはお好きな様に背景画像を設定してください。

プラグイン３を、プラグイン１と記事の上に表示する

HTMLの<!--▼▼ プラグイン カテゴリー３ ▼▼-->から<!--▲▲ プラグイン カテゴリー３ ▲▲-->までを、下記の位置に移動させてください。

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

<div id="center-left">

<!--▼▼ プラグイン カテゴリー３ ▼▼-->
～
<!--▲▲ プラグイン カテゴリー３ ▲▲-->

<div id="center">

これだけでプラグイン３を、プラグイン１と記事の上に表示することが出来るので簡単なのですが、この逆の形にするには更に編集が必要です。

プラグイン３を、記事とプラグイン２の上に表示する

上記のHTML編集を行った後、更に

<!--▼▼ プラグイン カテゴリー１ ▼▼-->
～
<!--▲▲ プラグイン カテゴリー１ ▲▲-->

と

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

を入れ替えてください。

そしてスタイルシートの末尾に以下を加えてください。

#center {
float:left;
}

#left {
float:right;
}

#right {
float:left;
}

#center-left {
float:right;
}

このカスタマイズは少しでもミスをすると崩れてしまうので、必ずテンプレートのバックアップをとってからカスタマイズを行ってください。

HTMLを編集します。青い箇所を削除し、赤い箇所を加えてください。

～
<!--▲ エントリー（記事）▲-->

<!--▼コメント表示▼-->
<!--comment_area-->

<!--permanent_area-->
<!--▼ページナビゲーション(個別記事)▼-->
<p class="page_navi">
<!--preventry--><a href="<%preventry_url>" title="前ページ <%preventry_title> へ戻る">≪ <%preventry_title></a> <!--/preventry-->
<!--nextentry--><a href="<%nextentry_url>" title="前ページ <%nextentry_title> へ戻る">≪ <%nextentry_title></a><!--/nextentry-->  
| <a href="<%url>" title="<%blog_name>">HOME</a> |
<!--nextentry--><a href="<%nextentry_url>" title="次ページ <%nextentry_title> へ進む"><%nextentry_title> ≫</a><!--/nextentry-->
<!--preventry--><a href="<%preventry_url>" title="次ページ <%preventry_title> へ進む"><%preventry_title> ≫</a> <!--/preventry-->
</p><!--page_navi-->
<!--▲ページナビゲーション(個別記事)▲-->
<!--/permanent_area-->

<a name="comment_list" id="comment_list"></a>
～

(中略)

～
<!--▲サイトマップ▲-->

<!--permanent_area-->
<!--▼ページナビゲーション(個別記事)▼-->
<p class="page_navi">
<!--preventry--><a href="<%preventry_url>" title="前ページ <%preventry_title> へ戻る">≪ <%preventry_title></a> <!--/preventry-->
<!--nextentry--><a href="<%nextentry_url>" title="前ページ <%nextentry_title> へ戻る">≪ <%nextentry_title></a><!--/nextentry-->  
| <a href="<%url>" title="<%blog_name>">HOME</a> |
<!--nextentry--><a href="<%nextentry_url>" title="次ページ <%nextentry_title> へ進む"><%nextentry_title> ≫</a><!--/nextentry-->
<!--preventry--><a href="<%preventry_url>" title="次ページ <%preventry_title> へ進む"><%preventry_title> ≫</a> <!--/preventry-->
</p><!--page_navi-->
<!--▲ページナビゲーション(個別記事)▲-->
<!--/permanent_area-->

<!--not_permanent_area-->
<!--▼ページナビゲーション(全体ページ)▼-->
<p class="page_navi">
<!--prevpage--><a href="<%prevpage_url>" title="前ページへ戻る">≪ 前ページ</a> <!--/prevpage-->
<!--nextpage--><a href="<%nextpage_url>" title="前ページへ戻る">≪ 前ページ</a><!--/nextpage-->  
| <a href="<%url>" title="<%blog_name>">HOME</a> |
<!--nextpage--><a href="<%nextpage_url>" title="次ページへ進む">次ページ ≫</a><!--/nextpage-->
<!--prevpage--><a href="<%prevpage_url>" title="次ページへ進む">次ページ ≫</a> <!--/prevpage-->
</p><!--page_navi-->
<!--▲ページナビゲーション(全体ページ)▲-->
<!--/not_permanent_area-->

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

これでページナビゲーション（ページ送り）の前後を入れ替え
(古い記事へ) ≪ 前ページ | HOME | 次ページ ≫ (新しい記事へ)
とすることが出来ます。

連載小説等で時系列順にページ送りしたい方には有効なカスタマイズかもしれません。

HTMLの以下の箇所に、赤い部分を加えてください。

～
<!--/topentry-->
<!--▲ エントリー（記事）▲-->

<!--permanent_area-->
<div class="comment_outline">
<div class="comment_title">フリーエリアのタイトル</div>
<div class="comment_body">
<div class="comment_text">
フリーエリアの内容
</div></div></div>
<!--/permanent_area-->

<!--▼コメント表示▼-->
<!--comment_area-->

<!--permanent_area-->
<!--▼ページナビゲーション(個別記事)▼-->
<p class="page_navi">
<!--preventry--><a href="<%preventry_url>" title="前ページ <%preventry_title> へ戻る">≪ <%preventry_title></a> <!--/preventry-->
| <a href="<%url>" title="<%blog_name>">HOME</a> |
<!--nextentry--><a href="<%nextentry_url>" title="次ページ <%nextentry_title> へ進む"><%nextentry_title> ≫</a><!--/nextentry-->
</p><!--page_navi-->
<!--▲ページナビゲーション(個別記事)▲-->
<!--/permanent_area-->

<div class="comment_outline">
<div class="comment_title">フリーエリアのタイトル</div>
<div class="comment_body">
<div class="comment_text">
フリーエリアの内容
</div></div></div>

<a name="comment_list" id="comment_list"></a>
<!--comment-->
～

フリーエリアのタイトルと内容はお好きなように変更してください。
これで記事とコメント欄の間にフリースペースを表示することができます。

lightframeシリーズのバージョンがver.04以前の方は、コメントを受け付けない設定にすると、ページナビゲーションがダブる問題を先に修正してください。

HTMLを編集します。
青い箇所を削除し、赤い箇所を加えてください。
さらに紫の
<!--▼▼ プラグイン カテゴリー３ ▼▼--> から
<!--▲▲ プラグイン カテゴリー３ ▲▲--> まで
を、新たな箇所へ移動させてください。

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

<div id="center-left">

<div id="center">

<!--▼▼ プラグイン カテゴリー３ ▼▼-->
～
<!--▲▲ プラグイン カテゴリー３ ▲▲-->

～

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

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

<div id="center-left">

<!--▼▼ プラグイン カテゴリー３ ▼▼-->
～
<!--▲▲ プラグイン カテゴリー３ ▲▲-->

<div id="left">

<!--▼▼ プラグイン カテゴリー１ ▼▼-->

～

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

</div><!--/left-->

<br class="c-both" />

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

<div id="right">

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

～

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

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

<br class="c-both" />

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

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

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

/* ▼ サイトの幅 ▼ */
#outline {
width:1000px; /* 全体 */
margin:0 auto;
}
#center {
width:526px; /* 中央 記事カラムの幅 */
float:right;
float:left;
}
#left {
width:217px; /* 左 プラグイン１の幅 */
float:left;
}
#right {
width:217px; /* 右 プラグイン２の幅 */
float:right;
}
#center-left { /* 計算して設定してください ------ */
width:763px; /* (全体-左-中央-右)/2 + 左 + 中央 */
width:444px; /* プラグイン１＋余白＋プラグイン２ */
float:left;
float:right;
}
/* ▲ サイトの幅 ▲ */

既に記事を左カラム、プラグインを中央と右カラムに表示するを施している方は、オレンジの箇所が right になっているので left に直してください。

これで記事を左、その右にプラグイン１と２を表示し、さらにそのプラグイン１と２の上にプラグイン３を表示することができます。

このレイアウトならばプラグインカテゴリ３を常に表示させるようにしたほうが良さそうですね。

このカスタマイズは少しでもミスをすると表示が崩れてしまいます。必ずテンプレートのバックアップをとってから挑戦してください。


【関連記事】
記事を左カラム、プラグインを中央と右カラムに表示する
プラグインカテゴリ３を常に表示させる