最強?無料Seesaaブログで簡単にホームページ作成!

目次
■初めての方は、「まずはじめに」の後に、トップページをご覧下さい。お勧め記事を集めました!
  その後は、ご自分の好きなところを読まれて大丈夫です。
トップまずはじめにブログ入門編Seesaa活用方法基本的な使い方SeesaaカスタマイズQ&Aお問い合せ
ランキングCSSHTMLアフィリエイトおすすめ本便利フリーソフトブログ紹介資産運用精神論足跡
Topスタイルシート(CSS)>Seesaaブログで2カラムを3カラムにする方法

■Seesaaブログで2カラムを3カラムにする方法

スポンサードリンク

Seesaaブログを使われている皆さん、2カラム(左or右サイドバー+メイン)3カラム(左右サイドバー+メイン)どちら使われていますか?

ちなみに私のブログは、2カラムですね。

そして、私のもう一つのブログは、トップ、カテゴリ、過去ログは、3カラムで、記事ページだけ2カラムにしています。

こういう使い方している人は、少ないと思いますが、私は、記事ページだけは、広く使いたかったのでこのようにしました。

このやり方は、「記事ページだけ2カラムから3カラムにしてみよう!」に詳しく書いてあるので、もしそのような使い方をしたい方は、参考にして下さい。

話を戻して、3カラムにする方法を説明していきます。

Seesaaブログ にはもう登録した?

分からない部分がありましたら、遠慮なく言ってください。

但し、何度も言っておりますが、Seesaaカスタマイズに関しては、自己責任でお願いします。

スタイルシートの編集をするときは、メモ帳などにバックアップを取っておきましょう。

ブログサービスの大手のlivedoorブログでは、3カラムテンプレートは、ないらしいのですが、Seesaaブログには、最初からいくつか用意されています。

しかし、3カラムのテンプレートより2カラムのテンプレートのデザインの方がいいって時ありませんか?

そんな時は、CSSを編集して自分で2カラムから3カラムにしちゃいましょう!

スタイルシートの編集方法は、「ブログのデザインを決めるCSS(スタイルシ−ト)の設定方法」を参考にして下さい。

それでは、どこを編集していくか説明します。

以下の設定が終わった後なら、コンテンツの追加で左右のサイドバーを選択しても大丈夫です。

今回編集するのは、以下の4つのセレクタです。

セレクタについてよく分からない人は、

「CSS(スタイルシート)の基本その1〜セレクタについて〜」

「CSSを編集してページの基本設定をしてみよう!」を参考にして下さい。

  1. container=以下の部品を入れる箱だと思ってください。(テンプレートによってはないものもあるかもしれません。)
  2. content=記事全体
  3. links-left=左サイドバー
  4. links=右サイドバー
containerについては、ない人がいるかもしれませんので、ない方は追加してください。

それでは、具体的に説明していきます。

1.container(すべての要素を入れる箱)の説明です。
#container {
width:800px;
margin:0px;
padding: 0px;
background:#FFC;
text-align:left;
}
widthは、幅です。サイズ設定を必ずするようにして下さい。

この値を増やせばもっと幅が広くなりますが、ブラウザでお気に入りをサイドバーにだして、閲覧している方には、はみ出して表示されてしまうので、できるだけ800px以内で設定するのがいいと思います。

2.content(メイン部分)の説明です。
#content {
margin-bottom:30px;
margin-top:0px;
margin-left:5px;
margin-right: 0px;
float:left;
width:400px;
}
contentについては、marginをbottom、top、left、rightそれぞれについて、設定しています。

float:left;にする事で、contentが、左サイドバーの下に落ちる事を防いでいます。

widthは、幅の指定です。

指定は、%、pxでもどちらでもいいです。自分の好きな大きさに設定してください。

但し、containerの設定をしていない人が、この設定を%ですると、最大化したときは、その画面に対する割合になるので、自分の想定していない状況になる事があります。

注意してください。


3.links-left(左サイドバー)
#links-left {
font-weight:bold;
width:180px;
float:left;
margin-right: 5px;
margin-top:0px;
}
私は、フォントの設定に、bold(太字)を用いていますが、特にこの設定は、しなくてもいいと思います。

詳しくは、フォントに関わる物を参考にしてください。

