PwBlogデザイン方法

2005年4月18日発売のSoftware Design 2005年5月号未掲載のユーザーblog用テンプレート変数一覧です。

今回はブログページのコメント部分変数についてです。
変数の基本的なことについては【変数について 〜 基本編】を参考にしてください。

※今回の説明の対象となるHTMLファイルは
　blogtmp/comment.htmlファイルです！
　これは記事を単体で表示させた際に「この記事へのコメント」と表示される部分のファイルです。

コメント部分で使用される変数はそれほど多くありません。
リストアップしておきましょう。

■コメント内容表示用ループ変数
■コメント内容変数
■コメント投稿者名変数
■コメント投稿者リンク変数
■コメント投稿日時変数
■コメント用CGIのURL変数
■投稿記事番号変数

以上になります。
ではひとつひとつの変数について見てきましょう！

今回はブログの記事の基本変数についてです。
変数の基本的なことについては【変数について 〜 基本編】を参考にしてください。

※今回の変数の説明の対象となるHTMLファイルは
　blogtmp/ubc.htmlファイルになります！！
　このファイルは記事を単体で表示させたときに使用されるファイルです。

ブログの中のページにはいろいろな変数がありますが、ブログトップページで紹介した変数と重複するものも多々あります。同様に紹介していきます。

■ブログタイトル変数
■ブログURL変数
■ブログの詳細表示用変数
■ユーザID変数
■投稿記事タイトル変数
■投稿日時変数
■投稿時間変数
■投稿画像変数
■投稿記事内容変数
■追加記事リンク変数
■RDF用変数
■コメント変数
■コメント内容表示変数
■トラックバック変数
■トラックバック内容表示変数
■前の記事へのリンク変数
■次の記事へのリンク変数

たくさんありますがほとんどブログトップページで出てきた変数です。
ではひとつひとつの変数について見ていきましょう！

今回は変数について第二回！
ブログトップページの投稿記事用変数についてです。
変数についての基本的なことは【変数について 〜 基本編】の記事を参考にしてください。

※今回の変数の説明の対象となるHTMLファイルは
　blogtmp/blogtop.htmlファイルになります！！

記事の投稿部分の変数は結構いろいろあります。
リストアップしておきましょう。

■投稿記事ループ変数
■投稿記事タイトル変数
■投稿画像変数
■投稿記事内容変数
■追加記事リンク変数
■ユーザID変数
■投稿時間変数
■月別アーカイブ変数
■コメント変数
■トラックバック変数
■カテゴリー変数

今回説明するのは以上の変数についてです。
ではひとつひとつの変数について見ていきましょう！

今回はブログトップページの基本変数について説明します。
変数についての基本的なことは【変数について 〜 基本編】を参考にしてください。

※今回の変数の説明の対象となるHTMLファイルは
　blogtmp/blogtop.htmlファイルになります！！

ブログトップページといっても変数はたくさんあります。
ブログトップページで使用している変数をリストアップしておきます。

■ブログタイトル変数
■ブログURL変数
■ブログの詳細表示用変数
■プラグイン左表示ループ変数
■プラグイン右表示ループ変数
■プラグイン変数

今回説明するのは以上の変数についてです。
記事投稿用変数については次回の説明になります。
では変数の詳細について見ていきましょう！

変数についての基本的なことを、変数について説明する前に述べておきます。

ダウンロードして使用されている方はHTMLファイルのデザインも変更することができます。
好きなようにぐりぐりいじってカスタマイズしてみてください。

※デザインをされる際には【テンプレートデザインを楽にするコツ】を参考にしてください！！

【変数の形】
HTMLファイルはHTMLタグと変数で構成されています。
PwBlogで使用する変数は…
＝CGIQUERY_xxxx＝
という形になっています。

なぜ変数をタグ形式にしなかったかというと…。
タグ形式にするとDreamweaverなどのHTMLエディタなどで表示がくずれてしまうからです。
HTMLを詳しく知っている人はテキストエディタで編集することができますが、HTMLを詳しく知らない人でもエディタを使えばぐりぐり変更してもらえるという利点があるのです。

この変数が記述されているところはCGIプログラムで処理されて個々の値に置き換えられます。
例えば…

「＝CGIQUERY_title＝」→「PwBlogデザイン方法(ここに変数を記述しています)」

変換されていますね。
これはブログのタイトルをここに表示させてくださいという変数です。
「PwBlogデザイン方法」というのがこのブログのタイトルになります。
自分専用のデザインテンプレートだからすべて直接書いてしまうんだ！という人もいらっしゃるかもしれません。それはそれでいいです。
でも、そのテンプレートの出来がとても良くていろんな人に、ぜひ使わせてください！となったときに困ります。
このように変数にしておくことで、いろんな人のブログに対応させることができるのです。

変数の形には2種類あります。
「単一変数」と「ループ変数」です。

【単一変数】
単一変数とは先ほどの例のように、その変数1つだけで処理される変数のことです。
（勝手に名づけましたが…）
＝CGIQUERY_xxxxx＝と書いておけば、プログラムの方で何かに自動的に置き換えてくれます。

【ループ変数】
ループ変数は、2つの変数からなります。
ループの開始位置を指定する＝CGIQUERY_LOOP_xxxxx＝という形の変数と、ループの終了位置を指定する＝CGIQUERY_POOL_xxxxx＝という形の変数です。
ループの開始位置を指定する変数を「ループ開始変数」、ループの終了位置を指定する変数を「ループ終了変数」と呼びます。
（これも勝手に名づけましたが…）
ループ開始変数からループ終了変数の間に囲まれたものがプログラムで繰り返し処理されます。
例えば…

＝CGIQUERY_LOOP_kappa＝
かっぱ
＝CGIQUERY_POOL_kappa＝

としておけば、「かっぱ」という文字が繰り返し表示されるという仕組みです。

【 注　意 】
処理の都合上変数の一部(=)が全角になっていますがテンプレートファイルにはすべて半角で記述してください！！！

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編集ソフトはエライのでリンクを勝手に修正しちゃったりします。
せっかくの作業が水の泡です。
やっちゃった人は泣いてください。