FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

サイト幅を変える 

"lightframe"シリーズのサイト幅を変更する方法を紹介します。
"standard"シリーズをお使いの方はこちらを参照してください。
サイト幅を変更するにはスタイルシートを編集します。

/******************************************* ▼ サイトの幅 ▼ */
#outline {
width:1000px; /* 全体 */
margin:0 auto;
}
#center {
width:526px; /* 中央 */
float:right;
}
#left {
width:217px; /* 左 */
float:left;
}
#right {
width:217px; /* 右 */
float:right;
}
#center-left { /* 計算して設定してください ------ */
width:763px; /* (全体-左-中央-右)/2 + 左 + 中央 */
float:left;
}
/******************************************* ▲ サイトの幅 ▲ *


まず全体幅(outline)を決めます。初期値は"1000px"に設定してあります。

そして中央(center),左(left),右(right)の幅を決めます。この3つの合計が全体(outline)を超えないように設定してください。ピッタリにするよりも少し少なめに設定することをお薦めします。それぞれのカラムに間隔を空けるためです。

最後に(center-left)を設定します。これには計算が必要です。
設定値 = (全体-左-中央-右)/2 + 左 + 中央
これで「左から中央までの間隔」と「中央から右までの間隔」が等しくなります。


また、サイトをブラウザの幅に合わせるリキッドレイアウトにしたい場合は"px"を"%"という単位に変え、更に多少複雑な計算が必要です。

全体(outline) ブラウザ幅に対する割合(%)を設定
中央(center ) center_leftに対する割合(%)を設定
左 (left ) center_leftに対する割合(%)を設定
右 (right ) outlineに対する割合(%)を設定
(center_left) outlineに対する割合(%)を設定

下記に具体例を示します。計算するよりもこの数値を少しづつ変えて実際に表示させてみるほうが早いかもしれません。

/******************************************* ▼ サイトの幅 ▼ */
#outline {
width:100%; /* 全体 */
margin:0 auto;
}
#center {
width:67%; /* 中央 */
float:right;
}
#left {
width:30%; /* 左 */
float:left;
}
#right {
width:23%; /* 右 */
float:right;
}
#center-left { /* 計算して設定してください ------ */
width:75%; /* (全体-左-中央-右)/2 + 左 + 中央 */
float:left;
}
/******************************************* ▲ サイトの幅 ▲ *


サイト幅や各カラムの幅はプラグインや投稿記事の内容も考慮して決めましょう。これらが設定した幅を超えるとカラム落ち、つまり崩れてしまいます。表示速度は落ちますが崩れないテンプレートをお望みであれば"standard"シリーズをお薦めします。
ありがとうございます〜♪
大切に使わせてもらいます♪~♪ d(⌒o⌒)b♪~♪ランラン
[ 2006/09/26 12:45 ] [ 編集 ]
こんばんは、ななさん。
大切に使って頂けると私も嬉しいです^^
有難う御座います。
[ 2006/09/28 22:09 ] [ 編集 ]
こんばんは・・・
今もかわらずいたおさんのテンプレートを使わせてもらってるmamamiです★

私のページなんですが、バナーを並べて固定してますが、セキュリティなどでバナーが表示されない時、左右のカラムの幅などがすごく崩れてしまいます。

左右幅の固定をして、どんな状況でも崩れないようにしたいのですが、勝手にテンプレートの編集をいじるのが怖くて触れてません(>_<)
よろしければ、どこの数値をどのぐらいにしたらこのページを保つ事ができるか・・・教えていただけないでしょうか?

いたおさんがお忙しいのは分かってるので、急ぎません!!
よろしくお願いしますm(__)m
[ 2006/10/04 20:34 ] [ 編集 ]
こんばんは、mamamiさん。
スタイルシートに次のクラスが記述されています。
.left_width
.right_width

初期値は「11em」となっていると思います。この値は「最低確保する幅」です。何も入ってなければ幅は11emですが、それよりも大きい画像などが入るとその分広がります。

多分今は「最低確保幅」より大きいバナー等をいれて広がっている状態だと思います。なにかしらが原因でバナーが表示されず、「最低確保幅」まで縮んでしまうことを崩れるとおっしゃっているのでしょうか?

それならば大きいバナー等を入れても広がらなくてすむように「最低確保幅」を多めに設定しなければなりません。具体的にどの数値まであげれば良いのかは私にも解かりません。11emを少しずつ大きな値にして様子をみてください。バナーを十分収容できるサイズまで広げてくださいね。

少し難しい説明でしたが理解して頂けたでしょうか?

こちらの記事も参考にしてください。
http://10plate.blog44.fc2.com/blog-entry-21.html
[ 2006/10/04 22:57 ] [ 編集 ]
早々のお返事をありがとうございましたm(__)m
同じテンプレートをもう一度ダウンロードさせていただいて研究してみました^^;

すごーく時間はかかりましたが、前よりもっと気に入ったブログが完成!!
気に入ってます★
本当にありがとうございました♪
[ 2006/10/05 13:31 ] [ 編集 ]
テンプレートすごく気に入ったのでダウンロードさせて頂きました♪
自分で少しずつカスタマできるようにはなったのですが
どうしても分からない事があったので質問させてください☆

ブログタイトルの枠幅を
左+記事の幅と同じくらいに変更して、その枠を左によせて
右のメニューをタイトルと同じ高さまでもってきたいのですが
どうしたらいいのか分かりません。(>_<)

教えて頂けないでしょうか?
[ 2006/10/05 21:19 ] [ 編集 ]
こんばんは、mamamiさん。
前より気に入るものができましたか^^
カスタマイズは大変かも知れませんが、挑戦すればきっと新しい知識が身につくと思います。その調子でどんどん新しいカスタマイズに挑戦してくださいね。
[ 2006/10/05 23:46 ] [ 編集 ]
こんばんは、かんなさん。
右カラムをヘッダと同じ高さにする方法を記事に掲載しました。
http://10plate.blog44.fc2.com/blog-entry-80.html

こちらを参考にカスタマイズしてくださいね。
[ 2006/10/06 00:22 ] [ 編集 ]
最初、2カラムにしましたが3カラムを使ってみたくて戻しました。
が、計算がメチャメチャになってしまいました。
現在、

/▼ サイトの幅 ▼*/
#outline {
width:1000px; /* 全体 */
margin:0 auto;
}
#center {
width:584px; /* 中央 */
float:right;
}
#left {
width:200px; /* 左 */
float:left;
}
#right {
width:200px; /* 右 */
float:right;
}
#center-left { /* 計算して設定してください*/
width:792px; /* (全体-左-中央-右)/2 + 左 + 中央*/
float:left;
}
/▲ サイトの幅 ▲ */

