Blogのテンプレートとかスタイルシートとか その５ [2008年08月24日(日)]
また数日間が空きましたが…
今回は体調不良が続いて色々ヤル気が起きなかったり…
まぁ、今も調子悪いわけですが、Program組むか寝てるだけなのも飽きたので…。
前回、次はtable, a, image かなぁとか書いたので、
そこらへんを書こうかなと思います。
V.格子の親<table>
はい最初は<table>です。
格子…読めますよね、"こうし"です。
このタグは格子状の表を構築する際に使用します。
四角く領域確保するならこの前の<div>でやればいいじゃない？
と思ったあなた、鋭い。それも間違ってはいません。
改行の問題とかぬきにして、単に１つの四角領域を作りたい…
というならそれも１つの選択肢です。
しかし…このタグにしか出来ない事もあるというわけで、
このタグは上に書いたように格子状態…縦横に四角が並ぶ…を作る為にあります。
OfficeのExcelや、OpenOfficeのCalcなんかをイメージしてもらうと分り易いと思います。
行と列の四角の連鎖、あれですね。そしてそれら表計算ソフトの格子と同じく、
それぞれの格子の中に文字列を入れる事ができます。
(流石に関数やマクロは入れられません)
流石にこのタグのみで行列は作れないため、<table>タグは幾つかの子供を持ちます。
行の管理をする<tr></tr>
列の管理をする<td></td><th></th>
各列の状態を事前に宣言する為の<colgroup></colgroup>と<col>
表のヘッダーを宣言する<thead></thead>
表のフッターを宣言する<tfoot></tfoot>
表の本体を宣言する<tbody></tbody>
ですがまぁ、最後の４つは余り使われませんね。
全部使わなくても自分でどうにかできるものですし…。
親子関係的にはこんな感じですね。
マイナーなのは省きます。
<table>
<tr>
<th></th><th></th><th></th>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
これで２行３列の表が作成されます。
<td>や<th>で囲んだ中に表示したい情報を書くわけですが、
この中に更に<table>を入れ込んでいく事も可能です。
勘のいい人はそろそろ気が付くと思いますが、
<div>や<table>の仕様から見て取れる通り、Homepageのデザインの基本は、
これらのタグで四角の領域を如何に自分の思い描いた形に並べるかとなります。
大雑把に四角で区切っていき、その中を細かく見ていく…という感じ。
積み木あたりの方がイメージしやすいですかね？
実際は、各タグにつけたパラメータによって相互に影響しあい、
思った通りの結果にならなくて微調整…なんか普通に起きるわけですが…。
まぁ、<table>の場合、内容に従ってテーブルの幅とかを自動変更するな。
という命令があったりするので少し楽ですけど。
（その変わり細々指定しないと思った通りに表示されないデメリットもある）
ちなみに、Trackback-Blogのテンプレートですと余り頻繁には登場しませんが、
分り易い所だと、カレンダー表示の部分はこのタグの産物となっています。
うちの記事ですと、過去の世界樹のキャラクター表や、カオスシードのCDトラック
の紹介なんかで使っていますね。
表をイメージした描画を行う際は何かとお世話になるタグです。
使えるようになるとちょっとした表を見やすく綺麗に表示できますので、
覚えて損のないタグですね。
VI.リンク<a>
余り自分で使っているイメージがなくとも、Blogテンプレートではこれでもか
という位に頻繁に出力されるタグです。
主な機能は３つ。
１．他のページに飛ぶ。
２．ページ内の指定された場所に飛ぶ。
３．２の飛び先を作成する。
これだけ。
Blogの記事やコメント記入の際の鎖マークが実装する機能なので、
余り意識せずとも使っている人は多いと思います。
個人的には、他人にTrackBackを張る時はその記事で使って貰いたいタグですね。
まぁ、そこらへんは好き好きなんでしょうが。
ちなみに、特定のファイルにリンクを張ると、そのファイル種類によって
勝手に各種アクションが実行されたりします。
ファイルのダウンロード保存をしたり、新しくブラウザやアプリを起動して
ファイルの内容を表示してみたり…。
VII.自分でもできる<img>
このタグの仕事は名前の通り。
イメージ画像をその部分に表示することです。
表示する際のサイズを指定できたりするので、1024x768の画像を指定して、
320x240で表示しろと設定すると自動的に拡大縮小計算をしてくれます。
Blogテンプレート的には大体必要なパーツの表示は勝手にやってくれるので
（大掛かりな改造ではなく、既存のものを流用する場合はですが）
特に意識する必要はないのですが、Blog記事で沢山絵を張りたい…
とかなるとこれの出番になります。
Trackback-Blogでは１つの記事に使えるイメージの数、
また１イメージあたりの容量が決まっているので、沢山の枚数、
容量的に大きなイメージの表示はできません。
が
そこはそれ、あくまでTrackback-Blogのサーバーに置けない…
というだけで、イメージの表示に使われる<img>タグには
本来そんな制約は一切ありません。
つまり、自分で別途homepageを持ってる人、自作サーバーを建ててる人
なんかはそこにファイルを置いて、<img>タグに参照させれば
もう何枚だって画像を表示する事が可能です。
ただし、これ全部htmlで記事書くモードにしないといけないんですけどね。
まぁ、知っておいて損がないとは思います。
ちなみに、<img>タグを使用せずとも、
スタイルシートの背景画像の設定機能を使うと絵を表示できます。
ただ、ちょっと<img>タグとは使い方が違うので注意です。
以上３つのタグの紹介。
これで、主だったのは紹介できましたかね。
次からは、自分がisaoの既存のBlogテンプレートを拝借して改造する時の
手順を紹介していきたいと思います。
2008/08/31
<image>を<img>に変更 仕事でもよく間違えるんですよね…これ
今回は体調不良が続いて色々ヤル気が起きなかったり…
まぁ、今も調子悪いわけですが、Program組むか寝てるだけなのも飽きたので…。
前回、次はtable, a, image かなぁとか書いたので、
そこらへんを書こうかなと思います。
V.格子の親<table>
はい最初は<table>です。
格子…読めますよね、"こうし"です。
このタグは格子状の表を構築する際に使用します。
四角く領域確保するならこの前の<div>でやればいいじゃない？
と思ったあなた、鋭い。それも間違ってはいません。
改行の問題とかぬきにして、単に１つの四角領域を作りたい…
というならそれも１つの選択肢です。
しかし…このタグにしか出来ない事もあるというわけで、
このタグは上に書いたように格子状態…縦横に四角が並ぶ…を作る為にあります。
OfficeのExcelや、OpenOfficeのCalcなんかをイメージしてもらうと分り易いと思います。
行と列の四角の連鎖、あれですね。そしてそれら表計算ソフトの格子と同じく、
それぞれの格子の中に文字列を入れる事ができます。
(流石に関数やマクロは入れられません)
流石にこのタグのみで行列は作れないため、<table>タグは幾つかの子供を持ちます。
行の管理をする<tr></tr>
列の管理をする<td></td><th></th>
各列の状態を事前に宣言する為の<colgroup></colgroup>と<col>
表のヘッダーを宣言する<thead></thead>
表のフッターを宣言する<tfoot></tfoot>
表の本体を宣言する<tbody></tbody>
ですがまぁ、最後の４つは余り使われませんね。
全部使わなくても自分でどうにかできるものですし…。
親子関係的にはこんな感じですね。
マイナーなのは省きます。
<table>
<tr>
<th></th><th></th><th></th>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
これで２行３列の表が作成されます。
<td>や<th>で囲んだ中に表示したい情報を書くわけですが、
この中に更に<table>を入れ込んでいく事も可能です。
勘のいい人はそろそろ気が付くと思いますが、
<div>や<table>の仕様から見て取れる通り、Homepageのデザインの基本は、
これらのタグで四角の領域を如何に自分の思い描いた形に並べるかとなります。
大雑把に四角で区切っていき、その中を細かく見ていく…という感じ。
積み木あたりの方がイメージしやすいですかね？
実際は、各タグにつけたパラメータによって相互に影響しあい、
思った通りの結果にならなくて微調整…なんか普通に起きるわけですが…。
まぁ、<table>の場合、内容に従ってテーブルの幅とかを自動変更するな。
という命令があったりするので少し楽ですけど。
（その変わり細々指定しないと思った通りに表示されないデメリットもある）
ちなみに、Trackback-Blogのテンプレートですと余り頻繁には登場しませんが、
分り易い所だと、カレンダー表示の部分はこのタグの産物となっています。
うちの記事ですと、過去の世界樹のキャラクター表や、カオスシードのCDトラック
の紹介なんかで使っていますね。
表をイメージした描画を行う際は何かとお世話になるタグです。
使えるようになるとちょっとした表を見やすく綺麗に表示できますので、
覚えて損のないタグですね。
VI.リンク<a>
余り自分で使っているイメージがなくとも、Blogテンプレートではこれでもか
という位に頻繁に出力されるタグです。
主な機能は３つ。
１．他のページに飛ぶ。
２．ページ内の指定された場所に飛ぶ。
３．２の飛び先を作成する。
これだけ。
Blogの記事やコメント記入の際の鎖マークが実装する機能なので、
余り意識せずとも使っている人は多いと思います。
個人的には、他人にTrackBackを張る時はその記事で使って貰いたいタグですね。
まぁ、そこらへんは好き好きなんでしょうが。
ちなみに、特定のファイルにリンクを張ると、そのファイル種類によって
勝手に各種アクションが実行されたりします。
ファイルのダウンロード保存をしたり、新しくブラウザやアプリを起動して
ファイルの内容を表示してみたり…。
VII.自分でもできる<img>
このタグの仕事は名前の通り。
イメージ画像をその部分に表示することです。
表示する際のサイズを指定できたりするので、1024x768の画像を指定して、
320x240で表示しろと設定すると自動的に拡大縮小計算をしてくれます。
Blogテンプレート的には大体必要なパーツの表示は勝手にやってくれるので
（大掛かりな改造ではなく、既存のものを流用する場合はですが）
特に意識する必要はないのですが、Blog記事で沢山絵を張りたい…
とかなるとこれの出番になります。
Trackback-Blogでは１つの記事に使えるイメージの数、
また１イメージあたりの容量が決まっているので、沢山の枚数、
容量的に大きなイメージの表示はできません。
が
そこはそれ、あくまでTrackback-Blogのサーバーに置けない…
というだけで、イメージの表示に使われる<img>タグには
本来そんな制約は一切ありません。
つまり、自分で別途homepageを持ってる人、自作サーバーを建ててる人
なんかはそこにファイルを置いて、<img>タグに参照させれば
もう何枚だって画像を表示する事が可能です。
ただし、これ全部htmlで記事書くモードにしないといけないんですけどね。
まぁ、知っておいて損がないとは思います。
ちなみに、<img>タグを使用せずとも、
スタイルシートの背景画像の設定機能を使うと絵を表示できます。
ただ、ちょっと<img>タグとは使い方が違うので注意です。
以上３つのタグの紹介。
これで、主だったのは紹介できましたかね。
次からは、自分がisaoの既存のBlogテンプレートを拝借して改造する時の
手順を紹介していきたいと思います。
2008/08/31
<image>を<img>に変更 仕事でもよく間違えるんですよね…これ