BlognPlus(ぶろぐん+)スキン

BlognPlus(ぶろぐん+)スキン

Posted at May 30,2007 2:25 AM
Tag:[BlognPlus, Template]

ぶろぐん・3カラムテンプレートBlognPlus(ぶろぐん+)用のスキン(テンプレート)を作りました。サンプルのスクリーンショットは3カラムですが、2カラム・1カラムも用意しております。カラムレイアウトの設定方法につきましては本エントリーを参照ください。

1.動作確認環境

動作確認は下記の環境で行っています。

  • OS:Windows2000/XP
  • ブラウザ:IE6/IE7/Firefox2/Opera9

Mac環境はありませんので Safari での確認はできておりません。予めご容赦ください。

2.利用規定

ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します

3.カラムレイアウト変更方法

このテンプレートではカラムレイアウトのバリエーションとして、

  • 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">

Seesaaブログ・3カラムテンプレート3カラム

<body class="layout-three-column-liquid">

Seesaaブログ・3カラムテンプレート・リキッドレイアウト3カラム・リキッドレイアウト

<body class="layout-two-column-left">

Seesaaブログ・2カラムテンプレート(左サイドバー)2カラム(左サイドバー)

<body class="layout-two-column-liquid-left">

Seesaaブログ・2カラムテンプレート・リキッドレイアウト(左サイドバー)2カラム・リキッドレイアウト(左サイドバー)

<body class="layout-two-column-right">

Seesaaブログ・2カラムテンプレート(右サイドバー)2カラム(右サイドバー)

<body class="layout-two-column-liquid-right">

Seesaaブログ・2カラムテンプレート・リキッドレイアウト(右サイドバー)2カラム・リキッドレイアウト(右サイドバー)

<body class="layout-one-column">

Seesaaブログ・1カラムテンプレート1カラム

<body class="layout-one-column-liquid">

Seesaaブログ・1カラムテンプレート・リキッドレイアウト1カラム・リキッドレイアウト注:左右のマージンをなくすことも可能です。

公開テンプレートは一番上の3カラムレイアウトで配布しております。

カラム数を変更、例えば3カラムから2カラム(左サイドバー)に変更した場合、管理メニューの「デザイン」→「コンテンツ」で右サイドバーに表示するものがなくなれば自動的に2カラム表示になります。
非表示にするサイドバーにコンテンツが残っている場合は、

<!-- 右カラム開始 -->
<div id="links-right-box">
<dl id="links-right">
         :
</dl><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->

を丸ごと削除してください。1カラムに変更される場合は左右両方のカラムをごっそり削除してください(いずれもサイドバーの復活が面倒なのでお勧めできません)。

4.1カラムレイアウトについて

1カラムレイアウトはポータル的な要素を排除して、個人の日記サイトとして気軽に書けるデザインにしています(言い換えると単にサイドバーをとっぱらっただけです)がアーカイブページ等のリンクは考慮しておりませんのでご注意ください。

5.クレジットバナーについて

