新オリジナルスキン ワイド化計画

ってことでまとめてみました。＾＾；

■はじめに

CSSがフルカスタマイズできるようになり、3カラムまで用意してくれたのはありがたかったのですが、2カラム時のメインのワイドが540PIXだったのに3カラムのメインのワイドが390PIXでは、テーブル組んでた記事や390PIX以上の写真を使ってる記事に関してはレイアウトが崩れてしまって美しくないという問題が発生。（＾＾；）

当然、ワイド化計画発動。（笑）

数字で表わすとこんな感じ。

10｜170｜10｜390｜10｜170｜10　合計770PIX
スペース｜左サイドバー｜スペース｜メイン｜スペース｜右サイドバー｜スペース

デフォルト設定の3カラムのレイアウトはこんなんですけど、サイドバーも縮小しちゃってるんで、こんな感じに変更しました。

10｜190｜10｜540｜10｜190｜10　合計960PIX
スペース｜左サイドバー｜スペース｜メイン｜スペース｜右サイドバー｜スペース

図解するとこんな感じ。

わかりやすく言うと、サイドバーとメインのサイズが縮小したから、それを元のサイズに戻してあげたって感じですかね。＾＾

変える個所は大きく分けて2ヶ所。

■全体のサイズ変更

まず一つ目は、ブログ全体のサイズをW770PIXからW960PIXに大きくしなくてはならないので、その部分を変更します。

#container {
width :770px; →960
margin:0 auto;
line-height:140%;
text-align:left;
color:#444;
}

赤文字の770PIXを960PIXに変更。
ここでブログ全体のサイズが変更されます。

このとき、やっておかなくてはならないのが、bannerの変更、フッターの変更と背景の変更（こちらは背景がある人のみ）。

デジモノ大好きのbannerは、ワイド750PIXだったものを940PIXにサイズ変更。
それとあわせて、ブログの背景もサイズ変更します。

ブログの背景とは、これのことを差します。
フッターのサイズは、元が770PIXなのでそれを960PIXに変更。

フッターも同様に770PIXで設定されていますので、960PIXに変更しておきます。

#footer{
width:770px; →960
margin:0 auto;
padding:20px 0;
}

ここまでが第1段階。

■3カラム設定

第2段階は、3カラム時のサイドバーとメインのワイドを設定しなおせば終了となります。

以下が元々の3カラム用のCSSです。
赤文字を2カラム用の数字に変更しなおせば、OKっす。

/*-----3Column-----*/

.columnW .archive-title,
.columnW .archive-bottom {
font-size:x-small;
}
.columnW #main {
float:left;
width:390px; →540
margin-left:10px;
}
.columnW .articles {
width:368px; →518
}
.columnW #nice li {
width:57px; →61
}
.columnW .comment-input,
.columnW #comment-write textarea {
width:335px; →400
}
.columnW .search-tbox {
width:62%; →67
}
.columnW #side-a,
.columnW #side-b,
.columnW .sidebar {
width:170px; →190
}
.columnW #side-a {
float:left;
}
.columnW #side-b {
float:right;
}
.columnW .sidebar-title {
background: url("images/sidebar_top_w.jpg") no-repeat left top;
}
.columnW .sidebar-body {
background: url("images/sidebar_body_w.gif") repeat-y;
}
.columnW .sidebar-end {
background: url("images/sidebar_bottom_w.gif") no-repeat top;
}
.columnW .articles-top {
background: url("images/article_top_w.gif") no-repeat center bottom;
}
.columnW .articles-bottom {
background: url("images/article_bottom_w.gif") no-repeat;
}

赤文字のところは、画像変更してる人はもう一度設定しなおしてください。

あとは、管理画面でサイドバーの項目の位置をお好きなところに変更してもらえれば、完成です。＾＾

興味のある方はチャレンジしてみてください。
ではでは。

コメント 17

