PwBlogデザイン方法

PwBlogはHTMLに変数を挿入してデザインテンプレートを作成します。
HTMLテンプレートデザインの方法についてお話しないといけないのですが…
これがなかなかに大変なのです。
HTMLに挿入する変数の意味なども書かないと駄目です。
今日書き出した（ハズ！？）なので…
次回は！！
「HTMLテンプレートデザイン方法」
についてお話します。
HTMLテンプレートデザインについてはかなりの量があるので少しずつ小出しにしていきます。

【CSS：ブログ修正完了】

ブログを3段組にしてもメニューが下に落ちなくしました！
「デザイン管理」→「基本3段組デザイン」→「設定」でブログの再構築を行うと適用されます。
＃ あまりにもブラウザの幅が小さいときは
＃ 落ちてしまいますが…


【CSS：ポータル修正完了】

ポータルページに表示しているログイン部分のIDとパスワードのテキストフォームを少し小さくしました。
ネスケさんとモジラさんで見てもフォームが突き出さないようになりました〜。

その他にも微妙な調整はしましたが…。
すでに動いているシステム上で修正するのはちょっとどきどきします…。

【CSS：ブログ修正】

ブログのページを3段組にすると右側のメニューが下に落ちてしまうことがあります。
ブラウザをみょ〜んって伸ばせば大丈夫なのですが…
それにしても幅を取りすぎではないか！？という意見があるので修正しないといけません。
表示サイズにも限界がありますもんね…。


【CSS：ポータル修正】

ポータルページに表示しているログイン部分のIDとパスワードのテキストフォームを少し小さくしないと駄目です。
IEでは問題ないのですがネスケとモジラで表示がおかしくなることがあります。


【HTML：ブログ月別アーカイブ】

月別アーカイブは「日付」で「タイトル」の順に表示を修正しなければいけません。

う〜ん…修正いっぱい…

【テンプレートデザインを楽に作成するコツ】

ディレクトリ構成は先ほど説明したような形になっていますが…
blogtmp/blogtop.html
から
css/user.css
を参照するときのblogtop.htmlに記述される相対パスは

<link href="./css/user.css" rel="stylesheet" type="text/css">

となります。

これはCGIでblogtmp/blogtop.htmlファイルを読み込んで吐き出す先がblogtmpフォルダの上、つまりbasicフォルダの直下になるからなのです。
blogtop.htmlファイルはblogtmpフォルダの中に入っているけど実は「入っていない」のです。
※ ちょっとややこしいですが…

画像を参照したい場合も同じです。
html/images/test.gif
の画像をblogtmp/blogtop.htmlで使用したい場合の相対パスは…

<img src="./html/images/test.gif">

となるのです。

HTML編集ソフトを使ってテンプレートファイルを作成する場合は

basic - blogtop.html [blogtmp]
　　　- ubc.html [blogtmp]
　　　- monthly.html [blogtmp]
　　　- form.html [blogtmp]
　　　- comment.html [blogtmp]
　　　- monthly_body.html [blogtmp]
　　　- trackback.html
　　　- trackback2.html
　　　- search.html [html]
　　　- error.html
　　　- css
　　　- html
　　　　- images
　　　- pluginhtml
　　　- basic.jpg
　　　- basic_s.jpg
　　　- info.txt
※ [ ]内はもともとのフォルダ名

としてからデザインしましょう。


【デザイン終了後】

ファイルを元の位置に戻します。
元に戻した後はリンクがおかしくなるのでブラウザの表示がおかしくなりますが…そのままにしておいてください。

※ HTML編集ソフトを使って作業する人は必ずソフトを閉じてローカルで作業しましょう！
最近のHTML編集ソフトはエライのでリンクを勝手に修正しちゃったりします。
せっかくの作業が水の泡です。
やっちゃった人は泣いてください。

PwBlogのテンプレートデザイン方法について書いていきます。

PwBlogはテンプレートのHTMLファイルをCGIで読み込んで処理するスキンタイプのブログになっています。
CSS変更だけではなくHTMLの変更もできるからより自由度の高いブログデザインが楽しめます。
しかもHTMLはとっても簡単に作れます。

後日発表しますが…
先に言っちゃいます！！

PwBlogテンプレートデザインを募集します！

どんどん素敵なデザインのブログを作ってみんなに使ってももらってください！

でも―――。
いくら好きにデザインできるからといってPwBlogおよびCATWALKのクレジットは外さないようにしてください。
バナーが嫌だぁという人はテキストでも結構なのでとにかくクレジットは外したら駄目です。

最低限のマナーは守ってくださいね！！

【PwBlogデザインテンプレートフォルダ構成】

デザインフォルダは

pwblog/cgi-bin/blogtemplate/

の中に入っている

・basic … 基本2段組（左寄せ）
・basic2 … 基本3段組
・basic3 … 基本2段組（右寄せ）

のフォルダになります。

どれを使ってもいいです。
使うのはここのフォルダだけなので
「私はデザインしかしない！」
…という人は基本にするフォルダだけをにょこっと取り出して他のフォルダはすべて削除してくれても良いです。

ここでは基本にするフォルダを「basic」にして説明します。
他のフォルダを使いたい人は置き換えて読んでください。


【basicフォルダの構成】

・basic - blogtmp
　　　　- css
　　　　- html
　　　　　- images
　　　　- pluginhtml
　　　　- basic.jpg … 管理画面のデザイン管理で使用
　　　　- basic_s.jpg … 管理画面のデザイン管理で使用
　　　　- info.txt … 管理画面のデザイン管理で使用


【各フォルダの簡単な説明】

・blogtmp … 基本的なテンプレートファイル一式
・css … 使用するCSS
・html … 検索結果を表示するためのHTMLとエラーがあったときに表示するHTML
・html/images … テンプレートファイルで使用する画像
・pluginhtml … プラグイン部分のHTML


フォルダ構成は上記のような感じになっています。
ごっそりデザインを変えたい人はすべてのファイルを変更してしまいましょう。
CSSだけ変更したい人はcssフォルダの中のCSSファイルを変更してください。