BugTrack-sitetemplate/3

tDiaryのテーマにとらわれず、ブログライクなデザインで

• 投稿者： A_M
• カテゴリ： 新規
• 優先度： 低
• 状態： 提案
• 日時： 2005年09月30日 02時35分58秒

 内容

掲示板でも発言したのですが、簡単にブログライクなデザインを作ってみました。

1. tDiaryのデザインには対応していません。
2. Menuページの利用を前提としています Menu, Menu2 の存在有無を認識します。
3. より詳細にデコレーションするには依存プラグインがあります。
4. ３カラムに対応してみました。

CSSファイルは正直、整理できてません。

• 2005/10/14追加分ではコメントが多いものの、ある程度、整理してあります。
• 2005/10/21追加分は、design_bloglike2.zip インストール後に上書きします。

Readme_euc.txt もアップデートしています。ご一読ください。

 サンプル

 動作条件

依存プラグイン：

1. BugTrack-plugin/160 - HTML装飾用プラグイン（あき氏）
2. BugTrack-plugin/161 - テンプレート／スタイル変更プラグイン（KG 氏）- 2005/10/14追加

DIV.sidebar（Menu部分）で次のような出力を行うと、CSSによるデコレーションを実現します。

<div class="boxhead"></div>
<div class="boxbody">
	コンテンツ
</div>
<div class="boxfoot"></div>

FSWikiでの記述としては、次の様になります。

{{div_begin class="boxhead"}}
{{div_end}}
{{div_begin class="boxbody"}}

メニュー用コンテンツを書く

{{div_end}}
{{div_begin class="boxfoot"}}
{{div_end}}

※）div_beginプラグインは存在しません。を参考に次の様に出力するプラグインを作ると楽です。

{{div_head}} ⇒ "<div class=\"boxhead\"></div>\n<div class=\"boxbody\">"
{{div_foot}} ⇒ "</div>\n<div class=\"boxfoot\"></div>"

2005/10/14追加分

テンプレート／スタイル変更プラグインで、以下のような入力も確認してみてください。

{{sitestyle bloglike,bloglike_faq}}
::質問
:::回答

bloglike_faq のテーマ（スタイル）では、@import で bloglike_std を先に読み込み、必要に応じてプロパティを上書きする方式です。

パッケージ内の *.css のファイルをご覧いただくと、その手法が判ると思います。基本のデザインを作成すると、後のデザインは、微調整のみとなります。

@media による制御を行っています。印刷プレビューも試してください。

 パッケージ

1. design_bloglike.zip
2. design_bloglike2.zip(932) - 2005/10/14
3. design_bloglike3.zip(1017) - 2005/10/21

このテンプレートは、FreeStyle Wikiの特徴でもある、tDiaryのテーマ を使用していません。私の掲示板での発言から「試しに…」というノリで作ったものですので、テーマには、bloglike_ という接頭文字をつけてあります。こうすることで、少しは混乱を避けられるのではないかと考えています。

• Readme_euc.txt
• tmpl/site/bloglike/bloglike.tmpl (update - 2005/10/21)
• tmpl/site/bloglike/bloglike_handyphone.tmpl
• theme/bloglike_std/bloglike_std.css (約12KB) (update - 2005/10/21)
• theme/bloglike_std/bg_body.gif
• theme/bloglike_std/bg_main_head.jpg
• theme/bloglike_std/bg_h2.jpg
• theme/bloglike_std/bg_h3.jpg
• theme/bloglike_std/bg_h4.jpg
• theme/bloglike_std/bg_menu_head.jpg
• theme/bloglike_std/bg_menu_body.jpg
• theme/bloglike_std/bg_menu_foot.jpg
• theme/bloglike_std/marker.gif
• theme/bloglike_faq/bloglike_faq.css (約2KB)
• theme/bloglike_faq/faq_q.gif
• theme/bloglike_faq/faq_a.gif

 DOM