このようになっておりますが、記事欄とプラグインの隙間がずれているのではないかと心配です。
(何せ計算方法が合わないプラウザなので)
プラグインの縦枠同士は10pxになっています。
変な風に見えておりましたら御指導お願い致します

[ 2006/10/22 15:51 ] [ 編集 ]
こんにちは、ちゃんさん。
バッチリです!center-leftの計算も正しいし実際綺麗に表示されています。各カラム幅のバランスも最高で3カラムなのに記事幅にゆとりがありますね。
相当良いです。
[ 2006/10/22 16:55 ] [ 編集 ]
有難う御座います!良かったです!

3カラムにする為に左右のプラグインの内容をかなり詰めました。
200pxにおさめるのに一苦労でした;;

記事欄だけは過去記事の崩れを防ぐ為、どうしても584以下でも以上でも駄目だったんです。
3カラムにするとどうしても幅広になってしまうけれど、背景画像を少しでも多く見せたいし…と言う事でカレンダーもネコ画像もギリギリのサイズまで詰めまくりました。

いたお様のテンプレートに代えさせて頂いてから、自分でも色々勉強する様になって沢山の事を覚えましたし、アクセス数も何故かUPして(過去記事の検索にもよくかかるみたいです。)、おまけに今度雑誌に掲載される事になりました。
(グダグダの変なブログなのに(-_-;))

いい事づくめでお礼の言葉がいくつあっても足りません。
本当に有難う御座いますm(__)m

長文すみませんi-201

[ 2006/10/22 17:13 ] [ 編集 ]
おお!雑誌に掲載されるのですか!?おめでとう御座います!!

