B-Blog

センターカラム上部の画像いらないんだけど？

「テンプレートの設定」-「プラグインの設定」より「HTMLの編集」欄の下記部分を削除してください。

<!--★使う前にここから下の☆～☆の行までを削除してください★-->
<!--index_area-->
	<div class="free">
	<div class="freearea">
	<div class="freecontent" style="padding:20px 0 5px 0;">
<script  type="text/javascript">
<!--
ranimg = new Array();
ranimg[0]="http://blog-imgs-31.fc2.com/c/a/s/caseofb/eeesky.jpg";
ranimg[1]="http://blog-imgs-31.fc2.com/c/a/s/caseofb/eeetown.jpg";
ranimg[2]="http://blog-imgs-31.fc2.com/c/a/s/caseofb/eeesky.gif";
xx = Math.floor(ranimg.length*Math.random());
ranimg = ranimg[Math.floor(xx)];
document.write('<img src="'+ ranimg +'"/>');
// -->
</script>
	</div>
	</div>
	</div>
<!--/index_area-->
<!--☆使う前にここから上の★～★からこの行までを削除してください☆-->

プラグインエリア３を使いたくないんだけど？

「テンプレートの設定」-「プラグインの設定」より「HTMLの編集」欄の下記部分を削除してください。

<!--トップページのみ表示されるプラグインエリア３-->
<!--index_area-->
	<!--plugin-->
	<div class="free">
	<!--plugin_third-->
	<h2><%plugin_third_title></h2>
	<div class="freearea">
	<div class="freecontent">
	<%plugin_third_description>
	<%plugin_third_content>
	<%plugin_third_description2>
	</div>
	</div>
	<!--/plugin_third-->
	</div>
	<!--/plugin-->
<!--/index_area-->

「Welcome to my blog」の部分に別のロゴを表示したいんだけど？

【更新履歴】

2009/06/30　
sq_sky共有登録

2009/03/23　ver.2.1
コメント入力フォームアクティブ時の背景色が黒（#000000）の為、入力した文字が識別できない不具合を修正。テンプレデザインに合わせて設定。

グローバルナビの『MAIL』文字化けの問題から削除。

2009/03/22　ver.2.0
ヘッダー部においてブログタイトル及び、ブログ紹介文の文字数が多い際に指定ボックスサイズから飛び出してしまう不具合を修正。
文字数（行数）の変化に応じて高さが可変するようにしました。

2009/03/22　ver.1.0
共有テンプレート公開開始

ブログをやることが珍しくなくなり中には数年にわたってブログをやってる人も多くなりました。
それに伴い検索サイトにブログがヒットする割合も多くなったのですが、求めている情報がいわゆる日記的ブログではその奥の情報に辿り着くのが難しいように感じています。

本人は日記のつもりでいるからカテゴリ分けができていないブログも多いです。
日記ってカテゴリーがある奴に限って日記が三日坊主だったりねｗｗｗ
（ほんとに日記としてやってるなら文句言わんが…。）

特に自分のブログのエントリー（記事）数が100超えてる人。
ちょっと過去の記事の取り扱い考えてみてください。

というわけで、今年は私のテンプレにはグローバルメニュー（ナビゲーションバーとかナビゲーションメニューって言う？）を組み込んだデザインにしています。

これはタグ機能や検索機能とも関係してて、非常にユーザビリティに貢献するはずなんです。
もっとも使い様なんですけどね。

で、今回はメニューだけじゃ物足りなくて検索窓も標準（強制）装備にしたってのが一番のポイントだったりします。

ナビゲーションメニューの設定について

ヘッダー画像下部の『HOME』から始まるナビゲーションメニューは一部（CATEGORY0Xって奴ね）仮のものになっています。
管理画面、テンプレートの管理より、下の画像の黄色い部分を書き換えることで削除したり、追加したりができます。

メニュー自体が邪魔な場合はピンクの部分ごと削除してしまうと良いでしょう。

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

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」 が文字の色です。

【仕様】
全体の幅：820px
左メニュー幅：160px
エントリー幅：485px
右のメニューエリア幅：140px

プラグインは左メニューが１、右メニューが２に対応しています。
しかし、各プラグインごとの表示確認はしていません。

左メニューと中央カラムは幅固定で、中にそれを越える幅のものが入ると表示が途中で切れる設定になっています。
右メニューのみ上記の設定は外してあり、カスタマイズ時にレイアウト崩れの可能性がありますが、それはプラグインの内容がメニュー幅を超えているからです。ブラウザごとの表示の違いに対応させる意味合いもありますので、カスタマイズ法を参照して対処してください。

【使用法】
カスタマイズ法を読んでお使い下さい。

→利用規約
→カスタマイズ法