ブログカスタマイズのブログ

HOME > その他 > テンプレート『さくら』の3カラム化
【みぃさんのコメントはこちら】
テンプレート『さくら』を3カラムに変更する方法です。

サイドメニューのデザインはスタイルシートです。それぞれ、

左サイドメニュー#links-left{ }
メイン#content{ }
右サイドメニュー#links{ }

でコントロールしています。テンプレート『さくら』はこのlinks-leftが無いようです。

■ 作業1 links-leftの追加

スタイルシートの編集でlinks-leftを追加します。右サイドメニュー(links)のデザインを参考に次のような感じで良いと思います。(作業2の為にlinksのmargin-leftも少し修正します)

#links-left {
font-weight:normal;
width:253px;
float:left;
margin-top:20px;

}
#links {
font-weight:normal;
width:253px;
float:left;
margin-top:20px;
margin-left:15px;
}

■ 作業2 幅の調整

ページ全体#container{ }width:805px;
左サイドメニュー#links-left{ }width:253px;
メイン#content{ }width:480px;
右サイドメニュー#links{ }width:253px; + margin-left:15px;

左サイドメニューを追加したことで、左サイドメニュー+メイン+右サイドメニューの幅が253px+480px+(15px+253px)=1001pxになり、ページ全体の幅805pxを超えてしまいました。ページ全体の幅(container)を修正します。

#container{
text-align:center;
margin: 0px auto 0px auto;
padding:0px;
width:1005px;
}

※右サイドメニューで使われているOKAKIの画像が大きいので1001pxよりも更に幅が大きくなってしまいそうです。OKAKI画像を使う場合は赤文字のwidthは1030px必要です。

■ 作業3 ヘッダー画像のセンタリング

ページ全体の幅を広げたのでヘッダー画像が左に寄ってしまいます。#banner{ }でヘッダー画像をセンタリングします。

#banner{
font-family:arial, Helvetica;
height:200px;
margin:0px;
padding:0px;
text-align:center;
background-image:url(http://blog.seesaa.jp/img/bg/sakura/header.gif);
background-repeat:no-repeat;
background-position:center;
}

上記作業で3カラム化は完成です。

テンプレート『さくら』の3カラム化を試してみました。個人の好みですが、ちょっと幅が広すぎるかなぁ〜。適当なコンテンツを左サイドメニューに追加して試してみて下さい。
12:15 | Comments(15) |
この記事へのコメント
2005年07月06日
ご回答ありがとうございます。
回答頂けるとは思っていなかったので恐縮です。
仕事の合間に時々願いながら見てたんですがこの記事に気がつきませんでした。
今日帰宅したら早速実践してみようと思います。
・・・何時になるかわかりませんが・・
Posted by みぃ at 12:49
2005年07月06日
みぃさん、こんにちは。

http://blogcustomize.seesaa.net/template/sakura.html

試される前に↑も確認してみて下さい。意外と横幅があります。この幅で良かったらトライしてみて下さい!スタイルシートを4箇所変更するだけなのでそれほど難しくないと思います。失敗した場合は「さくら」のテンプレートを初期化すれば大丈夫です。

このブログを「さくら」にすると不思議な感じですねー。(笑)
Posted by 管理人 at 14:39
2005年07月07日
管理人様。
実例版本当にありがとうございます。
ギリギリの幅ですね。
私は携帯電話で撮った画像をそのまま投稿しているので理想の3カラム化です。
他のテンプレートを見てみたのですが記事欄の幅が足りてないように思っていたのでこの幅取りで最高です。
OKAKIの画像は適当に小さくします。
(身内の店なんでその辺はいいです。(笑))

実例版を見て直ぐには気がつきませんでしたこちらのだと・・・。
こんなにも雰囲気変わるものなんですね。

感謝感激です。本当に有難うございました。
まだ実践できてませんが。
Posted by みぃ at 01:45
2005年07月07日
みぃさん、こんばんは。

前から2カラムテンプレートの3カラム化を試そうと思ってたのでちょうど良い機会でした。スタイルシートの変更が面倒ならば、