私のテンプレートに代えてからいい事づくめなんて私も嬉しいです。でもそれはきっとちゃんさんの努力の賜物ですよ。ほぼ毎日のように更新してますし、インパクトがあるデザインにカスタマイズされましたしね^^

私のテンプレートで活躍されるブロガーの存在は私にとっても大きなモチベーションになります。有難う御座います、ちゃんさん。
[ 2006/10/22 20:41 ] [ 編集 ]
どうもこんにちは。
こちらの記事のサイト幅を変える、を実行し
サイト幅を変えることには成功いたしました。
が、その後ある条件でレイアウトが崩れる現象が起こりましたのでご相談させてもらったらと思います。
youtubeという動画配信コンテンツを記事に入れると
レイアウトが崩れます。開閉式の続きを読む、ではキチンと表示されるのですがコメントやトラックバックを入れようとするとそうなります。
コチラです。
TOPページ→http://bouryoku.blog80.fc2.com/
崩れるページ→http://bouryoku.blog80.fc2.com/blog-entry-10.html
どのようにしたらよいのかいまいち見当しかねます。
ご指導のほどよろしくお願いいたします。
[ 2006/10/24 09:11 ] [ 編集 ]
上の欄にて質問をさせてもらったtest-nameです。
このサイトをご覧になっているユーザー様からご指導をいただき無事正常に表示するに至りました。
問題はyoutube動画の前に改行を一行入れて
本文記事とカブらないようにすればよかったようです。
この場を借りてそのユーザー様にお礼を述べさせていただきたいと思います。
どうもありがとうございました。(^^
[ 2006/10/24 21:09 ] [ 編集 ]
こんばんは、test-nameさん。
解決されましたか。私の回答が遅くなって申し訳ありません。そして解決に導いてくれた方、有難う御座いました。私の手が回らないことも多々あるのでこういう方がいてくださると本当に助かります。
[ 2006/10/25 01:21 ] [ 編集 ]
今更気付いたのですが、全体が右寄りになっている様です。
自分で色々とやってみたのですが直す方法が見つかりませんでした。。。

現在はこの様になっております

/▼ サイトの幅 ▼ */
#outline {
width:1010px; /* 全体 */
margin:0 auto;
}
#center {
width:584px; /* 中央 */
float:right;
}
#left {
width:205px; /* 左 */
float:left;
}
#right {
width:205px; /* 右 */
float:right;
}
#center-left { /* 計算して設定してください */
width:797px; /* (全体-左-中央-右)/2 + 左 + 中央 */
float:left;
}
/▲ サイトの幅 ▲ */

お忙しい所を申し訳ありませんが、御教授お願い致します。
[ 2006/11/07 21:53 ] [ 編集 ]
こんばんは、ちゃんさん。
左上にあるACRアクセスランキングのバナー(35x11)の分、右側に寄ってしまっているようです。このバナーを他の場所に移動すると解決すると思いますよ。
[ 2006/11/08 02:35 ] [ 編集 ]
なんたる初歩的ミス…(汗)
少しのズレだったので原因がそこだとは全く気付きませんでした。
お手数お掛け致しましたm(__)m
[ 2006/11/08 14:31 ] [ 編集 ]
こんばんは、ちゃんさん。
コンテンツが中央に表示されましたね。また何かあればなんでも聞いてくださいね。
[ 2006/11/10 01:43 ] [ 編集 ]
すみません。自己解決できました。お騒がせ致しました。
[ 2006/11/24 00:28 ] [ 編集 ]
こんばんは、ブーパパさん。
自己解決されましたか。返答が遅くなって申し訳ありません。
なかなかすぐに答えられないことが多いのですが、また何かあれば聞いてくださいね。
[ 2006/11/29 00:20 ] [ 編集 ]
こんばんは、初めまして。
今回テンプレ変更にあたり、いたお様のテンプレを使用させていただくことにしました。
僕もカスタマイズが好きで使いやすさを求めているのですが、このブログにはその指導法が豊富で非常に心強く感じています。
分からないときはコメントするかも知れませんがよろしくお願いします。
[ 2007/01/15 22:38 ] [ 編集 ]
こんばんは、しんさん。
既にかなりカスタマイズされてますね。カスタマイズ好きであれば、私のテンプレートはきっとお役に立てると思いますよ。心行くまでカスタマイズをお楽しみください^^
コメント大歓迎です。なんでも聞いてくださいね。
[ 2007/01/16 03:36 ] [ 編集 ]
初めまして。突然の質問で申し訳ありません。
lightframe_whiteというテンプレを借りたのですが・・・
右のサイドメニューが何故か全て左にいってしまいます。
今は色々いじってしまっているのですが(そのときはこちらのブログを参考にさせて頂きました。有り難うございました)借りた直前からこのような状態になっています。
何か問題があるのでしょうか?