widthは、先ほどのcontentと同様に%、px、どちらでも構いません。

赤字で示している「float:left;」は、必ず設定するようにして下さい。

marginについても、自分の好きなように設定してください。

4.links(右サイドバーの設定)の説明です。
#links {
font-weight:normal;
width:180px;
float:left;
margin-left: 5px;
margin-right: 5px;
margin-top:25px; }
links-left(左サイドバー)同様自分の好きなように設定してください。

赤字で示している「float:left;」は、必ず設定するようにして下さい。


すべての設定が終わったら、すべて再構築してください。


この設定が終わった後なら、コンテンツの追加で左右のサイドバーを選択しても大丈夫です。


それでは、皆さん頑張ってやってみてください。

分からない時は、コメントお願いします。その際は、自分のブログのリンクを名前に貼る事を忘れずに!

役に立ったら応援クリック!これからも頑張ります!

ブログは読むだけでも楽しいですが、自分で作るともっと楽しくなること間違いなし。登録はこちらから簡単にできます→→ Seesaaブログ
スポンサードリンク

最後まで、読んで頂いてありがとうございます。お気に入りに追加してくれたら嬉しいです。
→→

RSSをRSSリーダーに登録しても便利だと思います。

■人気記事ベスト5
トラックバック、コメントをする時の注意
コメントする時、ブログを持っている方はできるだけホームページアドレスを書いて頂きたいです。みんながどんな風にブログを使っているか知りたいです。宜しくお願いします。
特に、質問される方は、名前に自分のブログのリンク貼ってください。
リンクがない場合は、基本的に返事をしないつもりです。私一人で運営しておりますので、ご理解の程よろしくお願いします。

当サイトでは「トラックバック」歓迎します。ただし、相互リンクをして頂きたいと思います。
相互リンクがなく記事と関連があると判断した場合は、こちらからもトラックバックさせて頂くつもりです。お互いにとって有意義なものにしていきましょう!


トラックバックについて、まだよく分かってない方は、こちらで説明していますので参考にされてください。

特に
■記事と全く関連がないと判断される物
■「宣伝」「誘導」「誹謗中傷」を目的とした物
■リンク切れの場合
と判断したものにつきましては、「削除」させて頂こうと思いますのであらかじめご了承下さい。
同様に「コメント」も削除させて頂きます。
コメントへの返事の確認には、便利なブログコメントチェッカーを利用してください。
この記事へのコメント
Seesaa大好きケンジさんへ

初めましてあひると申します
メルマガ&ブログ参考にさせて頂いています

2カラム⇒3カラムで質問なのですが
トップや記事は無事3カラムに出来たのですが
カテゴリと過去ログで開いた時に右サイドバーが
下に落ちてしまいます
まだ5月と6月しか記事が無いのですが
5月は落ちて6月は3カラムで表示されます

スタイルシートの左右サイドバーに
float:left;を入れているのですが・・・・
何処をチェックしたら良いのでしょうか?
お手数ですがアドバイス宜しくお願いします
Posted by あひる at 2005年06月13日 22:34
こんにちは、あひるさん。

サイドバーの落ちる原因は、container、
右、左サイドバー、contentのwidth、padding,
marginが多いです。
まず確認してみてください。
Posted by Seesaa大好きケンジ(管理人) at 2005年06月22日 14:40
ケンジさんお返事ありがとうございます

上記の物確認しましたが解消しないみたいです
padding,marginを全て0にしてみましたが駄目でした・・・・
ケンジさん推奨のwidth800を守ってないのも
原因だと思いますが・・・・・・
なるべく画面を大きく使いたくて今の状態にしています

7月に入り過去ログを見てみたんですが
6,7月は普通に談落ちしないんですが
5月だけ談落ちします・・・・・スタイルシート同じ設定のはずなのに月によって変わる事があるのでしょうか??
また質問で申し訳ありませんが宜しくおねがいします
Posted by あひる at 2005年07月01日 01:39
こんにちは、あひるさん。

うーん、過去ログが月によって変わるなんて事は
ないと思うのですが。

コンテンツ(記事部分)に幅の広いバナーなどが
ないか確認してみてください。
Posted by Seesaa大好きケンジ(管理人) at 2005年07月01日 09:56
ケンジさんこんばんは