当サイトのクレジットバナーはデフォルトで右サイドバー下に表示するようにしています。バナー画像は別のサイトから取得するようにしていますが、テンプレートのページよりダウンロードしてお使いくださっても結構です(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="http://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>

6.その他

基本的な動作は確認したつもりですが、ぶろぐんの機能を全て把握できていない状態ですので、不具合等ございましたらご連絡ください。

7.テンプレート

HTML

スタイルシート

2009.07.16 Movable Type 用のタグがあったため削除しました。

関連記事
zenback
人気エントリー
トラックバックURL


コメント

ありがとうございます。ぶろぐん使いにとって、一筋の光です。早速、熟読して新しいテンプレートで構築しみます。もう、なんと言ってよいか。ぶろぐんのフォーラムとかにも紹介します。
取り急ぎ、大感謝を込めて。

[1] Posted by ha2 : June 11, 2007 11:15 AM

>ha2さん
こんばんは。
コメントありがとうございました。
なお以前頂いた New マークの件ですが、調査したところ、ぶろぐんのデフォルトテンプレートでは新着カテゴリーに New マークを付与することは困難なようです。
ご連絡遅くなり申し訳ありません。またお役に立てず申し訳ありません。

[2] Posted by yujiro : June 13, 2007 1:34 AM

そうですか。。
でも、丁寧に対応して頂いて、ホントにありがとうございました。
こちらで作っていただいたテンプレートは、
ありがたく使わさせていただきますし、
これからも貴サイトを応援しています。ありがとうございました。

[3] Posted by ha2 : June 21, 2007 12:24 AM

>ha2さん
こんにちは。
ご連絡ありがとうございました。
機会があれば何かカスタマイズ記事を投稿したいと思います。
ではでは!

[4] Posted by yujiro : June 23, 2007 12:15 PM

BlognPlus(ぶろぐん+)用のスキンをVistaにて使わせて頂いております・・現在問題は有りませんが、先週よりWindows7(ベータ版)を試しておりExplorer8でブログを見ますとメイン部分以外濃いグレイになり、コメント部分は反転しないと見えない状態です。
他のブラウザExplorer7,6、Firefox、Sleipnir、Safariは問題なしです。

HTML、スタイルシートで変更すべき項目はあるでしょうか?
宜しくお願いいたします。

[5] Posted by chappy : March 27, 2009 3:07 PM

>chappyさん
こんにちは。
スキンご利用ありがとうございます。
申し訳ありませんが同一環境がないため、こちらでは確認および対処方法がご提示できない状況です。
それではよろしくお願い致します。

[6] Posted by yujiro logo : April 5, 2009 3:30 PM

>chappyさん
VistaとかWin7とか関係ないですね。それを言うなら"XPも"加えないと^^;

私も「IE8」で確認しました。ただし、互換表示すれば問題ありません(実は問題かもですが^^;)。

CSSを比べていないのでアレですが、WordPressのテンプレートでは再現しないので、ぶろぐんのCSSが特殊なんでしょうか?

[7] Posted by WIND : July 16, 2009 12:46 PM

連投すみません、大事な事忘れてました。

スキン内のトラックバック関連にMTのタグが使われています^^;

[8] Posted by WIND : July 16, 2009 12:57 PM

>WINDさん
こんにちは。
ご指摘ありがとうございました!
とりあえずMTのタグは削除いたしました。
それではよろしくお願い致します。

[9] Posted by yujiro logo : July 16, 2009 1:29 PM

はじめまして。Blognについていろいろ知りたいのですが、詳しく書かれているサイトなどがあまりないため、もし相談にのっていただけると嬉しいです。私はHPビルダーで作成したサイトを8年ほど運営してきたのですが、このたびブログ型サイトに移行しようとしていて、どのブログが良いか調べていてBlognにたどりつきました。ただ、テンプレートをHPビルダーでやるように自由にレイアウトを変えたいのですが、どこをどうしたら良いか悩んでいます。HTMLとCSS両方を修正する必要があるのでしょうか。Blognはスキンのレイアウトを自由に変えることは難しいでしょうか?例えばこんな感じです・・・http://www.werockcity.com/。よろしくお願いいたします。

[10] Posted by Romi : October 6, 2009 1:01 PM

>Romiさん
こんばんは。
ご返事遅くなってすいません。
ご質問の件ですが、レイアウトやデザインを比較的自由に変更できるのがブログツールのメリットと思いますが、HTMLやCSSを直接修正する作業がメインになります。
レイアウトを変更したい場合は、HTMLテンプレートの内容を書き換えてください。ただし、CSSの設定が変更したレイアウトに対応していないと、CSSもあわせて修正する必要があります(=利用するテンプレートによって異なります)。

なお、当サイトのテンプレートをご利用いただければ、3項に示すとおり、body要素のclass属性値の変更と、HTMLのわずかな変更でカラムレイアウトを変更することもできます(CSSの変更は不要です)。ご提示のURLの2カラムレイアウトにも変更できます(幅を変更するにはCSSの修正が必要です)ので、修正内容で不明な点がありましたらご連絡ください。

それではよろしくお願い致します。

[11] Posted by yujiro logo : October 14, 2009 8:17 PM

ご返信ありがとうございます!
他のサイトのテンプレートを取り込んでいろいろやっていましたが、なかなかHPビルダーで作成しているときのようにはいきません・・・。
こちらのテンプレートでも試してみます。また、何か分からないことがあったら書き込ませていただくかもしれませんが、その時はまたよろしくお願いいたします。

[12] Posted by Romi : October 15, 2009 3:21 PM

お久し振りです。Blognのテンプレートをいろいろカスタマイズをしているのですが、判らない事があります。カテゴリーのリンクが長いアドレスになってしまうのですが、こちらのサイトのようにxxx.phpのようにするにはどうしたら良いのでしょうか?管理画面でカテゴリーを追加しているのですが、xxxindex.php?=c.....などのようになってしまいます。また、基本的な事なんですが、投稿した記事は何処に蓄積されるのでしょうか?こちらで質問して良いものかどうか判りませんが、もし教えて頂ければ幸いです。よろしくお願いいたします。

[13] Posted by Romi : November 22, 2009 7:08 PM

>Romiさん
こんばんは。
ご返事遅くなってすいません。
ご質問の件ですが、このブログはBlognではなく、MTで構築しているため、URLについては適切な回答を行なうことはできません。お役に立てず申し訳ありません。

投稿した記事は、データベースに保存されると思います。
それではよろしくお願い致します。

[14] Posted by yujiro logo : December 1, 2009 12:15 AM

失礼いたしました。
変な質問をしてしまいましてすみません。
現在Joomlaに興味を持ち始めていて、そちらを試してみようかと思っています。ありがとうございました。

[15] Posted by Romi : December 1, 2009 9:53 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)