もし良かったら助言お願いします。

ちなみに本来右のメニュー(プラグイン2?)だったのはリンクから下のメニュー全てです。
[ 2007/01/17 18:57 ] [ 編集 ]
初めまして、空さん。
左カラムの上から3番目のプラグインがタグ切れを起こしていることが原因で崩れているようです。このプラグインを「表示しない」で一時外して様子を見てください。原因がこれだけなら正常に表示されると思いますよ。
[ 2007/01/17 22:31 ] [ 編集 ]
教えて頂いてありがとう御座いました。
無事に両方のプラグインが正常に設置できました。
やはりプラグインが原因だったようです。

タグ切れなんて初めて聞いた言葉で何がタグきれしてるのか解らなかったので一つ一つ消してみたりして原因だったバナーを消しました。

とても些細な事で表示がおかしくなったりするのですね。
教えてくださって本当にありがとう御座いました。
ブログの中で自分がしてみたいことが記事に上がっている事が多いので今後とも参考にさせて頂きます。
これからも更新頑張って下さい。ではでは・・・
[ 2007/01/19 16:57 ] [ 編集 ]
こんばんは、空さん。
解決おめでとうございます。正常に表示されましたね。
原因が解かって解決するとスッキリしますよね^^

記事にも取り上げてくれて有難う御座いました。しかも画像つき^^
もちろんブクマ大歓迎です。いろんなカスタマイズの記事を載せているのでどんどん参考にしてくださいね。
[ 2007/01/21 23:13 ] [ 編集 ]
こんにちは、はじめまして。質問があります。

"lightframe"シリーズを2カラムで使おうと思うんですが、
全体を100%、左(メニュー)を250px、右(記事)を残りの全てというカスタマイズは出来ますでしょうか?
ブラウザサイズを変更しても、左の250pxは固定にして、記事をブラウザの幅に合わせる、という風にしたいのです。
宜しくお願い致します。
[ 2007/03/16 16:35 ] [ 編集 ]
standardシリーズのようなテーブル構造であれば固定と変動の併用が可能なのですが、lightframeシリーズは残念ながらこれができません。20%と80%など両カラム変動であれば可能です。
[ 2007/03/19 00:01 ] [ 編集 ]
例えば、以下のようなサイトは両立できているような気がします。
ttp://game.item-get.com/
ttp://www.i-mezzo.net/news/
このように、メニューを固定にして、記事を可変にしたいのですが、難しいでしょうか・・・?
[ 2007/03/20 00:49 ] [ 編集 ]
standardを2カラムで使用と言う方法なら出来ると思います。
プラグインやコメント欄に枠をつけて区切れば、見た目もlightframe風になりますよ。
[ 2007/03/21 02:03 ] [ 編集 ]
standardを今まで使っていたのですが、IEで表示するときに重すぎるので"lightframe"シリーズを使おうと思ったんですね。
で、standardでは全体を100%、左(メニュー)を250px、右(記事)を残りの全てというカスタマイズをしていたので、"lightframe"シリーズでも同じようにしたかったんです。
[ 2007/03/21 14:24 ] [ 編集 ]
例となるサイトを教えてくれて有り難うございました。
おかげで新しい発見がありました。lightframeでも固定と変動の両立が可能であることが解りました。
このカスタマイズを記事に掲載しますのでもうしばらくお待ちくださいね。

ちゃんさん、いつもありがとうございます^^
[ 2007/03/21 15:11 ] [ 編集 ]
ありがとうございます!楽しみに待っています!
[ 2007/03/21 18:12 ] [ 編集 ]
こちらこそ新しい発見をさせてもらって有り難うございます。
できるだけ早く載せられるように頑張りますね。
[ 2007/03/22 23:41 ] [ 編集 ]
 どうも、にゃろめです。今回テンプレートを使わせていただきたく、がんばってみたものの、左は何とか表示できるのですが右が下にさがってしまいます。ちょっとお手上げになりましたので何かいい方法はないでしょうか??