5月の記事で3カラムにする前に
書いた物が大きかった様で
書き換えた所無事談落ちしなくなりました
ありがとうございました〜m(__)m
Posted by あひる at 2005年07月03日 01:12
初めまして。
以前からこちらのサイトで勉強させていただいておりました。

今回紹介されている変則テンプレートの作り方なんですけど、事前に作成した変形テンプレートのひな形の配布とかは考えていらっしゃらないのですか?。

Posted by ブルース・ロー at 2006年11月18日 22:30
ケンジさんはじめまして!

凄く内容豊富で参考にさせていただいております。

ところで、ケンジさんのトップページみたいに記事部分に、記事一覧を載せる方法どうやるのでしょうか?

また、折を見て解説いただけるとありがとうございます。

ちなみ、HPアドレスはアドセンス取得用に便宜上作成したものです。

本サイトはまだ人前に出せるものではありませんので・・・
勉強させていただきます!
Posted by 真田 at 2006年11月22日 22:16
初めまして。

とても勉強になります。

早速、3カラムに変更してみます♪

応援クリックさせていただきました。
Posted by クチコミ 売れ筋 ダイエット・美容グッズ通販ショップ at 2009年06月03日 12:41
役立つ知識をありがとうございます。解決しなかったので是非教えて下さい。

私のブログは3カラムになっていますが、右側のリンクバーの幅が非常に広いのですが左側と同じ幅にしたいです。

もう1点ですが、左側のリンクバーにカレンダー、過去の記事など全て載せたいのですが、真ん中の記事の枠(色が薄い部分)に入ってしまっています。

以上2点の解決方法を教えて頂ければと思います。よろしく御願いします。
Posted by ミセスローズ at 2010年09月02日 11:30
新しいWindows プロダクトキー、Windows 7 プロダクトキー、Windows XP プロダクトキー、Windows 7 Ultimate プロダクトキーを取得するなら、myonlinesoft.comのオンランサイトへどうぞ!送料無料です!Windows プロダクトキー、Windows 7 プロダクトキー、Windows XP プロダクトキー情報を掲載しております。新作の通販情報などもお任せ下さい
Windows 7 Professional プロダクトキー:http://www.myonlinesoft.com/goods-22.html
Windows 7 Ultimate プロダクトキー:http://www.myonlinesoft.com/goods-21.html
プロダクトキー 販売:http://www.myonlinesoft.com/article-14.html
Windows 7 Ultimate 販売:http://www.myonlinesoft.com/goods-49.html
Windows プロダクトキー:http://www.myonlinesoft.com/category-14-b0.html
Windows 7 プロダクトキー:http://www.myonlinesoft.com/category-14-b0.html
Windows XP プロダクトキー:http://www.myonlinesoft.com/goods-30.html
Posted by Windows プロダクトキー at 2012年04月01日 17:27
最強の超人気精力薬 中国漢方精力剤、漢方精力剤、媚薬,男根増長素、威哥王、巨人倍増、蟻力神、三便宝...【漢方薬局】通販 販売!,現地中国からの直送精力剤?漢方薬?女性媚薬?ダイエット薬?中絶薬、消費税、代行手数料が無料!注文商品到着100保証!
威哥王:http://www.allkanpo.com/product/weige.html
蟻力神:http://www.allkanpo.com/product/%E8%9F%BB%E5%8A%9B%E7%A5%9E1.html
三便宝:http://www.allkanpo.com/product/%E4%B8%89%E4%BE%BF%E5%AE%9D.html
イーリーシン:http://www.allkanpo.com/product/%E8%9F%BB%E5%8A%9B%E7%A5%9E1.html
Posted by 威哥王 at 2012年04月01日 17:40
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス: [必須入力]

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※半角英数字のみのコメントは投稿できません。
この記事へのトラックバック

はじめてのCSSいじり完了
Excerpt: とりあえず、この状態で使っていきます。 本当はもう少し手を加えたいのだけど、それよりもエントリがサボりがちなので、 ひとまずはココで小休止します。 あまりに色んなものを貼り付けてしまって、下までスク..
Weblog: わんにゃFULL!な日々
Tracked: 2005-05-15 02:24

このページのトップへ▲
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。