http://www15.plala.or.jp/podcast/
こちらのサイトを作ったのですが、最近のブログにあるように、右側にカレンダーやRSS、最近のコメントなど。中央には日々更新される日記がくるといったように真ん中と右側にカテゴリ－を分けるにはどのようなことをすれば良いでしょうか？tableで指示をしていくのでしょうか？
又、日記をしていきたいのですが、お勧めはありますか？
このようなことが詳しく書かれた書籍、サイトがあれば教えて頂きたいです。
No.1
5402
215
40pt
テーブルで行ってもいいですが、
CSSを使って段組した方が融通が利いて便利です。
たとえば最も簡単な段組の例としては、
<head>～</head>間に、
90
85
<style type="text/css">
<!--
/* 3列左右サイドバー用 */
#main_contents{
margin: 6px 176px 0 176px;
}
/* 2列左サイドバー用 */
#main_contents2{
margin: 6px 6px 0 176px;
}
/* 2列右サイドバー用 */
#main_contents3{
margin: 6px 176px 0 6px;
}
/* 左サイトバー */
#sidebar_l{
position: absolute;
left: 0;
top: 6px;
width: 170px;
}
/* 右サイトバー */
#sidebar_r{
position:absolute;
right: 0;
top: 6px;
width:170px;
}
-->
</style>
とでも指定しておいて、<body>～</body>間で次のようにすれば
◆真ん中にメインコンテンツ、左右にサイドバーの3列構成、
<div id="main_contents"> ここにメインのコンテンツを記述 </div> <div id="sidebar_l"> ここに左サイドバーの内容を記述 </div> <div id="sidebar_r"> ここに右サイドバーの内容を記述 </div>
◆左サイドバーの2列構成、
<div id="main_contents2"> ここにメインのコンテンツを記述 </div> <div id="sidebar_l"> ここに左サイドバーの内容を記述 </div>
◆右サイドバーの2列構成、
<div id="main_contents3"> ここにメインのコンテンツを記述 </div> <div id="sidebar_r"> ここに左サイドバーの内容を記述 </div>
と、自由にレイアウトの変更が可能になります。
こうしてCSSで段組を指定すると、レイアウトの順番に関係なく
メインのコンテンツをソースの上に持ってこられますから、
SEO的にも有利なページが作れます。
さらに凝ったレイアウトなどの詳しいことは
↓このへんなどを参考にしてください。
http://desperadoes.biz/style/dan/index.php
日記については、はてなユーザーなら、はてなダイアリー
を利用するのが最も手軽ではないかと思います。
アフィリエイトを自由にやりたいとか、
テンプレートから何からフルカスタマイズしたい、
といった向きにはFC2ブログ
あたりがお勧めできると思います。
ブログと普通のサイトのCSSの内容を共通にしておいて、
普通のHTMLで書いていくサイトの方もそれに準拠して
見栄えの指定をCSSのみで行っていくように記述すると、
ブログとサイトのデザインを手軽に揃えられます。
No.2
10
15pt
日記を書きたいのであればBlogを作ってみてはどうでしょう？
はてなダイアリーを使った方が早いし楽ですよ。
どうしても自分で作りたいなら別ですが・・・。
んで、質問の回答↓
tableを使ってもいいですが、cssを使った方がいいですね。cssを理解していれば。
テーブルを利用するなら、こんな感じでしょうか？
<html>
<head>
<title></title>
</head>
<body>
| ヘッダ | ||||||
| 記事 |
|
|||||
| フッタ | ||||||
</body>
</html>
cssならメニューの部分を記事の横に並べるので、float:left;を使って回り込ませるのが良いのでは？
参考サイト
HTML
http://www.htmq.com/html/indexm.shtml
ｃｓｓ
http://www.htmq.com/style/index.shtml
ではでは、がんばってください。
ありがとうございます！参考になりました！
引き続き募集します。
No.3
5447
10pt
tableを使ってブログっぽく見せたいのなら
以下のテーブルを縦に伸ばせばそれっぽく見えると思います
ちょっとおおざっぱ過ぎますがｗ
| ● | ● | ● |
タグはこうです↓
<table border=1 width="100%"><tr><td>●</td><td width="55%">●</td><td>●</td></tr>
</table>
htmlについては↓を参考になさってください
http://www.tohoho-web.com/www.htm
日記はレンタルするのでしたら↓はどうでしょう？
No.4
8179131
5pt
http://www.sixapart.jp/movabletype/manual/3.2/mtmanual.html
http://www.sixapart.jp/movabletype/
このへんを参考になさってはどうでしょうか＾－＾
No.5
51010
30pt
こんな感じでしょうか?
<html>
<head>
<title>タイトル</title>
</head>
<body>
<table width="800px" border="0" align="center">
<tr>
<td width="80%" bgcolor="red">
左側です。
</td>
<td width="1%"> </td>
<td width="19%" bgcolor="blue">
右側です
</td>
</tr>
</table>
</body>
</html>
分かりやすく赤と青でエリアわけしてあります。背景色を消すにはbgcolor=""を消してください。（<td width="80%" bgcolor="red"> が <td width="80%">） widthを変えると枠の大きさなども調節できます。また、右と左の間に隙間を入れてあります。この隙間が不要な場合は<td width="1%"> </td>を消してください。
参考になれば幸いです。
なるほど！ありがとうございます！
2
1
1
大変詳しくありがとうございます。
非常に参考になりました。
引き続き他の方の意見も聞きたいので返信お待ちしています。