乐胖代购免代理版
サイト幅を変える(lightframeシリーズ) - FC2ブログのテンプレート工房

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

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

サイト幅を変える(lightframeシリーズ)

"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"シリーズをお薦めします。
関連記事
[ 586 ] ありがとうございます
ありがとうございます~♪
大切に使わせてもらいます♪~♪ d(⌒o⌒)b♪~♪ランラン
[ 2006/09/26 12:45 ] [ 編集 ]
[ 594 ] > ななさん
こんばんは、ななさん。
大切に使って頂けると私も嬉しいです^^
有難う御座います。
[ 2006/09/28 22:09 ] [ 編集 ]
[ 607 ] ご無沙汰してます!
こんばんは・・・
今もかわらずいたおさんのテンプレートを使わせてもらってるmamamiです★

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

長文すみませんi-201

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

margin:10px 30px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


初心者ですみません。
[ 2008/03/04 10:21 ] [ 編集 ]
[ 3172 ] 記事タイトル部分とプラグインタイトル部分の幅
質問する場所が違うとは思うのですが、どこに書けばいいかわからなかったので^^;
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 ] [ 編集 ]
[ 3280 ] カレンダーの表示
はじめまして。
lightframeを使わせてもらってるのですがカラムの幅を変更したらカレンダーの表示が左に寄ってしまいました。プラグイン設定では中央揃えに設定してるのですが・・
ご教授お願いします
[ 2008/05/09 15:22 ] [ 編集 ]
[ 3281 ] 追記
上記下記込みをしたk2です。
上記書き込みはMACでサファリを使って表示したときに限るようです。
それでも何か対策があれば教えてください。
[ 2008/05/09 15:33 ] [ 編集 ]
[ 3287 ] たびたびすみません
記事欄と左右のカラムの余白が均等になりません。
現在の指定は

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

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

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 ] [ 編集 ]
[ 3414 ] > yukiさん
要はヘッダーの画像が背景と一致すれば良いんですよね?
それであればスタイルシートの

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

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

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

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

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

有難う御座いました。^^
[ 2008/06/24 20:47 ] [ 編集 ]
[ 3507 ] いたおさん、ありがとう。
はじめまして、「ペンタくん広場」管理人のpinkeyと申します。

「lightframe_white」を使わせていただいています。

なかなか希望のテンプレートがみつからなかったのですが、この作品はぴったりで、とても気に入っています。

ありがとうございました。
[ 2008/08/26 21:29 ] [ 編集 ]
[ 3521 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2008/09/09 00:28 ] [ 編集 ]
[ 3637 ] 左右の余白なのですが・・
こんにちは、とてもレイアウトしやすくて、有り難く使わせていただいております!!m(_ _)m

さて、私のブログですが、
リキッドレイアウトにしているのですが、
全体を95%にしていて、左右にピンクのチェックの背景画像がでるようにしています。
ですが、下の方は表示されるのですが、
上部の左右はなぜか白くなってしまい、でないのです。
スタイルシートの幅のところをいじってみても、
カラムの幅は変更されるものの、背景はしろいままで、変わりませんでした・・
どう直せばよろしいのでしょうか・・

スタイルシートをコピーしておきます。
どうぞご相談に乗っていただければ嬉しいです!!

/******************************************* ▼ サイトの幅 ▼ */
div#outline{
width: 95%;
margin: 0px auto;
border-right: 3px dashed #FF9999;
border-left: 3px dashed #FF9999;
background-color: #FFFFFF;
}

#center {
width:73%; /* 中央 */
float:right;
}
#left {
width:22%; /* 左 */
padding:0 10px 0 20px ;
float:left;
}
#right {
width:16%;
padding:0 20px 0 10px ; /* 右 */
float:right;
}
#center-left { /* 計算して設定してください ------ */
width:80%; /* (全体-左-中央-右)/2 + 左 + 中央 */
float:left;
}

/******************************************* ▲ サイトの幅 ▲ */
[ 2008/12/25 12:16 ] [ 編集 ]
[ 5233 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2009/08/02 00:54 ] [ 編集 ]
[ 5234 ] > れにーさん
> 何とか中央の記事スペースは変更しないで画像1の様に全体的に縮小する事は可能ですか?

残念ながらそれは不可能です。
どうしても記事やプラグインの幅を変えずに全体幅を縮めたい場合は、2カラムにするしかありません。

lightframe 2カラム化
http://10plate.blog44.fc2.com/blog-entry-84.html
[ 2009/08/02 01:57 ] [ 編集 ]
[ 5428 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2009/08/12 19:13 ] [ 編集 ]
[ 7228 ]
lightframeを使わせてもらっています。

無事サイト幅をリキッドレイアウトにできたのですが、TOP画像もリキッドレイアウトにしたいのですがどうすれば良いですか?
モニター15型ではジャストで表示されるのですが、ワイドモニターでは左詰で右が開いてしまいます。

今のTOP画像の仕様は『SEOを考慮したランダムなタイトル画像(http://10plate.blog44.fc2.com/blog-entry-190.html)』を『javaScriptの外部ファイル化(http://10plate.blog44.fc2.com/blog-entry-147.html)』で使ってます。
ちなみに画像は1000x300です。

[ 2009/11/30 02:10 ] [ 編集 ]
[ 7235 ] > かずさん
背景画像を伸縮して表示することはできませんが、常に中央に表示させるようにすれば見栄えも良いかもしれません。スタイルシートの末尾にこれを加えてください。

#header_body {
background-position: center top;
}
[ 2009/11/30 22:46 ] [ 編集 ]
[ 7242 ]
背景画像は伸縮して表示することができないんですね、残念です。。

言われたようにせめて真ん中表示にすることができました。

いつもながら素早い対応ありがとうございましたm(_ _)m
[ 2009/12/01 01:09 ] [ 編集 ]
[ 7247 ] > かずさん
背景画像が真ん中に表示されましたね^^
[ 2009/12/01 23:29 ] [ 編集 ]
[ 7598 ] pxと%表示
いつもお疲れ様です。

%表示からpxでの表示に変えたら両脇に空白ができてしまったのですがこのスペースには背景の画像は表示出来ないのでしょうか?
[ 2009/12/31 03:01 ] [ 編集 ]
[ 7613 ] > そうびさん
背景画像は伸縮できないためこれは仕方がありません。
[ 2009/12/31 23:09 ] [ 編集 ]
[ 8551 ]
URLのリンク先に自分のテンプレート(これからカスタマイズするやつ)があるのですが、中央630、左右220にするにはどうすればよいでしょうか?
[ 2010/02/26 01:15 ] [ 編集 ]
[ 8661 ]
2カラムにして使用しているのですが、プラグインと記事の幅を狭くする事は出来るでしょうか?
プラグインと記事を中央に寄せて間を狭くしたいのです。
説明が下手ですみません。もしよかったら教えて下さい><
[ 2010/04/13 01:47 ] [ 編集 ]
[ 8805 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2011/02/28 20:44 ] [ 編集 ]
[ 9098 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2012/03/21 20:56 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

FC2ブログのテンプレート工房
ブログを始めてから今まで7、8回テンプレ変えてきましたけど ユーザビリティを追求したら『ここ』にたどり着きました。 今まで見てきた中...
[2010/02/15 03:04] aiuia
ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
10 | 2024/11 | 12
- - - - - 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
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

10 | 2024/11 | 12
- - - - - 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
ユーザータグ


△ ページトップへ戻る