HTML
├HEAD
｜  (STYLE 選択) ← 追加 - 2005/10/21
└BODY
  └DIV#container
    ├DIV#header
    │├DIV.adminmenu
    ││└SPAN.adminmenu
    │├DIV.description
    ││  ([Header]Page)
    │└H1
    ├DIV#wikicontainer
    │├DIV.day
    ││├DIV.body
    │││├DIV.section
    ││││  ([Main]Page)
    │││└DIV.comment
    │││    ([Footer]Page)
    ││└DIV.sidebar
    ││    ([Menu]Page)
    │└DIV#rightbar
    │    ([Menu2]Page) ← 追加 - 2005/10/21
    └DIV.footer

このDOMに表示される要素には高さ（Height）の指定をしないのが、縦方向への伸縮を自動化させるポイントです。 - 2005/10/19 追記

 ライセンス

GPLです。

 コメント

• さっそく使わせていただいております。ただ２２８行目の画像がpng形式になっているのと、２３４行目の画像が存在しないようなので訂正をお願いできますか？ - NVA (2005年10月13日 23時50分03秒)
• すみません。プラグインには関係ないんですが、上記のDOMはどのように作図？しているのですか。マニュアル入力ですか？何か他のツールを利用しているのですか？お手数ですが教えてください。 - cadp (2005年10月13日 23時58分17秒)
• ダウンロード、有難うございます。スタイルシートの修正については、しばらくお待ちください。テーマ修正が簡単になるよう手法 ― @import を活用し、デザインの概要と詳細とを分離する手法 ― を含め、ドキュメント化を進めております。＞NVA様 - A_M (2005年10月14日 01時06分20秒)
• 私のDOMの作図方法ですが、FireFoxの DOMインスペクタ を活用し、テキストエディタで手入力しています。タブで階層化しておき、最後に置換処理するという原始的方法ですが、作図後は仕様が固まり、デザインも容易なのでがんばっています。テキストファイルに出力するツールがあると楽なんですけどねぇ。＞cadp様 - A_M (2005年10月14日 01時06分40秒)
• bloglike_std.css の206行 height : 360px; …は削除してください。コメント記述の通りですが、回り込みの解除時に高さが指定値(360px)で固定される為です。この行を削除することで、高さは伸縮します。 - A_M (2005年10月19日 11時57分32秒)
• BugTrack-sitetemplate/4 のトリックを活用すると、CSSの修正で3カラムもデザインできます - A_M (2005年10月20日 19時53分00秒)
• こちらはdesign_bloglike2.zipを入れた後に、design_bloglike3.zipを入れる必要があるのですね。入れてみましたが、私の環境だけの問題かもしれませんが、IEだとIEがフリーズしたり死んだりしてしまいます（Windows2000+IE6.0SP1）。Windowsを再起動しても同じです。２台有りますが２台とも同じような感じです。FireFoxだと大丈夫です。後、ヘルプのページを開くと上部の画像部分が２つ（２段になって）表示されます。何故なんでしょうね。 - あき (2006年02月03日 08時27分29秒)
• IEでエラーになるのは、スタイルシートのwidth指定が原因と分かっています。mshtml.dll付近で「ページ違反」等のエラーにだったと思います。現在、いくつかのテンプレートを準備中です。しばらくお待ち下さい。 - A_M (2006年02月03日 10時02分03秒)
• なるほど、了解しました。自分だけではなかったのですね。安心しました。あと、デザインに関してですが、上部の「Free Style Wiki Like a Blog …」は要らない気がしますね。逆にここに、サイト名なんかが表示されるようにできれば理想的です。個人的な意見ですが…。あと、表示させる際、最初にチラッと黒い画面が表示されますね。（bodyのbackground-color:#333;）これ、意外と冷っとしますので不要だと思います。きっと、CSSの確認用のためか何かですよね？　いつも辛口コメントばかりですみません。 - あき (2006年02月03日 13時27分02秒)
• 仰るとおりです。標準の文字色に対してもBODYの背景色はコントラスト（明度差）が無くなってしまうため、着色するなら明るい色が良いみたいです。 - A_M (2006年02月03日 17時53分20秒)