以前に共有テンプレートlightframeシリーズにおいて、記事と同じ幅であるプラグイン３の幅を広げるカスタマイズを紹介しました。
これはプラグイン３が、記事,プラグイン１,プラグイン２の上に、サイト全体と同じ幅で表示されるものでした。

今回は、プラグイン３を、プラグイン１と記事の上に表示するカスタマイズ


そしてプラグイン３を、記事とプラグイン２の上に表示するカスタマイズを紹介します。

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

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

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

<div id="center-left">

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

<div id="center">

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

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

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

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

と

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

を入れ替えてください。

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

#center {
float:left;
}

#left {
float:right;
}

#right {
float:left;
}

#center-left {
float:right;
}

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

関連記事

• トップページのみ３カラム、他を２カラムにする。(lightframe) (2011/12/24)
• 記事上部に異なる背景画像のフリーエリアを表示 (2009/12/15)
• 記事タイトルの色を変える (lightframe) (2009/11/26)
• プラグイン３のレイアウト (lightframe) (2009/10/09)
• ページナビゲーション（ページ送り）の前後を入れ替える (2009/09/09)
• 記事とコメント欄の間にフリースペースを設置 (2009/09/06)
• 記事タイトルやプラグインタイトルを画像にする (lightframe) (2009/08/24)