[ 2007/05/03 17:21 ] [ 編集 ]
みたところ問題ないようですが、今お使いのテンプレートではなく、lightframeを使うとカラム落ちが起きるということでしょうか?もしそうな下記記事を参考にしてくだい。

カラムが落ちる(下に表示される)のは何故か?
http://10plate.blog44.fc2.com/blog-entry-106.html
[ 2007/05/03 19:14 ] [ 編集 ]
 どうもありがとうございます。

あの手この手とやってますが、うまく右が左下に落ちてしまいます。

 もう少しがんばってみます
[ 2007/05/03 21:32 ] [ 編集 ]
怪しいとおもうプラグインを一つずつ非表示にしてみると原因が発見できるかも知れません。あとそれぞれのカラム幅が正しいことを確認してください(各カラム幅の合計が全体の幅を超えていないなど)
[ 2007/05/03 21:47 ] [ 編集 ]
 どうもです。一つ一つ当たっていきましたら、原因がわかりました。ありがとうございます。
[ 2007/05/04 17:30 ] [ 編集 ]
問題にぶつかったときは悩んでしまいますが、それを解決したときはとても気持ちいいものですよね。
解決おめでとうございます^^
[ 2007/05/05 11:28 ] [ 編集 ]
お忙しいところ、ごめんなさい。いきなりの質問をお許しください。
lightframeをお借りしました。
2カラムにしてみたのですが、タイトル画像がセンターなのに、サイト本体が左寄りにずれてしまいました。サイト本体をセンターにするにはどうすればいいでしょう?
[ 2007/06/14 11:10 ] [ 編集 ]
スタイルシートを編集してください。

/* ▼ ブログタイトル ▼ */
h1 {

margin:10px 30px;
}

この30pxの部分を0pxとしてみてください。
[ 2007/06/15 00:31 ] [ 編集 ]
いろいろといじってはダメだったので、もやもやがすっきりしました。
ありがとうございました。
[ 2007/06/15 12:55 ] [ 編集 ]
直りましたね。バグが直るとスッキリしますよね^^
[ 2007/06/18 02:28 ] [ 編集 ]
つい先日からテンプレートを使用させていただいております。
とてもシンプルで気に入ってます。ありがとうございますw。

質問ですが、センターの枠が中心にならず困っております・・
色々やってみましたが、どうもうまくいきません。。

良い解決手段はございますでしょうか。
[ 2007/10/17 03:54 ] [ 編集 ]
度々、申し訳ございません。。
カテゴリから入るとセンタリングされているのもあります・・

何か私が触った影響でしょうか。。
よろしくお願い致します。
[ 2007/10/17 04:15 ] [ 編集 ]
「センターの枠」というものが
何を指しているのかイマイチ把握しづらいのですが、
記事スペースのことでしょうか?

私のブラウザIE7およびSleipnir2.5.12では正常に表示されており、異常点がどこを指しているかわかりません。

ご参考までにIEとFirefoxやSafari、Operaでは表示スタイルが異なることがあります。
[ 2007/10/17 07:09 ] [ 編集 ]
説明が下手で申し訳ございません・・。
記事部分の枠、両側のスペースが均等でないという状況です。。
トップページでは、ちょっと左よりで「FASHION」カテゴリをクリックすると、左右均等になります。(カテゴリによっては、左よりになりますが・・)この説明でご理解いただけそうでしょうか。よろしくお願い致します。
ちなみに私は、Sleipnir2.5.12です。。
[ 2007/10/18 00:50 ] [ 編集 ]
えっと、すいません。
「カラムと記事との間隔が左右等間隔ではない」ということでよろしいでしょうか?

Sleipnir2.5.12で貴ブログを視認してみるものの、
私からは異常が見つからず、ドコを指しているのかわかりません。

