ホームページ初心者です。

http://www15.plala.or.jp/podcast/
こちらのサイトを作ったのですが、最近のブログにあるように、右側にカレンダーやRSS、最近のコメントなど。中央には日々更新される日記がくるといったように真ん中と右側にカテゴリ-を分けるにはどのようなことをすれば良いでしょうか?tableで指示をしていくのでしょうか?
又、日記をしていきたいのですが、お勧めはありますか?
このようなことが詳しく書かれた書籍、サイトがあれば教えて頂きたいです。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/08/01 18:09:12
  • 終了:2006/08/02 12:48:34

回答(5件)

id:TomCat No.1

TomCat回答回数5402ベストアンサー獲得回数2152006/08/01 19:09:06

ポイント40pt

テーブルで行ってもいいですが、

CSSを使って段組した方が融通が利いて便利です。

たとえば最も簡単な段組の例としては、

<head>~</head>間に、

<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

 

日記については、はてなユーザーなら、はてなダイアリー

http://d.hatena.ne.jp/

を利用するのが最も手軽ではないかと思います。

 

アフィリエイトを自由にやりたいとか、

テンプレートから何からフルカスタマイズしたい、

といった向きにはFC2ブログ

http://blog.fc2.com/

あたりがお勧めできると思います。

 

ブログと普通のサイトのCSSの内容を共通にしておいて、

普通のHTMLで書いていくサイトの方もそれに準拠して

見栄えの指定をCSSのみで行っていくように記述すると、

ブログとサイトのデザインを手軽に揃えられます。

id:akakak

大変詳しくありがとうございます。

非常に参考になりました。

引き続き他の方の意見も聞きたいので返信お待ちしています。

2006/08/01 19:38:21
id:wagao55 No.2

wagao55回答回数1ベストアンサー獲得回数02006/08/01 19:25:03

ポイント15pt

日記を書きたいのであればBlogを作ってみてはどうでしょう?

はてなダイアリーを使った方が早いし楽ですよ。

どうしても自分で作りたいなら別ですが・・・。

んで、質問の回答↓

tableを使ってもいいですが、cssを使った方がいいですね。cssを理解していれば。

テーブルを利用するなら、こんな感じでしょうか?

<html>

<head>

<title></title>

</head>

<body>

ヘッダ
記事

メニュー
メニュー
メニュー
メニュー
メニュー
フッタ

</body>

</html>

cssならメニューの部分を記事の横に並べるので、float:left;を使って回り込ませるのが良いのでは?


参考サイト

HTML

http://www.htmq.com/html/indexm.shtml

css

http://www.htmq.com/style/index.shtml


ではでは、がんばってください。

id:akakak

ありがとうございます!参考になりました!

引き続き募集します。

2006/08/01 20:06:40
id:honey_orange No.3

honey_orange回答回数544ベストアンサー獲得回数72006/08/01 20:21:19

ポイント10pt

tableを使ってブログっぽく見せたいのなら

以下のテーブルを縦に伸ばせばそれっぽく見えると思います

ちょっとおおざっぱ過ぎますがw



タグはこうです↓

<table border=1 width="100%">

<tr><td>●</td><td width="55%">●</td><td>●</td></tr>

</table>


htmlについては↓を参考になさってください

http://www.tohoho-web.com/www.htm


日記はレンタルするのでしたら↓はどうでしょう?

http://www.bigcosmic.com/board/index.shtml

id:aiaina No.4

aiaina回答回数8179ベストアンサー獲得回数1312006/08/01 21:02:19

ポイント5pt

http://t.web5.jp/

http://www.sixapart.jp/movabletype/manual/3.2/mtmanual.html

http://www.sixapart.jp/movabletype/

このへんを参考になさってはどうでしょうか^-^

id:esecua No.5

esecua回答回数510ベストアンサー獲得回数102006/08/02 01:26:06

ポイント30pt

こんな感じでしょうか?

<html>

<head>

<title>タイトル</title>

</head>

<body>

<table width="800px" border="0" align="center">

<tr>

<td width="80%" bgcolor="red">

左側です。

</td>

<td width="1%">&nbsp;</td>

<td width="19%" bgcolor="blue">

右側です

</td>

</tr>

</table>

</body>

</html>

分かりやすく赤と青でエリアわけしてあります。背景色を消すにはbgcolor=""を消してください。(<td width="80%" bgcolor="red"> が <td width="80%">) widthを変えると枠の大きさなども調節できます。また、右と左の間に隙間を入れてあります。この隙間が不要な場合は<td width="1%">&nbsp;</td>を消してください。

参考になれば幸いです。

http://www.hatena.ne.jp/

id:akakak

なるほど!ありがとうございます!

2006/08/02 12:47:32

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません