BugTrack-sitetemplate/5

ブログライクなテンプレート（第2版）

• 投稿者： A_M
• カテゴリ： 新規
• 優先度： 緊急
• 状態： 保留
• 日時： 2006年09月15日 21時04分41秒

 内容

ブログライクテンプレートについて、デザインのし易さを重視して仕様を見直したものです。CMSパック向けに編集しやすいようなコメントを入れています。

はじめに

前回テンプレートでは、Wikiらしさを排除したデザインの一例を提案させていただきましたが、以下のように多くのデメリットを抱えていました。

• １つのテンプレートで、ページの有無によって１，２，３カラムを切り替えるテンプレートであり、本来、プログラマだけが知ればいい「HTML::Templateのルール」をデザイナにも要求するため、デザインだけを取り組みたい人には解りにくいものでした。気軽にFSWikiを使いたい利用者への配慮が足りなかったと思います。
• CSS内部のまとまりの無さや、上記のような、ページの有無で切り替えという仕様が、逆にサポートしづらい仕様ということも浮き彫りになっています。

「ノリ」であったとはいえ、公開することに対する反省があり、改めて仕様の見直しを行い、デザインのし易さを重視したものにして公開させていただきました。

 サンプル

コンテンツ領域は800px幅、影落としのために840pxで固定しています。

 動作条件

以下、必須プラグインとなります。

• BugTrack-plugin/160 - HTML装飾用プラグイン（あき氏）
• BugTrack-plugin/161 - テンプレート／スタイル変更プラグイン（KG 氏）
• BugTrack-plugin/307 - IE用CSSを利用できるようにするパッチ(推奨 / 拙作)

使用法

KG氏のプラグインによって、特定ページの見栄えを変更できます。

{{sitestyle bloglike_1C,bloglike_top}}
{{sitestyle bloglike_2CL,bloglike_std}}
{{sitestyle bloglike_2CR,bloglike_std}}
{{sitestyle bloglike_3C,bloglike_std}}
など

あき氏のプラグインによって、サイドバーの大見出しの色を変えることが出来ます。

Menu、Menu2（右サイド用特別ページ）で以下のように、c001とクラス指定します。

{{div_begin class="c001"}}
!!!見出し
{{div_end}}

添付ファイルには、c001、c002を用意しています。H2要素の背景を変えるだけのものですが、サイドバーを華やかにする例となります。

その他の特別ページとしてNaviTop とNaviBottomを加えています。

• NaviTopでは、項目リストのみ入力しておくことでカテゴリのナビゲーションをタブの形で出力します。
• NaviBottomでは、サイト運営者を具体的に紹介するページなど、リンクを記述できるようにしています。

 パッケージ

• bloglike2_20060915.zip(900)
• bloglike2_20060917.zip(1144)(回り込み解除の対策)

• tmpl/site/bloglike2_1C/bloglike2_1C.tmpl
• tmpl/site/bloglike2_2CL/bloglike2_2CL.tmpl
• tmpl/site/bloglike2_2CR/bloglike2_2CR.tmpl
• tmpl/site/bloglike2_3C/bloglike2_3C.tmpl
• theme/bloglike2_std/bloglike2_std.css
• theme/bloglike2_std/bloglike2_std_ie.css
• theme/bloglike2_top/bloglike2_top.css
• theme/bloglike2_top/bloglike2_top_ie.css
• 他画像ファイルなど(同梱のFiles.txtをご一読下さい)

 特別ページ

以下の３つが標準の常時表示の特別ページに加わります。

1. Menu2 - 右サイドバー
2. NaviTop - 上部のナビゲーション
3. NaviBottom - 下部のナビゲーション

 文脈ポジショニング(コンテンツ配置)

基本的に以下の順序でコンテンツ配置しています。

1. ヘッダ
2. メイン
3. ナビゲーション
4. フッタ

 DOM

• ３カラムのDOMを 同梱の dom3C_euc.txt に記載しています
• ２カラム、１カラムは、３カラムのDOMを基本に不要な要素（表示されない要素）を省いたものです。

DOMの構造とCSS仕様、ウェブブラウザの表現の都合で、横幅固定のデザインでなければ対応できません。

 その他

• CSSデザインのノウハウとして、ポジショニング、装飾の順で抽象的にデザインする手法を提案しています。
• CSSには、独自パッチの為の記述が含まれておりますが、「パッチの当て方」がありません。コメントにも「独自修正」と記載していますのでご理解下さい。
  • できれば、修正箇所も公開してみたいと考えています。
• DOMのレイアウト領域は全てDIV要素にid属性を加えていますが、プラグインによって特殊なマークアップを出力させてスタイル指定する場合には、セレクタの個別性(特殊性)によっては、単純に上書きできない場合も考えられます。
  • この場合、プラグイン側、もしくはテンプレート側のスタイル指定の為の属性(id,class)を調整する必要がありそうです。

 作者

A_M

 ライセンス

GPL

 コメント

• さっそく使わせていｔだきました。いまのところ、IEで例の表示オチ（！？）が発生するのが悩みの種ですが、その問題はこのテンプレートだけの問題ではないのでNPです。 - ふる･たいプ (2006年09月17日 01時20分02秒)
• BugTrack-plugin/307を適用していればIE用のCSSを読み込むはずでしたが、肝心のパッチにミスがありました。修正内容をご報告させていただきましたので、ご確認下さい。ちなみに、IEでは、word-break:break-all; というCSS宣言で半角英数字の長い文字列も強制改行してくれるので、IE用CSSに記述していました。他のブラウザではサイドバー用に取った領域から浮き上がってはみ出てしまいますが、折り返し機能を実装しているのがIEだけという状況で、仕様といえます。全角文字であれば問題なく改行されると思います。 - A_M (2006年09月17日 02時38分36秒)
• 特別ページ「NaviTop」のページに回り込み解除の記述が不要になるように、テンプレート側で対応しました。ご質問いただいた内容も参考下さい。 - A_M (2006年09月17日 07時14分52秒)
• ちょっと質問なのですが、このテンプレートは携帯に対応していますでしょうか？ - 名無しさん (2006年09月19日 13時25分32秒)
• FSWikiの場合、携帯電話は専用のテンプレートが必要です。添付文書内にも「携帯電話用テンプレートはありません」とは記載しているのですが、説明不足だったかもしれませんね。対応方法として、defaultのサイトテンプレートから、tmplディレクトリ以下にコピーし、対応するテーマ用にリネームすると携帯端末でも利用できるようになります。BugTrack-plugin/307のパッチを当てていると、defaultの携帯電話用テンプレートを利用するようになります。 - A_M (2006年09月19日 14時32分17秒)

tmpl/default/default_handyphone.tmpl
(コピー＆リネーム→)tmpl/bloglike2_1C/bloglike2_1C_handyphone.tmpl
(コピー＆リネーム→)tmpl/bloglike2_2CL/bloglike2_2CL_handyphone.tmpl
(コピー＆リネーム→)tmpl/bloglike2_2CR/bloglike2_2CR_handyphone.tmpl
(コピー＆リネーム→)tmpl/bloglike2_3C/bloglike2_3C_handyphone.tmpl

• 尚、PDA等の「携帯電話と認識しない」ハンドヘルド端末については、CSSの追記で対応できそうですが、現在は対応しておりません。 - A_M (2006年09月19日 14時39分17秒)
• ちょっと質問なのですが、このサイトテンプレートでDIVプラグイン等でfont-sizeを変更できるようにするにはどうすればよいでしょうか？　頁によっては文字を大きくしたいのです。spanやline-heightは効くみたいなので、もしかしたらこちらの指定方法が間違っているのでしょうか？　ちなみに「font-size:120%」とかやっています。 - ふる･たいプ (2006年09月30日 00時46分15秒)
• 対策として bloglike2_std.css (366付近)のfont-size:small; をコメント化するのが手っ取り早いかもしれません。原因は、IE対策のため、CSSの適用方法を「子孫セレクタ」で指示をしているためです。 - A_M (2006年09月30日 02時37分00秒)
• 原因の詳細を書いてみました。 - A_M (2006年09月30日 08時14分13秒)
• 遅くなりましたが、あろがとうございます。参考にして調整してみます。 - ふる･たいプ (2006年10月10日 00時51分32秒)
• BBS-サポート掲示板/703にご質問いただきましたので、回答させていただきました。ご参考ください。 - A_M (2007年05月02日 00時56分00秒)
• さっそく使わせてもらってます。印刷するとメニューなしになる点など、細かいところまでデザインされていて、かっこいいです。これを標準スタイルにしたらFSWikiがもっと普及するんじゃないか、と思うくらい(^^)。ありがとうございます。 - matto (2007年10月23日 10時31分42秒)
• ありがとうございます。現在、Layout Gala（Italyの作者）をFSWikiのテンプレートに出来ないだろうか？と考えています。WEBデザイナの方も一度は参考にされたと思われる、CSSのみによるレイアウトパターンです。 - A_M (2007年10月23日 10時51分45秒)