ブログパーツなどがサイドバーの幅よりも大きく
はみ出してしまう場合に
サイドバーの幅を広げて納めるcssの改造方法です。



日8テンプレを利用してまず一番最初に困る事が
マニュアルに従って「まぐまぐフォーム」を挿入したら
サイドバーからはみ出したという事です。


そして、このテンプレートに関して
最も多い質問がこれです。


サイドバーの幅を広げ、「まぐまぐフォーム」が
キッチリと入るカスタマイズを行いましょう。


今回の改造はcssを3ヶ所改造するだけの
非常に簡単な物です。


ぜひマスターしておきましょう。


管理画面 → デザインの設定 → カスタマイズ
→ スタイルシート(CSS)
からcssの変更を行います。


まず、以下の部分を見つけて下さい↓



/* サイドメニュー左 */

#links{
position:absolute;
left:5px;
top:130px;
width:160px;
padding:0;
}


/* サイドメニュー右 */

#links2{
position: absolute;
width:160px;
top:130px;
right: 5px;
margin: 0;
padding:0;
}



↑これが左右の各サイドバーの幅を指定している部分です。


まず左右共に、「width:160px;」の部分の
160を190に変更します。


これでサイドバーが少し広がり「まぐまぐフォーム」
の縦型がきっちりと収まる幅になります。



しかし、実はこのままではサイドバーの幅が広がった分、
中央の記事表示部分にカブってしまう事になります。


次は、サイドバーが広がった分、中央の記事表示部分の
幅を狭める改造を行います


cssで、先ほど改造した部分の少し上あたりに
以下の部分がありますので見つけて下さい。



/* メインコンテンツ部分 */

#content{
position:relative;
margin-top: 0px;
margin-right:165px;
margin-bottom: 0px;
margin-left: 165px;
line-height: 140%;
padding: 0px 8px 30px 8px;
}



↑これがサイドバーに挟まれた中央部分のデザインを
指定している部分です。


この中の以下の部分の数字を変更します。

margin-right:165px;
margin-left: 165px;


これが中央コンテンツ部分の幅を指定している数値です。


先程サイドバーの幅を左右30pxずつ広げましたので
それに合わせて、左右各30ずつ数字を増やしましょう。


margin-right:165px;
margin-left: 165px;


↑両方とも165を195に変更して下さい。


あとは、保存→デザイン(css)の再構築で
カスタマイズの完了です。


これでサイドバーに「まぐまぐフォーム」がきれいに
収まり、なおかつ中央メインコンテンツ部分の幅も
調整できました。


※上記の改造をしたのが現在のこのブログの表示です。




各数値を変える事で、例えば左右のサイドバーの
幅を変える事もできます。


色々試して好きなデザインを作ってみましょう。



※改造前には必ず元のcssやhtmlをコピーして
保存しておきましょう。


また、デザインの確認用に専用のブログを作り、
表示を確かめてからメインブログに反映させれば
もし失敗してもブログの運営に支障が出ません。


できればこの方法を取りましょう。


メインブログに影響が出ると気分が凹みます。笑





また、サイドバーの幅は変更せず、
まぐまぐのフォーム自体の幅を変更したい場合には
以下の記事を参考にして下さい↓
まぐまぐのフォームの幅を狭めてサイドバーに納めるカスタマイズ

RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
コメント一覧

1. Posted by mirai   2008年07月23日 08:21

tomさま

おじゃましてます。
tom風にブログアレンジ中です。

また来ます。

2. Posted by そのじ   2009年07月12日 00:25

tomさま

日給8万円のテンプレートを使っています。
“お気に入りに追加”ボタンがはみ出してしまって困っていました。

とても参考になりました。

ありがとうございました! また来ますね〜!

コメントを投稿する

名前:
URL:
  情報を記憶: 評価:  顔   星
 
 
 

リンク集
365日の花言葉と誕生花メルマガアフィリエイトで稼ぐ無料セミナー無料レポート図書館携帯メルマガ