ブログの幅、プラグインエリアの幅を変更したい |
||
スタイルシートの幅を設定している値の変更を行うだけで良いので、簡単です。
・記事エリアを狭くしてプラグインエリアを大きくしたりも簡単に出来るようになります。
スポンサードリンク
スタイルシート編集
スタイルシート中にある、以下のような記述を探してください。
/******************************************* ▼ サイトの幅 ▼ */
#outline_header {
min-width:1110px; /* 最低の幅(これ以上狭くなりません) */
width:100%; /* ヘッダ全体(リキッドレイアウトです) */
margin:0 auto;
}
#outline_footer {
min-width:1110px; /* 最低の幅(これ以上狭くなりません) */
width:100%; /* フッター全体(リキッドレイアウトです) */
margin:0 auto;
}
#outline_main {
width:1110px; /* 全体 */
margin:0 auto;
}
#main {
width:635px; /* メイン*/
float:left;
}
#first {
width:260px; /* プラグイン1の幅 */
float:right;
}
#second {
width:205px; /* プラグイン2の幅 */
float:right;
}
#main-first { /* 計算して設定してください ------ */
width:900px; /* (【全体】-【プラグイン1】-【メイン】-【プラグイン2】)/2 + プラグイン1 + メイン */
float:left;
}
/******************************************* ▲ サイトの幅 ▲ */
赤い部分の数値を変更すれば、幅を変更できます。
#outline_headerのmin-width、
#outline_footerのmin-width、
#outline_mainのwidth、
は同じ値が望ましいです。
ここの値は記事のエリアになります。デフォルトでは635pxにしています。width:635px; /* メイン*/
ここの値は真ん中のエリアであるプラグイン1の幅になります。デフォルトでは260pxにしています。width:260px; /* プラグイン1の幅 */
ここの値は右のエリアであるプラグイン2の幅になります。デフォルトでは205pxにしています。width:205px; /* プラグイン2の幅 */
ここで3つのエリアの幅の値に従って、値を決定してください。width:900px; /* (【全体】-【プラグイン1】-【メイン】-【プラグイン2】)/2 + プラグイン1 + メイン */
上記の例ですと、(【1110px】−【635px】−【260px】−【205px】)/2+【260px】+【635px】= 900px
となります。
もし、記事エリアとプラグインエリアとの間隔をゼロにしたいのであれば、
(【全体】-【プラグイン1】-【メイン】-【プラグイン2】)/2の値を0にして、残りのプラグイン1 + メインの幅をwidthに記入すればOKです。