| BBS | COMMENT | TRACKBACK | CATEGORY | LINKS | ARCHIVE | GALLERY |
TOTAL PV
3カラム化…
あとで読むはてなブックマーク - 3カラム化… | 2004年05月17日(月) | 6 | 2 | 記事編集
そもそも『3カラム』って言葉自体知らなかったんですけど…爆
BlogPeopleやらリンク増やしたりするウチに、益々ページが長くなりつつあったんで…
リスト類を左右に振り分けて真ん中に記事表示させるようにしました。。
後にそれが『3カラム』だって事を知る事になったりするんですが
(^▽^;
んでは、そのやり方について簡単に(?)説明してみますです。。 説明する前に…
基となるテンプレートは、ひいろんの使用した『cutout』です。
ま、内容的にはどのテンプレートでも同じ様なモノとして見てもらって良いと思いますです☆
あと、ひいろんの方法はテーブルタグの組み合わせによるモノなんで、テーブルタグについてある程度の知識があったほうが理解しやすいと思います☆
(ま、ご希望があるようなら、その辺も追加説明しますけど…ね)
とりあえずデフォルトの基本構成から…
テーブル的には上・中・下となっており、
上にタイトルとサーチ
中に記事とリスト
下にcopyrightとTOPへのリンク
って感じになってます。。
(ちなみに太い線がテーブル・細い線はセル)
┏━━━━━━━━━━┓
┃タイトル │サーチ ┃
┣━━━━━━━━━━┫
┃  記事 │リスト ┃
┣━━━━━━━━━━┫
┃copyright │top   ┃
┗━━━━━━━━━━┛
んでもってソース
<!--HEAD-->
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>

<!-- BEGIN title -->
<td width="470">
【タイトル】
</td>
<!-- END title -->

<!--search-->
<td width="230">
【サーチ】
</td>

</tr>
</table>

<!--BODY-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="contents">

<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">
<tr valign="top">

<td width="400">
【記事】
</td>
<!--right side-->
<td width="300">
【リスト】
</td>
</tr>
</table>

</td>
</tr>
</table>

<!--foot-->

<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">
<tr valign="top">
<td width="470" class="copyright">
【Copyright】
</td>
<td width="230">
【TOPへのリンク】
</td>
</tr>
</table>

そこで、上のテーブルをいじって下の様に変えてあげればOKっす♪
┏━━━━━━━━━━┓
┃タイトル │サーチ ┃
┣━━━━━━━━━━┫
┃リスト│記事│リスト┃
┣━━━━━━━━━━┫
┃copyright │top   ┃
┗━━━━━━━━━━┛
っつ〜事で、上と下のテーブルはいじらずに、中間のテーブル(セル)を増やしてあげれば良いわけです☆

細かい調整しなくてはなりませんが…
手っ取り早く3カラムスタイルにするならリストのセル部分を丸々コピー&ペーストしてみましょう。。
んで、左右どちらかにリストを振り分ければOKっす。。

以下ソース(中間のテーブルのソース)
<!--BODY-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="contents">

<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">
<tr valign="top">

<td width="150">
【リスト左】
</td>

<td width="400">
【記事】
</td>

<!--right side-->

<td width="150">
【リスト右】
</td>

</tr>
</table>

</td>
</tr>
</table>

<!--foot-->

解りやすいようにテーブル幅はそのままでセル幅150に分割してあります。。
見ての通り
<td width="150">
【リスト右】
</td>

をコピーして
<td width="400">
【記事】
</td>

の前にペーストしただけで3カラムの出来上がり♪
…説明簡単すぎたかな?
もしも3カラムに挑戦したい方いましたら何なりと質問を…
…ひいろんの解る範囲でお答えしますね
(^▽^
2004年05月17日(月) 22:46 | ネット > 改造メモ | 6 | 2 | 記事編集
  • コメント[6]
  • Facebookコメント
  • はてブコメント
  • blogcircleコメント
comment by: shun
また、3ペインといいます
3コラムといってもいいのですが流行ってません
「コラムを書く人」のコラムと同語です
 
2004年05月18日(火) 22:18
comment by: ひいろん
[shunさん]
はじめましてです♪
コメントありがと〜ございますです。。。

おお☆
『3ペイン』ですか?
勉強になりますな☆
んぢゃ、日本人らしく(?)3分割化…とでもしてみよ〜かな?…爆
 
2004年05月18日(火) 22:49
comment by: わかちょ
なるほど…テーブルタグでセルを3分割した訳ですか〜。
私にも出来そうな気がします。

テーブルタグなら使い慣れております。
角丸(画像なし)で全体を囲んで、その中にセル3分割テーブルのタグを書くというのは…。角丸Tのタグが重杉鴨。

サイトリヌを考えておりますので、現在製作したWebページ用HTMLテンプレートをすぐに発表できずにいます。ってか新しい自サイトのデザインを考えながらいくつか作成してみたトコでし。
 
2004年05月29日(土) 03:30
comment by: ひいろん
[わかちょ]
角丸テーブル拝見しましたが…
たしかに面倒かも(^^;
画像の方が楽な気がしますです☆
っと、サイトリニューアルですか?
新テンプレート楽しみですな
(^▽^
 
2004年05月29日(土) 13:47
comment by: 京極恭輔
ひいろんさん
初めまして。
カッコいいページですね。メインタイトルとかリンクタイトルとかは画像ですよね。
あと、コメントやカテゴリーのところも開いたり閉じたりするんですね。
一瞬何気ないページに見えますがかなり凝っているんですね。
良かったらもう少し詳しく改造の過程を紹介していただけませんか?
 
2004年06月12日(土) 23:22
comment by: ひいろん
[京極恭輔さん]
はじめましてです☆

>メインタイトルとかリンクタイトルとかは画像ですよね。
はい、一応自作の画像になってますです。。

>コメントやカテゴリーのところも開いたり閉じたりするんですね。
こちらは『ふろむにぅじぃ』さんのスクリプトお借りしてます☆

>良かったらもう少し詳しく改造の過程を紹介していただけませんか?
んと…
一応ここまでの改造に関しては『改造メモ』のカテゴリーで見てもらえば説明してあったりするんで、良かったらそちらを参考にしてみてくだされ♪
もしも解らない事なんかあればお答えしますよん
(^▽^

参考までに…
リンク貼っておきますです。。。

【リンクリストの画像について】
http://hiiron.jugem.cc/?eid=38

【リストの折り畳みについて】
http://hiiron.jugem.cc/?eid=41
 
2004年06月13日(日) 18:02
コメントする

icons:

 
トラックバック
slo-review BLOG
3ペイン化とかjavascript組み直してみたりとかいろいろ
昨日負けた腹いせ?と、期待した今日の新装が北斗の増台だったため見送ったアールです。 さて、今日もこのサイトをいろいろいじくってみましたさ。 1. 3ペイン化 + ひいろんBLOG +さんの3カラム化…に触発されて、このサイトも3つに分けようと思い作業開始。 とこ
2004年05月18日(火) 23:05
siesta**blog
改造〜!
blogのこともあんまり良く分かってないけど、他所様のサイトを巡っていると色々といじりたくなりまして・・・
2004年05月20日(木) 01:23
ランキング参加中:応援(クリック)よろしくお願いします
  ブログランキング・にほんブログ村へ ブログ王ランキングに参加中! .*:゚(・ω・人)゚:*.
【ネット > 改造メモ】の最新記事
FaceBookページ応援よろしくおねがいします〜(^▽^
ひいろん
  • 【ひいろん】
  • 性別:おっさん
  • 住所:静岡県
  • 愛車:400R