トップ 差分 一覧 Farm ソース 検索 ヘルプ RSS ログイン

BugTrack-sitetemplate/3

ページの作成や編集にはユーザ登録が必要です。

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

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

 内容

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

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

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(866) - 2005/10/14
  3. design_bloglike3.zip(952) - 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です。

 コメント

  • さっそく使わせていただいております。ただ228行目の画像がpng形式になっているのと、234行目の画像が存在しないようなので訂正をお願いできますか? - 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を再起動しても同じです。2台有りますが2台とも同じような感じです。FireFoxだと大丈夫です。後、ヘルプのページを開くと上部の画像部分が2つ(2段になって)表示されます。何故なんでしょうね。 - あき (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秒)
お名前: コメント:
design_bloglike.jpg design_bloglike.zip design_bloglike2.zip design_bloglike3.zip

最終更新時間:2006年02月03日 17時53分20秒