kovaioさんは本当に次から次へと～～
どしてそんなにすごい頭脳お持ちなのですかo(><o)(o><)o（笑）
てゆうか寝てますか？
・・・て、頼り切っているくせに何言ってるのでしょうか・・・ｽﾐﾏｾﾝ（汗）
３カラム、こんなふうにワイド化できるんですね＼(◎o◎)／！
サイドが多い方などは、ズラ～と下にしてもなかなか見てもらえないから集中して上のほうに出来る３カラムっていうのは朗報かもしれませんね～！ヽ(*^○^*)ノ
by shikayu (2007-01-31 08:30) 

kovaioさん、こんばんは。
すごい、すごい！‥‥「スキン・ワイド化計画」。
スニーズ・スキンが４：３の旧アナログTVに見えて来ちゃった＾＾;

３カラムの甘い誘惑にクラクラします。
カスタマイズ方法は分かったので、
最大の難関はトップ・バナーの横長写真が用意出来るかどうか‥‥。

倍増（5→10）したカスタムペインでサイド欄を作り直したよ。
過去カレンダーが表示されませんが、
お洒落な「アップル・カレンダー」でしょ＾＾;
by sknys (2007-01-31 21:05) 

shikayuさん　こんばんはっ！＾＾
コメント＆nice!ありがとうございますっ！＾＾

うーん。
某巨大掲示板依存症ぎみで、実はあんまり寝てません＾＾；

> サイドが多い方などは、
そうそう、kovaioもサイドの項目が多いほうなんでこれのおかげで結構みやすくなったんじゃないかなぁと。＾＾

お近くでワイド化でお困りの方がいらしたら、当ブログをご紹介ください。（笑）
by kovaio (2007-02-01 02:01) 

sknysさん　こんばんはっ！＾＾
コメントありがとうございますっ！

3カラム選択したときに、メインのサイズ変更されちゃうと3カラム選べなくなっちゃいますよね～
ソネ風呂さんも、もう少し機転を利かせてほしいものです。＾＾；

拝見しました！
カレンダーの月と曜日が英語表記になってるし、青りんごもすごいっす。＾＾
ソース拝見しましたが、攻略できそうもありませんでした。＾＾；
教えてください～m(..)m
by kovaio (2007-02-01 02:33) 

はじめまして！
スキンがカスタム出来るようになって
初めてなことばかりでカスタムの説明や小技ブログをめぐっております
私も３カラムにしたくても過去記事の表示が崩れてしまうのであきらめてたのですがこちらの記事でチャレンジしてみようと思いました！時間の関係ですぐには取り掛かれませんが
スキン変更するときにはチャレンジしてみますね！
まずはnice!アイコンから変えてみたいと思います＾＾
丁寧でわかりやすい内容で大変助かります！
by pochir (2007-02-01 17:29) 

「カレンダー」や「最新記事一覧」の表記を英字に変えたかった
（iBook 12" だと漢字フォントが潰れちゃう！）。
２月カレンダーの手動更新に焦りましたが、
「カレンダー」を表示して、ソースを丸コピするのが一番簡単です。

カスタムペインで作り直すと過去カレンダーが表示されない。
>>（nextMonth）は意味がないので非表示。
<<（preMonth）リンクを青リンゴに変更しました
（クリックすると記事タイトルの上に月リンク 、
2006年12月 | 2007年01月 | 2007年02月 が表示される）。

「最近のコメント」や「○○さんがコメントした記事」も手動更新が
面倒ですが、機能より見た目（デザイン）重視ということで。
スパムコメントの自動表示を阻止出来る利点もあります。
お薦めは「カテゴリー」のカスタムペイン化
‥‥階層構造にしたり、バナーにしたり、自由度が高まります＾＾
by sknys (2007-02-01 23:09) 

すばらしいです。
ご高配に預かり感謝感謝です♪
kovaioさんの新リリースの方が楽しみかもw

週末はゆっくりお休みくださいね^^
by (2007-02-02 16:21) 

pochirさん　はじめまして！こんばんはっ！＾＾
コメント＆nice!ありがとうございますっ！＾＾

kovaioで答えられることはお答えしますので、どしどし質問してみてください。＾＾
sknysさんのところにももらわれていきましたが、りんごはお持ち帰り自由となっておりますので、気に入ってたらどーぞ。＾＾
by kovaio (2007-02-03 02:07) 

