tDiaryのテーマにとらわれず、ブログライクなデザインで
- 投稿者: A_M
- カテゴリ: 新規
- 優先度: 低
- 状態: 提案
- 日時: 2005年09月30日 02時35分58秒
内容
掲示板でも発言したのですが、簡単にブログライクなデザインを作ってみました。
- tDiaryのデザインには対応していません。
-
Menuページの利用を前提としていますMenu, Menu2 の存在有無を認識します。 - より詳細にデコレーションするには依存プラグインがあります。
- 3カラムに対応してみました。
CSSファイルは正直、整理できてません。
- 2005/10/14追加分ではコメントが多いものの、ある程度、整理してあります。
- 2005/10/21追加分は、design_bloglike2.zip インストール後に上書きします。
Readme_euc.txt もアップデートしています。ご一読ください。
サンプル
動作条件
依存プラグイン:
- BugTrack-plugin/160 - HTML装飾用プラグイン(あき氏)
- 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 による制御を行っています。印刷プレビューも試してください。
パッケージ
-
design_bloglike.zip - design_bloglike2.zip(1017) - 2005/10/14
- design_bloglike3.zip(1104) - 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秒)
最終更新時間:2006年02月03日 17時53分20秒