Blogのテンプレートとかスタイルシートとか その１１ [2008年10月12日(日)]
XV.仕上げ。
実は今まで我慢ならん事があったのです。
今は実験済みで希望位置に居座っていますが、画面上部のProfile,Biography,Blogのボタンの左、
ひまわり証券のロゴの位置がまったくもって気に入らなかったのです。
修正前はProfileのボタンのすぐ左にいたロゴですが、画面のデザイン的に、
ボタン３つは右寄せ、ひまわり証券のロゴは左寄せの方が美しい！
誰だってそう配置する。俺だってそう配置する。
なのにそうなってない。
こいつはメチャ許さんよなあぁぁぁぁ！
というわけで、仕方がないから自分でやりましょう。
以下、どうするとボタン右寄席、ロゴ左寄せで綺麗に表示できるか説明していきたいと思います。
１．方法模索
ボタン群を右寄せ、ロゴを左寄せとなるとそれぞれをチームわけしないといけない。
というのは漠然と想像できるかと思います。
となると、頭の中のイメージ的にTABLEタグを使えばできるかなー とか妄想できます。
１行２列で、各列にそれらをぶち込めばいいんじゃね？というわけです。
こういった格子模様的なチーム編成が必要な場合、なにはともあれTABLEです。
ちなみに、１矩形でも１行１列と見做してTABLEを使うのも全然ありです。
TABLEはできる子なので、とりあえずTABLEと考える位で丁度いいです。
２．<div id="btn">
テンプレートファイルを見ますと、ボタンとロゴは<div id="btn">で囲われている事が分ります。
つまり、ボタンやロゴの直近の親はこいつとなります。
id="btn"とある場合、スタイルシートで#btnという宣言が使用されます。
ではその宣言の内容を調べてみましょう。
#btn {
text-align:right; <- divで括った内容物は右寄せで表示
margin-right:8px; <- divの矩形の外右側に8dotの空白を作れ
}
上記の設定の為にボタン３つとロゴは全て右寄せに表示され、
その４つを囲う矩形の右側に8dotのスペースが空いて一番右のボタンがBlogの領域の右端に
ぺとーっとはっつかずに済んでいるわけです。
divは１矩形のみなので、このままではあかんというのは分ると思います。
かといって、これの中身を改造するにあたって、このままのスタイル宣言ではもちろん×です。
以下のように改変しましょう。
#btn {
width:100%; <- 横幅を直近の親と同じサイズにしろ(つまり980dot)
padding-left:8px; <- div矩形内の左端8dotには中身を表示するな
padding-right:8px; <- div矩形内の右端8dotには中身を表示するな
}
旧設定ではdivの横幅が明示されていませんでした。
故に、よく分らないけどdivの外右側8dotには何も書くなよ！とあったのですが。
これよりは
横幅は直近の親と同じサイズな！で中身の両端8dotには何も書くなよ！の方が
同じ結果でも理解しやすいし、中身を書くに当って便利というわけです。
右寄せ指定なんかも後で自分でやります。
とりあえずdivの改変はこれで問題ないでしょう。
３．実際にtableを組んでみる。
では実際にtableをどう組むか考えて見ましょう。
っていっても１行２列なんで何も悩む事はなし！
順をおっていきますね。
・まず親となるdivの中身にtableだけ書いてみましょう。
<div id="btn">
<table width="100%" cellpadding="0" cellspacing="0">
</table>
</div>
テーブルを作る際、デザインを主眼置いて考える場合、
'cellpadding="0" cellspacing="0"' この設定は必須だと考えてください。
これらはデフォルトだと値が入っているので扱い辛いです。
数ドットの違いですが、今やってる作業はそういったちょっとした違いが許せないから
やってるわけで、わざわざ新しい悩みの種を抱えることもありません。
横幅に100%が指定されていますが、このテーブルの直近の親はdivですね。
そのdivはそのまた親から100%指定で980dotになっているので、もちろんテーブルも
980dotとなります…と言いたい所ですが、divには左右8dot空けろと設定されているので、
実際は横幅＝(980 - 8x2)となります。
（少なくともIEでは。全ブラウザで綺麗に対応するのかは知りません）
・１行２列の設定を加えてみましょう。
<div id="btn">
<table width="100%" cellpadding="0" cellspacing="0">
<tr> <- １行目
<td> <- １列目(左の枠)
</td>
<td> <- ２列目(右の枠)
</td>
</tr>
</table>
</div>
１行なのでtrが１つ。２列なのでtdが２つ。
古い記事でtdはtrの子と書いた記憶がありますが、その為上のようになります。
・ボタンやロゴを埋め込んで見ましょう。
<div id="btn">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://spmax.jp/redirect/click_log.php?id=01881126000002" target="_blank"><IMG title=himawari src="/template/118/img/himawari.gif"></a>
</td>
<td align="right">
<a href="http://track-back.net/kourin/profile"><img src="/template/118/img/btn_profile.gif" title="profile"></a><a href="http://track-back.net/kourin/biography"><img src="/template/118/img/btn_bio.gif" title="biography"></a><a href="http://track-back.net/kourin/"><img src="/template/118/img/btn_blog.gif" title="blog"></a>
</td>
</tr>
</table>
</div>
元々の設定の最初のaタグで囲まれたのがロゴ。これを１つめのtd、残りを２つめのtdへ。
２つめのtdに右寄せの指定が付加されました。
なんでかっつーと、tdはほっておくとデフォルトでは左寄せだからです。
つまり１つめのtdは暗黙で左寄せするので態々宣言しないでOK。
でも２つめはそうも行かないのできちんと設定してるわけです。
これで完了。
結果はそれなりに大きくなりましたが、順を追って考えれば難しい事はありません。
今回は今までと違い、タグを追加して構成を変えたりスタイルを変更したりしました。
大きなテンプレートの変更を考える際は、自分がどうしたいというイメージに基づいて
大枠から１段１段落とし込んでいくと迷いが少なくなってタグの構築、把握がし易くなります。
今までの説明で分るとおり、htmlのデザインの基本は矩形の組合せです。
矩形同士の親子兄弟関係、またそれらがお互いにどう影響しあってるかは、
実質的なソースやツール上でのデザイン作業において大きなファクターとなります。
(paddingやmarginがやっている事を見ればよく分ると思います)
テンプレートを改変する際は、そこら辺気をつけると修正しやすいと言えますね。
では、これで"Blogのテンプレートとかスタイルシートとか"シリーズは終了です。
結構突っぱねてる所もありましたが、大体調べれば言ってる意味は分かると思いますので
もし、これらのシリーズ記事を参考にしてテンプレート修正に臨む際は
わからん所があってもそれを調べて噛み砕く位のつもりで頑張ってください。
これで横幅広げる人が増えるといいなぁ
実は今まで我慢ならん事があったのです。
今は実験済みで希望位置に居座っていますが、画面上部のProfile,Biography,Blogのボタンの左、
ひまわり証券のロゴの位置がまったくもって気に入らなかったのです。
修正前はProfileのボタンのすぐ左にいたロゴですが、画面のデザイン的に、
ボタン３つは右寄せ、ひまわり証券のロゴは左寄せの方が美しい！
誰だってそう配置する。俺だってそう配置する。
なのにそうなってない。
こいつはメチャ許さんよなあぁぁぁぁ！
というわけで、仕方がないから自分でやりましょう。
以下、どうするとボタン右寄席、ロゴ左寄せで綺麗に表示できるか説明していきたいと思います。
１．方法模索
ボタン群を右寄せ、ロゴを左寄せとなるとそれぞれをチームわけしないといけない。
というのは漠然と想像できるかと思います。
となると、頭の中のイメージ的にTABLEタグを使えばできるかなー とか妄想できます。
１行２列で、各列にそれらをぶち込めばいいんじゃね？というわけです。
こういった格子模様的なチーム編成が必要な場合、なにはともあれTABLEです。
ちなみに、１矩形でも１行１列と見做してTABLEを使うのも全然ありです。
TABLEはできる子なので、とりあえずTABLEと考える位で丁度いいです。
２．<div id="btn">
テンプレートファイルを見ますと、ボタンとロゴは<div id="btn">で囲われている事が分ります。
つまり、ボタンやロゴの直近の親はこいつとなります。
id="btn"とある場合、スタイルシートで#btnという宣言が使用されます。
ではその宣言の内容を調べてみましょう。
#btn {
text-align:right; <- divで括った内容物は右寄せで表示
margin-right:8px; <- divの矩形の外右側に8dotの空白を作れ
}
上記の設定の為にボタン３つとロゴは全て右寄せに表示され、
その４つを囲う矩形の右側に8dotのスペースが空いて一番右のボタンがBlogの領域の右端に
ぺとーっとはっつかずに済んでいるわけです。
divは１矩形のみなので、このままではあかんというのは分ると思います。
かといって、これの中身を改造するにあたって、このままのスタイル宣言ではもちろん×です。
以下のように改変しましょう。
#btn {
width:100%; <- 横幅を直近の親と同じサイズにしろ(つまり980dot)
padding-left:8px; <- div矩形内の左端8dotには中身を表示するな
padding-right:8px; <- div矩形内の右端8dotには中身を表示するな
}
旧設定ではdivの横幅が明示されていませんでした。
故に、よく分らないけどdivの外右側8dotには何も書くなよ！とあったのですが。
これよりは
横幅は直近の親と同じサイズな！で中身の両端8dotには何も書くなよ！の方が
同じ結果でも理解しやすいし、中身を書くに当って便利というわけです。
右寄せ指定なんかも後で自分でやります。
とりあえずdivの改変はこれで問題ないでしょう。
３．実際にtableを組んでみる。
では実際にtableをどう組むか考えて見ましょう。
っていっても１行２列なんで何も悩む事はなし！
順をおっていきますね。
・まず親となるdivの中身にtableだけ書いてみましょう。
<div id="btn">
<table width="100%" cellpadding="0" cellspacing="0">
</table>
</div>
テーブルを作る際、デザインを主眼置いて考える場合、
'cellpadding="0" cellspacing="0"' この設定は必須だと考えてください。
これらはデフォルトだと値が入っているので扱い辛いです。
数ドットの違いですが、今やってる作業はそういったちょっとした違いが許せないから
やってるわけで、わざわざ新しい悩みの種を抱えることもありません。
横幅に100%が指定されていますが、このテーブルの直近の親はdivですね。
そのdivはそのまた親から100%指定で980dotになっているので、もちろんテーブルも
980dotとなります…と言いたい所ですが、divには左右8dot空けろと設定されているので、
実際は横幅＝(980 - 8x2)となります。
（少なくともIEでは。全ブラウザで綺麗に対応するのかは知りません）
・１行２列の設定を加えてみましょう。
<div id="btn">
<table width="100%" cellpadding="0" cellspacing="0">
<tr> <- １行目
<td> <- １列目(左の枠)
</td>
<td> <- ２列目(右の枠)
</td>
</tr>
</table>
</div>
１行なのでtrが１つ。２列なのでtdが２つ。
古い記事でtdはtrの子と書いた記憶がありますが、その為上のようになります。
・ボタンやロゴを埋め込んで見ましょう。
<div id="btn">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://spmax.jp/redirect/click_log.php?id=01881126000002" target="_blank"><IMG title=himawari src="/template/118/img/himawari.gif"></a>
</td>
<td align="right">
<a href="http://track-back.net/kourin/profile"><img src="/template/118/img/btn_profile.gif" title="profile"></a><a href="http://track-back.net/kourin/biography"><img src="/template/118/img/btn_bio.gif" title="biography"></a><a href="http://track-back.net/kourin/"><img src="/template/118/img/btn_blog.gif" title="blog"></a>
</td>
</tr>
</table>
</div>
元々の設定の最初のaタグで囲まれたのがロゴ。これを１つめのtd、残りを２つめのtdへ。
２つめのtdに右寄せの指定が付加されました。
なんでかっつーと、tdはほっておくとデフォルトでは左寄せだからです。
つまり１つめのtdは暗黙で左寄せするので態々宣言しないでOK。
でも２つめはそうも行かないのできちんと設定してるわけです。
これで完了。
結果はそれなりに大きくなりましたが、順を追って考えれば難しい事はありません。
今回は今までと違い、タグを追加して構成を変えたりスタイルを変更したりしました。
大きなテンプレートの変更を考える際は、自分がどうしたいというイメージに基づいて
大枠から１段１段落とし込んでいくと迷いが少なくなってタグの構築、把握がし易くなります。
今までの説明で分るとおり、htmlのデザインの基本は矩形の組合せです。
矩形同士の親子兄弟関係、またそれらがお互いにどう影響しあってるかは、
実質的なソースやツール上でのデザイン作業において大きなファクターとなります。
(paddingやmarginがやっている事を見ればよく分ると思います)
テンプレートを改変する際は、そこら辺気をつけると修正しやすいと言えますね。
では、これで"Blogのテンプレートとかスタイルシートとか"シリーズは終了です。
結構突っぱねてる所もありましたが、大体調べれば言ってる意味は分かると思いますので
もし、これらのシリーズ記事を参考にしてテンプレート修正に臨む際は
わからん所があってもそれを調べて噛み砕く位のつもりで頑張ってください。
これで横幅広げる人が増えるといいなぁ