lightframeシリーズの2カラム化を紹介します。standardシリーズはプラグインの設定次第で簡単にカラム数を変えることができましたが、lightframeシリーズの2カラム化はHTMLとスタイルシートの編集作業が必要になります。
【左側をメニュー、右側を記事にする場合】HTMLを編集します。
<!--▼▼ プラグイン カテゴリー2 ▼▼-->
<!--plugin-->
~
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー2 ▲▲-->この記述を削除、または表示させたいところへ移動します。
例えばプラグイン1の下に表示させたければ<!--▲▲ プラグイン カテゴリー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は全体と同じ値に設定。
これで2カラムになります。右の幅が減った分、中央や左を増やすか全体を狭める等して調整してください。
全体-中央-左=記事とメニューの間隔となります。
【右側をメニュー、左側を記事にする場合】HTMLを編集します。
<!--▼▼ プラグイン カテゴリー1 ▼▼-->
<!--plugin-->
~
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー1 ▲▲-->この記述を削除、または表示させたいところへ移動します。
例えばプラグイン2の上に表示させたければ<!--▼▼ プラグイン カテゴリー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は中央と同じ値に設定。
これで2カラムになります。左の幅が減った分、中央や右を増やすか全体を狭める等して調整してください。
全体-中央-右=記事とメニューの間隔となります。
少し複雑ですが頑張ってお好みのサイズになるようにカスタマイズしてくださいね。
- 関連記事
これからも御指導宜しくお願い致しますm(__)m