お力になれず申し訳ないです。。
[ 2007/10/18 17:33 ] [ 編集 ]
>「カラムと記事との間隔が左右等間隔ではない」
そうでございます。。原因がわからず、苦戦してます・・・
お手数お掛けし申し訳ございません。
[ 2007/10/19 00:17 ] [ 編集 ]
ものすごく初歩的な質問なんですが、わたしのブログはlightframeとstandardどちらなんでしょうか?
全体の幅を決めようとしてるんですが、outlineなんてどこにもみつからなくて「メインとサイドの枠組みの設定」
って言うのがあるんですけど、それがサイトの幅にあたるんでしょうか?
[ 2007/10/30 22:38 ] [ 編集 ]
★ blue★boyさんへ

少しサイトを拝見したのですが、現在はテンプレートを変えているのでしょうか? フッダーに「FC2ブログのテンプレート工房」が見当たらないので、違うものをお使いなのかなと思います。

まず、standardシリーズであれば「 PCテンプレートstandard__xxxxx を適用中」 と管理画面にでると思います。 逆にlightframeシリーズであれば、PCテンプレート   『lightframe_xxxx』 を適用中と出ます。

繰り返しますが、今は違うテンプレートを変更していますよね(^^;

outlineはlightframeシリーズの際、使用します。見当たらないということであれば、standardシリーズだと思いますので、

http://10plate.blog44.fc2.com/blog-entry-21.html

を参照してください。
[ 2007/10/31 13:29 ] [ 編集 ]
こんにちわ♪

スタンダード時代から、気に入ってカスタマイズさせていただきながら使わせていただいていますw

今回、新しくライトの方もDLさせていただいたのですが、
サイト幅から躓きました(;´▽`A``

初歩的な質問ですみません・・・

設定値 = (全体-左-中央-右)/2 + 左 + 中央

↑の意味がわからないですw

設定値は全体から左と中央と右を単純に差し引いた数にはなってないみたいのですが(とーぜんですよね。値の大きさを考えるとw)
2という数字に左と中央の値を足したものとも違うようです。

ど、どのように計算すれば??


初心者ですみません。
[ 2008/03/04 10:21 ] [ 編集 ]
質問する場所が違うとは思うのですが、どこに書けばいいかわからなかったので^^;
lightframeを使っているのですが、
記事タイトル部分とプラグインタイトル部分の幅(高さ)を同じにするにはどうしたらいいのでしようか?
デフォルトでは記事タイトル部分の高さ(幅)のが太いですよね。
プラグインのタイトルの高さと同じにしたいのですが、
わかりません><

記事タイトル部分
.ently_title {
font-size:9pt; /* 文字サイズ(記事タイトル)*/
font-family:'MS UI Gothic'; /* 書体(記事タイトル) */
color:#808080;
background-color:#ffffff; /* 背景色 (記事タイトル)*/
border:#666666 1px solid; /* 枠 (記事タイトル)*/
text-align:left; /* 左寄せ (記事タイトル)*/
padding:5px 20px;
margin:0;
}

プラグインタイトル部分
.plugin1_title {
font-size:9pt; /* 文字サイズ(タイトル) */
font-family:'MS UI Gothic'; /* 書体(タイトル) */
font-weight:normal; /* 太字 (タイトル) */
color:#808080; /* 文字色 (タイトル) */
background-color:#f0f0f0; /* 背景色 (タイトル) */
border: #666666 1px solid; /* 枠 (タイトル) */
padding:2px 15px;
}

記事タイトル部分の
padding:の部分をプラグインと同じに変更し、
margin:0;部分を消したのですが、おかしくなってしまいました^^;

説明が下手ですいません。
同じ高さにするにはどうしたらいいか解る方いましたらご指導ください^^;
[ 2008/03/12 01:57 ] [ 編集 ]
はじめまして。
lightframeを使わせてもらってるのですがカラムの幅を変更したらカレンダーの表示が左に寄ってしまいました。プラグイン設定では中央揃えに設定してるのですが・・
ご教授お願いします
[ 2008/05/09 15:22 ] [ 編集 ]
上記下記込みをしたk2です。
上記書き込みはMACでサファリを使って表示したときに限るようです。
それでも何か対策があれば教えてください。
[ 2008/05/09 15:33 ] [ 編集 ]
記事欄と左右のカラムの余白が均等になりません。
現在の指定は

/******************************************* ▼ サイトの幅 ▼ */
#outline {
width:960px; /* 全体 */
margin:0 auto;
}
#center {
width:510px; /* 中央 */
float:right;
}
#left {
width:220px; /* 左 */
float:left;
}
#right {
width:220px; /* 右 */
float:right;
}
#center-left { /* 計算して設定してください ------ */
width:737px; /* (全体-左-中央-右)/2 + 左 + 中央 */
float:left;
}
/******************************************* ▲ サイトの幅 ▲ */

としています。
ご指導お願いします。
[ 2008/05/10 10:04 ] [ 編集 ]
余白は全体の幅の数値とセンターの数値を微調整したらうまくいきました。
カレンダーの件は横長カレンダーに変更しましたので問題ありません。
ただ、カレンダーの左ずれの件は今後のこともあるので、ないかいい案があれば教えてください。
多分、ブラウザがサファリなのが原因なのかな?
[ 2008/05/10 14:34 ] [ 編集 ]
そのときに使っていたカレンダーは公式ではなく、共有プラグインのものだったのではないでしょうか。
共有プラグインには右寄せ、中央寄せ等のプラグイン設定に対応して作られていない場合があります。
[ 2008/05/10 15:01 ] [ 編集 ]
>そのときに使っていたカレンダーは公式ではなく、共有プラグインのものだったのではないでしょうか。
いえ、公式のものでした。
参考までに左カラム下に表示しておきます。お暇なときに見てください。
[ 2008/05/11 14:56 ] [ 編集 ]
お忙しい中申し訳在りませんが
少々お聞きしたい事が在ります。

使用するブラウザによって
ヘッダーの位置が意図している位置に成らないのです。

IE7とSleipnir2.72なら
思っている位置に成っているのですが

Firefox3やOpera9.50だと
「左に偏ってしまう」のです^^;

以下の部分に問題が在りましたら
ご指南を仰いで頂けないでしょうか?m(_ _)m

/******************************************* ▼ サイトの幅 ▼ */
#outline {
width:1200px; /* 全体 */
margin:0 auto;
}
#center {
width:630px; /* 中央 */
float:right;
}
#left {
width:230px; /* 左 */
float:left;
}
#right {
width:250px; /* 右 */
float:right;
}
#center-left { /* 計算して設定してください ------ */
width:905px; /* (全体-左-中央-右)/2 + 左 + 中央 */
float:left;
}
/******************************************* ▲ サイトの幅 ▲ */


/********************************************* ▼ ヘッダー ▼ */
#header_outline {
border:1px solid #000000; /* 外枠の色 */
border-bottom:#c0c0c0 2px solid; /* 飾り線(下) */
margin-bottom:60px; /* ヘッダ下間隔 */
width:1000px;
}
#header_body {
background-color:#000000; /* 背景色 */

background-image: url(http://blog79.fc2.com/y/yuki53/file/haikei02.jpg);
height: 137px;
background-repeat: no-repeat;
background-position: center;

border:1px solid #000000; /* 内枠の色 */
}
/********************************************* ▲ ヘッダー ▲ */

宜しく御願い致します。
[ 2008/06/23 22:00 ] [ 編集 ]
要はヘッダーの画像が背景と一致すれば良いんですよね?
それであればスタイルシートの

/******* ▼ ヘッダー ▼ */
から

/******* ▲ ヘッダー ▲ */
まで

囲まれている部分を削除してみてください。
これでお望みのかたちになりませんでしょうか?
[ 2008/06/24 01:45 ] [ 編集 ]
お忙しい中、素早い対応
また、適切な助言有難う御座いました^^

ヘッダーに拘らず
ヘッダーそのものを削除していれば良かったのですね

何にせよ
この問題は解決しましたので、良かったです。

有難う御座いました。^^
[ 2008/06/24 20:47 ] [ 編集 ]
コメントの投稿













管理者にだけ表示を許可する
この記事のトラックバックURL


ブログ検索
カテゴリー
プロフィール

Author:いたお
皆さんに喜ばれるテンプレートを目指して頑張ります!


当サイトはリンクフリーです。
ブログ全記事表示
ブロとも申請フォーム
カレンダー
06 | 2008/07 | 08
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -