14.ファンブログのカスタマイズ（小技編２）：ブリカマ日記

14.ファンブログのカスタマイズ（小技編２）

第１４回のファンブログカスタマイズ講座です～

今回はちょっと困った方がいらっしゃるので
その方の疑問を解消できればと記事にしました～(^^♪
まあほかにも他の方もこうすれば見やすいのに～
って思ったのもありますけどね～(^^ゞ

ってことで今回は表示幅の変更です～(^O^)／

これはいろいろな要素が絡んでくるのでちょっと
厄介な部分もありますが、理解すれば何とかなります(^_^;)

以下は私のスタイルシートの一部分を切り取ったものです。

まずはご覧ください(^_^)/

/* トップ部分 */
#topset {
margin: 0 auto 0 auto;
width: 940px;
height: 50px;
background-color: #ffffff;
border-bottom: solid 2px #79F;
background-image: url(https://fanblogs.jp/burikama/file/425/aGVhZGVya10.jpg);
background-repeat: no-repeat;
}

まずはこの部分です。
これは一番上の部分の幅を決めるスタイル設定です。
ここで見てもらいたいのは width: 940px; の部分です。
この部分でこのブリカマ日記の全体の幅が決まっています～(^^♪

これは確か私が独自で作った部分なので皆さんとは違うと思いますが、
この width: 940px; が一番大きなところがブログの幅を決めていると
思ってほぼ間違いないでしょう。
※たまに設定されていないものもあります。。。(^_^;)

/* レイアウトごとの設定 */

/* 3 column multi */
body#multi #main {
margin:0;
}
body#multi #container {
width: 858px;
margin: 0 auto;
background: #fff;
}
body#multi #wrapper {
float: left;
width: 688px;
margin: 0;
padding: 0;
}
body#multi #sidebarLeft {
float: left;
width: 200px;
margin: 0 5px;
line-height: 1.6;
display: inline; /* for IE6 */
}
body#multi #sidebarRight {
float: right;
width: 160px;
margin:0 5px;
line-height: 1.6;
display: inline; /* for IE6 */
}
body#multi #content {
float: right;
width: 478px;
margin: 0;
padding:0;
}

/* 2column 左サイドバー */
body#doubleL #main {
margin:0 5px;
}
body#doubleL #container {
width: 798px;
margin: 0 auto;
background: #fff;
}
body#doubleL #sidebar {
float: left;
width: 200px;
line-height: 1.6;
}
body#doubleL #content {
float: right;
width: 568px;
margin-left: 10px;
}

/* 2column 右サイドバー */
body#doubleR #main {
margin:0 5px;
}
body#doubleR #container {
width: 940px;
margin: 0 auto;
background: #fff;
}
body#doubleR #sidebar {
float: right;
width: 330px;
line-height: 1.6;
}
body#doubleR #content {
float: left;
width: 590px;
margin-right: 10px;
}

この部分はちょっと長くなります。
でも必要な部分はほとんどないのでご安心くださいね～(^^♪
私の場合は２カラムの右サイドバーなので、そこだけ見ればよいのです～(^O^)／

古いテンプレートでなければこのように書いてあるはず、、、
古ければそのカラム数にあったものだけになるのでよく見て判断してね～

で赤文字の部分を見てください。
まずは width: 940px;
これはもうわかりますかね～？

これはタイトル下にある部分の幅を指定しているものです。
上と同じくブログの幅を決めてます。
なのでなくてももしかしたら・・・(^_^;)

次に width: 330px; と width: 590px;

これはサイドバーの幅とブログ内容の幅ですね～(^^ゞ

おや？足しても940pxになりませんね～(-_-;)

さてなぜでしょう？
これはほかの部分で隙間を作ってあるからです。
ここでは細かい説明は省きますが、たとえば340ｐｘと600ｐｘにすると
ちゃんと表示してくれません。。。

という事でそれを加味した上で数値を変えてみてくださいね～(^O^)／

この３つ（３カラムは４つ）を適正にすればちゃんと表示されて
幅を変更できますよ～(^^♪

ただひとつ注意！！
画像を使っている場合はその画像が優先される場合があり、
狭くすると表示がおかしくなる場合があります。
また、逆に大きくしたときには画像が足りない状態・・・
なので大きさが決まったらその大きさにあった画像を用意
してくださいね～(^O^)／

最後に、、、今回は長くなったのでかなり説明を省いています。
チャレンジしたい方はどんどん質問してくださいね～(^^♪

できる範囲で答えます（笑）

【ファンブログカスタマイズの最新記事】