BlognPlus（ぶろぐん+）スキン
BlognPlus（ぶろぐん+）用のスキン（テンプレート）を作りました。サンプルのスクリーンショットは3カラムですが、2カラム・1カラムも用意しております。カラムレイアウトの設定方法につきましては本エントリーを参照ください。
１．動作確認環境
動作確認は下記の環境で行っています。
- OS：Windows2000/XP
- ブラウザ：IE6/IE7/Firefox2/Opera9
Mac環境はありませんので Safari での確認はできておりません。予めご容赦ください。
２．利用規定
ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します
３．カラムレイアウト変更方法
このテンプレートではカラムレイアウトのバリエーションとして、
- 3カラム（カラム幅固定）
- 3カラムリキッドレイアウト（中央カラム幅可変）
- 2カラム（右サイドバー：カラム幅固定）
- 2カラム（左サイドバー：カラム幅固定）
- 2カラムリキッドレイアウト（右サイドバー：左カラム幅可変）
- 2カラムリキッドレイアウト（左サイドバー：右カラム幅可変）
- 1カラム（カラム幅固定）
- 1カラムリキッドレイアウト（カラム幅可変）
の計8種類を用意しています（それぞれのサンプルはちょっと下にある画像をご覧ください）。
カラムレイアウトは、HTMLテンプレートの body 要素の class 属性を書き換えることで変更することができます（カラム数を変更する場合はHTMLテンプレートの修正が必要ですがこれについては後述します）。例えば、3カラムレイアウトから2カラム・リキッドレイアウト（右サイドバー）に変更したい場合は、HTMLテンプレートの
<body class="layout-three-column">の赤色部分を
<body class="layout-two-column-liquid-right">と、青色の内容に変更します。このテクニックは Designing with Web Standards でも紹介されています。
個別エントリー用HTMLありのテンプレートをお使いの場合、ベースHTMLと個別エントリー用HTMLで異なるレイアウトを設定することができます。例えばベースHTMLで3カラム、個別エントリー用HTMLで1カラムという設定も可能です。
以下にそれぞれのレイアウトに対する class 属性値を示します。なおサンプル画像は Movable Type のものを流用しておりますので予めご了承ください。
<body class="layout-three-column">
3カラム
<body class="layout-three-column-liquid">
3カラム・リキッドレイアウト
<body class="layout-two-column-left">
2カラム（左サイドバー）
<body class="layout-two-column-liquid-left">
2カラム・リキッドレイアウト（左サイドバー）
<body class="layout-two-column-right">
2カラム（右サイドバー）
<body class="layout-two-column-liquid-right">
2カラム・リキッドレイアウト（右サイドバー）
<body class="layout-one-column">
1カラム
<body class="layout-one-column-liquid">
1カラム・リキッドレイアウト注：左右のマージンをなくすことも可能です。
公開テンプレートは一番上の3カラムレイアウトで配布しております。
カラム数を変更、例えば3カラムから2カラム（左サイドバー）に変更した場合、管理メニューの「デザイン」→「コンテンツ」で右サイドバーに表示するものがなくなれば自動的に2カラム表示になります。
非表示にするサイドバーにコンテンツが残っている場合は、
<!-- 右カラム開始 -->
<div id="links-right-box">
<dl id="links-right">
：
</dl><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->を丸ごと削除してください。1カラムに変更される場合は左右両方のカラムをごっそり削除してください（いずれもサイドバーの復活が面倒なのでお勧めできません）。
４．1カラムレイアウトについて
1カラムレイアウトはポータル的な要素を排除して、個人の日記サイトとして気軽に書けるデザインにしています（言い換えると単にサイドバーをとっぱらっただけです）がアーカイブページ等のリンクは考慮しておりませんのでご注意ください。
５．クレジットバナーについて
当サイトのクレジットバナーはデフォルトで右サイドバー下に表示するようにしています。バナー画像は別のサイトから取得するようにしていますが、テンプレートのページよりダウンロードしてお使いくださっても結構です（src 属性は適宜修正してください）。なお右カラムを削除される場合は、下記のタグを左サイドバーに挿入してください。
<dd class="powered">
<ul><li>Powered by<br />
<a href="http://www.blogn.org/" target="_blank"><img src="images/blogn3.gif" alt="BLOGNPLUS（ぶろぐん＋）" border="0" /></a></li>
<li><a href="https://www.koikikukan.com/"><img src="http://blog42.fc2.com/k/koikikukan/file/banner.gif" alt="小粋空間" width="128" height="22" /></a><p><br /></p></li></ul>
</dd>６．その他
基本的な動作は確認したつもりですが、ぶろぐんの機能を全て把握できていない状態ですので、不具合等ございましたらご連絡ください。
７．テンプレート
HTMLスタイルシート
2009.07.16 Movable Type 用のタグがあったため削除しました。
ありがとうございます。ぶろぐん使いにとって、一筋の光です。早速、熟読して新しいテンプレートで構築しみます。もう、なんと言ってよいか。ぶろぐんのフォーラムとかにも紹介します。
取り急ぎ、大感謝を込めて。
＞ha2さん
こんばんは。
コメントありがとうございました。
なお以前頂いた New マークの件ですが、調査したところ、ぶろぐんのデフォルトテンプレートでは新着カテゴリーに New マークを付与することは困難なようです。
ご連絡遅くなり申し訳ありません。またお役に立てず申し訳ありません。
そうですか。。
でも、丁寧に対応して頂いて、ホントにありがとうございました。
こちらで作っていただいたテンプレートは、
ありがたく使わさせていただきますし、
これからも貴サイトを応援しています。ありがとうございました。
＞ha2さん
こんにちは。
ご連絡ありがとうございました。
機会があれば何かカスタマイズ記事を投稿したいと思います。
ではでは！
BlognPlus（ぶろぐん+）用のスキンをＶｉｓｔａにて使わせて頂いております・・現在問題は有りませんが、先週よりWindows７（ベータ版）を試しておりＥｘｐｌｏｒｅｒ８でブログを見ますとメイン部分以外濃いグレイになり、コメント部分は反転しないと見えない状態です。
他のブラウザＥｘｐｌｏｒｅｒ７，６、Ｆｉｒｅｆｏｘ、Ｓｌｅｉｐｎｉｒ、Ｓａｆａｒｉは問題なしです。
ＨＴＭＬ、スタイルシートで変更すべき項目はあるでしょうか？
宜しくお願いいたします。
＞chappyさん
こんにちは。
スキンご利用ありがとうございます。
申し訳ありませんが同一環境がないため、こちらでは確認および対処方法がご提示できない状況です。
それではよろしくお願い致します。
: April 5, 2009 3:30 PM＞chappyさん
VistaとかWin7とか関係ないですね。それを言うなら"XPも"加えないと＾＾；
私も「IE8」で確認しました。ただし、互換表示すれば問題ありません（実は問題かもですが＾＾；）。
CSSを比べていないのでアレですが、WordPressのテンプレートでは再現しないので、ぶろぐんのCSSが特殊なんでしょうか？
＞WINDさん
こんにちは。
ご指摘ありがとうございました！
とりあえずMTのタグは削除いたしました。
それではよろしくお願い致します。
: July 16, 2009 1:29 PMはじめまして。Blognについていろいろ知りたいのですが、詳しく書かれているサイトなどがあまりないため、もし相談にのっていただけると嬉しいです。私はHPビルダーで作成したサイトを8年ほど運営してきたのですが、このたびブログ型サイトに移行しようとしていて、どのブログが良いか調べていてBlognにたどりつきました。ただ、テンプレートをHPビルダーでやるように自由にレイアウトを変えたいのですが、どこをどうしたら良いか悩んでいます。HTMLとCSS両方を修正する必要があるのでしょうか。Blognはスキンのレイアウトを自由に変えることは難しいでしょうか？例えばこんな感じです・・・http://www.werockcity.com/。よろしくお願いいたします。
＞Romiさん
こんばんは。
ご返事遅くなってすいません。
ご質問の件ですが、レイアウトやデザインを比較的自由に変更できるのがブログツールのメリットと思いますが、HTMLやCSSを直接修正する作業がメインになります。
レイアウトを変更したい場合は、HTMLテンプレートの内容を書き換えてください。ただし、CSSの設定が変更したレイアウトに対応していないと、CSSもあわせて修正する必要があります（＝利用するテンプレートによって異なります）。
なお、当サイトのテンプレートをご利用いただければ、３項に示すとおり、body要素のclass属性値の変更と、HTMLのわずかな変更でカラムレイアウトを変更することもできます（CSSの変更は不要です）。ご提示のURLの2カラムレイアウトにも変更できます（幅を変更するにはCSSの修正が必要です）ので、修正内容で不明な点がありましたらご連絡ください。
それではよろしくお願い致します。
: October 14, 2009 8:17 PMご返信ありがとうございます！
他のサイトのテンプレートを取り込んでいろいろやっていましたが、なかなかHPビルダーで作成しているときのようにはいきません・・・。
こちらのテンプレートでも試してみます。また、何か分からないことがあったら書き込ませていただくかもしれませんが、その時はまたよろしくお願いいたします。
お久し振りです。Blognのテンプレートをいろいろカスタマイズをしているのですが、判らない事があります。カテゴリーのリンクが長いアドレスになってしまうのですが、こちらのサイトのようにxxx.phpのようにするにはどうしたら良いのでしょうか？管理画面でカテゴリーを追加しているのですが、xxxindex.php?=c.....などのようになってしまいます。また、基本的な事なんですが、投稿した記事は何処に蓄積されるのでしょうか？こちらで質問して良いものかどうか判りませんが、もし教えて頂ければ幸いです。よろしくお願いいたします。
＞Romiさん
こんばんは。
ご返事遅くなってすいません。
ご質問の件ですが、このブログはBlognではなく、MTで構築しているため、URLについては適切な回答を行なうことはできません。お役に立てず申し訳ありません。
投稿した記事は、データベースに保存されると思います。
それではよろしくお願い致します。
: December 1, 2009 12:15 AM失礼いたしました。
変な質問をしてしまいましてすみません。
現在Joomlaに興味を持ち始めていて、そちらを試してみようかと思っています。ありがとうございました。