sknysさん　こんばんはっ！＾＾
ご回答ありがとうございますっ！
サイドバーはまさにフルカスタムだったんですね！！
驚きです。凄すぎます。
「最近のコメント」とか色が互い違いだったりってのは、そういうことだったんですね～脱帽です！＾＾；
そんなsknysさんにもらわれていったりんごたちは幸せものです。＾＾
by kovaio (2007-02-03 02:27) 

松matsuさん　こんばんはっ！＾＾
コメント＆nice!ありがとうございますっ！

3カラムのワイド化計画したい方多いみたいですね＾＾
カスタムペイン多用している方は、3カラム使いたいのにサイズが縮小しちゃうから使えないみたいな。＾＾；

kovaioが救済活動いたします。なんちって。＾＾；
by kovaio (2007-02-03 02:54) 

かめたろうさん　はじめして！こんばんはっ！＾＾
nice!ありがとうございますっ！＾＾
by kovaio (2007-02-06 03:06) 

こんにちは。
３カラムのカスタムスキンにしたくて、いろいろ調べ回ってるうちに辿りつきました。
とても参考になります！
どうしてもうまくいかない所があって、お聞きしたいのですが、
「スタンダード１」を使って３カラムのスキンにしました。
全体のサイズを10｜170｜10｜450｜10｜170｜10　合計830PIX
にしたいのですが、メインと右サイドバーの間がなぜかすごくあいてしまいます。
.columnW #main {
float:left;
width:450px;
margin-left:10px;
}
.columnW #side-a,
.columnW #side-b,
.columnW .sidebar {
width:170px;
}
にしてるのですが…。
「ここがおかしいのでは？」と考えられる部分はありますか？
もしよろしければ教えてください。
よろしくお願いします。
by pospesian (2007-04-10 05:08) 

ちなみに#containerもフッターも830pxに変えてあります。
by pospesian (2007-04-10 05:11) 

しあんさん　はじめまして！こんにちは。＾＾
コメント＆nice!ありがとうございます！＾＾

質問の件ですが、問題点は2箇所かと思います。
１つは、サイドバーの外側のマージンがないので20pix分ダブっているのと、2つ目は、メインが450pixになっていない点です。
どこかの数字がずれているのかもしれませんね。

会社から（内緒ですよ）なんで、夜にソースみてみます。（笑）
by kovaio (2007-04-10 10:48) 

しあんさん　こんばんはっ！＾＾；

遅くなってすみませんでした。
仕事が忙しくゆっくりCSSが見れなくって、遅くなっちゃいました。
ごめんなさい。

で、直すところ、わかりましたよ。
全部で3箇所です。

/*-----Content-----*/

#content{
padding:12px 10px;
}

↑追加してください。


/* Articles */

#main {
width:450px;
}

.articles {
width:448px;
padding:0 10px;
border-top:1px dotted #ffcc00;
border-left:1px dotted #ffcc00;
border-right:1px dotted #ffcc00;
border-bottom:1px dotted #ffcc00;
overflow:hidden;
}

padding:0 10px;
これに変更してください。


/*-----3Column-----*/

.columnW #main {
float:left;
width:450px;
padding:0 10px;
}

こちらも一緒に変更してください。


これで直ると思いますので、お試しください。
ではでは。
何かありましたら、お声がけくださいまし。＾＾
by kovaio (2007-04-13 21:58) 

こんにちは。
わざわざ見てくださって、ありがとうございました！
お忙しいのに、申し訳ありません(^-^;)
おかげで、無事変更できました。
本当に感謝感謝です。
記事にリンクを貼らせて頂いたので、ご報告しておきます。^^
ありがとうございました!!
by pospesian (2007-04-13 23:43) 

しあんさん　こんばんはっ！＾＾
無事に変更できてよかったです。＾＾
記事にいっぱいリンクまでいただきまして、ありがとうございました。＾＾
by kovaio (2007-04-15 04:22)