ブログパーツなどがサイドバーの幅よりも大きく
はみ出してしまう場合に
サイドバーの幅を広げて納める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をコピーして
保存しておきましょう。
また、デザインの確認用に専用のブログを作り、
表示を確かめてからメインブログに反映させれば
もし失敗してもブログの運営に支障が出ません。
できればこの方法を取りましょう。
メインブログに影響が出ると気分が凹みます。笑
また、サイドバーの幅は変更せず、
まぐまぐのフォーム自体の幅を変更したい場合には
以下の記事を参考にして下さい↓
まぐまぐのフォームの幅を狭めてサイドバーに納めるカスタマイズ
- 2007年10月22日
- ブログカスタマイズ:日給8万円テンプレート関係
- コメント(2)
- トラックバック(2)
1. Posted by mirai 2008年07月23日 08:21
tomさま
おじゃましてます。
tom風にブログアレンジ中です。
また来ます。
2. Posted by そのじ 2009年07月12日 00:25
tomさま
日給8万円のテンプレートを使っています。
“お気に入りに追加”ボタンがはみ出してしまって困っていました。
とても参考になりました。
ありがとうございました! また来ますね〜!