B-Blog

メニュー（各カラム）幅が狭いので広くしたい

bbblogは下の画像のような構造になっています。
内包するボックスのサイズを変更したら、外側のボックスも変更しなければなりません。


センターは変えない場合、具体的には下の５箇所を変更します。
#menu + #contents = #unit
#menu2 + #unit= #header = #container
となるように値を変更してください。


上記はセンターカラムを変更しない方法を紹介していますが、推奨していないのは当初、エントリータイトルの表示される見出しの背景画像が幅480pxのデザインしか用意していなかったからです。
現在は幅750px位までは広げてもイケルと思いますので、上記を参考に変更してもらって良いと思います。

２カラム右メニューにカスタマイズする

最初に言っておきたいのが、bbblogはブログパーツやリンク広告などの納まりのよさを意識して３カラムでデザインされたということ。
それからテンプレートを使うのは初心者が多いということで、特にレイアウトは弄らずに気持ちよく使えるようにと幅も固定のスタイルに設定しています。

bbblogの場合、左右のメニューは160pxの広告やリンク広告が多いことからそれに準じ、センターカラムは468pxのGoogleAdsenceをはじめ、バナーの国際規格を考慮しており、それから全体幅（890px）が決められています。

そうして決められたレイアウトに合わせ各画像素材を用意しているのでカラム数変更によって表示がイマイチなるのは必死です。

実際に問題となりそうなのがヘッダー画像、これは全体幅を狭くすると「Welcom to･･･」が左から見切れる可能性があります。
同様にエントリータイトル用の背景画像も480pxしかありません。
ハッキリ言って２カラムに対応して無いに近い…orz

それらを踏まえたうえで…

管理画面の　「テンプレートの設定」　「HTML編集」　より、

<!--左メニュー(始)-->　～　<!--左メニュー（終）-->を削除

とりあえず、これだけで右メニュー２カラムになります。

しかし、これだとあまりにもお粗末です。

ただ、上記の問題もありますので全体幅とコンテンツカラム幅は変えたくありません。
ただ余った幅をメニューに充ててしまうとバランスが悪いので、文字入りのヘッダー画像を使うのをヤメます。
やり方は下で紹介している「ヘッダー画像を文字無しにする」にて。

そして管理画面の「テンプレートの設定」→「スタイルシート編集」より、下の画像の部分を書き換えます。


しかし、これだけではヘッダーのグローバルナビが右に飛び出しますのでやはり下のカスタマイズ法「ヘッダーのグローバルナビを設定する」を参考に715をメニュー数で割った値に修正してください。

各部マージン等細かい相違残りますが、bbblogらしさを残しつつ２カラムになると思います。

ヘッダーのグローバルナビを設定する

管理画面の　「テンプレートの設定」　「HTML編集」　より、下画像の黄色に反転している部分を書き換えてください。



メニュー数を変更した場合には管理画面の　「テンプレートの設定」　「スタイルシート編集」　より、下画像の黄色に反転している部分の数値を書き換えてください。

ヘッダー画像を文字無しにする

管理画面の　「テンプレートの設定」　「スタイルシート編集」　より、下画像の青く反転している部分の「dblog_head3」 を　「dblog_head4」 に書き換えてください。

ブログタイトルや説明文について

管理画面の　「テンプレートの設定」　「スタイルシート編集」　より、下画像の青く反転している部分を書き換えてください。



上の青い部分、「68px」 が画面上からの距離になりますので、値を小さくすると上に移動します。
下の青い部分は 「12px」 だけが青くなっていますが、ブログタイトルの文字サイズであり、続く 「color」 が文字の色です。