http://blogcustomize.seesaa.net/template/sakura3columns.css

をコピペしちゃって下さい。上述の4箇所の変更済みスタイルシートです。(既に他のカスタマイズをされてる場合はリセットされてしまいます。)
Posted by 管理人 at 02:11
2005年07月07日
管理人様。
できました!3カラム化!
夜な夜なかかると思っていた事が管理人様のお陰であっという間にできました。
ありがとうございました。
実は自力で・・・と思い、プロバイダ別blogカスタマイズの本を発注してまして、本日届いたんです。
開く事なく済みました。
でも、あの本ってseesaaは載ってなかったんですネ(泣)
Posted by みぃ at 02:15
2005年07月08日
3カラム化、出来てなによりです!

え!?プロバイダ別blogカスタマイズにSeesaa載って無いんですか!?このブログでも右サイドメニューにリンク載せちゃってます・・・。ひょっとして、それ見て買われたとか?もしそうなら申し訳ないことをしました!
Posted by 管理人 at 00:17
2005年07月08日
できました報告のコメント作成時と管理人様の次のアドバイスが同時だったようで2回投稿してしまいました。すみませんでした。

『プロバイダ別blogカスタマイズ』は人気blogベスト8社のみでした。
seesaaは10位ですものネ・・・。

そうなんです。こちらからです("▽"*)
実は、もう1冊(6 ̄  ̄)ポリポリ
Posted by みぃ at 12:57
2005年07月09日
やっぱりそうでしたか、申し訳なかったです・・・m(_ _)m
しかも紹介している内容は大したこと載って無さそうですね・・・。
お詫びに本以上の内容をこのブログで提供しようと思うので、分らないことがあったら気兼ねなく質問して下さい!
Posted by 管理人 at 00:19
2005年07月13日
はじめまして。
ネット初心者のcocoaと申します。
カスタマイズに興味を持って、
今使用しているテンプレートを
「さくら」に変更しようと思っていたのですが、
私も「さくら」の3カラム化を、
使わせて頂いてもいいですか?
Posted by cocoa at 22:30
2005年07月14日
cocoaさん、はじめまして。どうぞどうぞ。お試し下さい。

ブログを拝見したところ既に3カラムのテンプレートをお使いなので、スタイルシートのカスタマイズだけで実現できます。HTMLを変更しなければ、3カラムのさくらに満足しなかった場合に今のテンプレートに戻せるのでお手軽に試せるカスタマイズだと思います。

他にも疑問などあったらお気軽にコメント下さい!
最近一通りカスタマイズが出切ったのかアップデートする内容に困り気味で・・・なので逆に質問もらえると助かったりします!ちょっと他力本願(笑)
Posted by 管理人 at 00:39
2005年07月14日
ありがとうございます。
早速、今日にも挑戦してみます!
何しろ超初心者ですから、
初歩的な質問もあるかと思いますが
よろしくお願いします。
Posted by cocoa at 09:25
2005年07月15日
無事にテンプレートの変更が、出来ました。
ありがとうございます!
Posted by cocoa at 14:15
2005年07月16日
cocoaさん、こんばんは。出来てなによりです!また何かトライしたいことがあったら気兼ねなくコメント下さいねー。
Posted by 管理人 at 02:34
2005年12月18日
はじめまして。
今回seesaaテンプレの右サイドバータイプのピンクを使用して
両サイドバーにカスタムしようと思ったのですが、いろいろうまくいかず。。。
どうしよう。。。と思っていたところ、こちらに辿り着き
いろいろ参考にさせて頂きました^^
どうもありがとうございました!
Posted by なる at 19:16
2007年03月15日
はじめまして。
今回このページに載っている「さくら」の両サイド版を参考させていただきました。
こちらに載っている大きさでは「ちょっと大きいな」と思ったので(当方プラウザーの「お気に入り」を常に表示させているので)、少し小さめに作りました。

ここはとても参考になるので、分からないことがあったらまた参考にさせていただきます。
ありがとうございました。
Posted by しげぴぃ at 18:08
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

×

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