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

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

lightframeの左右カラム幅を固定、記事カラム幅を可変にする

テーブル構成ではないlightframeで、左右のカラム幅を固定、記事カラム幅はブラウザサイズにあわせた可変にするカスタマイズを紹介します。

HTMLを編集します。
初期状態のlightframeは次のような構成になっています。

～

<div id="center-left">

<div id="center">
～
</div>

<div id="left">
～
</div>

<br class="c-both">

</div>

<div id="right">
～
</div>

～

これを次のように並べ替えます。～の部分も含めて並べ替えてください。

～

<div id="right">
～
</div>

<div id="center-left">

<div id="left">
～
</div>

<div id="center">
～
</div>

<br class="c-both">

</div>

～

左メニュー、右記事の２カラムにしたい場合は
<div id="right">
～
</div>
を、
右メニュー、左記事の２カラムにしたい場合は
<div id="left">
～
</div>
をそれぞれ削除してください。
次にスタイルシートを編集します。

/******** ▼ サイトの幅 ▼ */
#outline {
width:1000px;
margin:0 10px;
}
#center {
~~width:526px;~~ /* 削除 */
~~float:right;~~ /* 削除 */
margin-left:230px; /* leftの幅+間隔 */
}
#left {
width:217px;
float:left;
}
#right {
width:217px;
float:right;
}
#center-left {
~~width:763px;~~ /* 削除 */
~~float:left;~~ /* 削除 */
margin-right:230px; /* rightの幅+間隔 */
}
/******** ▲ サイトの幅 ▲ */

灰色の部分を削除、茶色部分を追加してください。ただし
左メニュー、右記事の２カラムにしたい場合は
margin-right:230px; /* rightの幅+間隔 */を、
右メニュー、左記事の２カラムにしたい場合は
margin-left:230px; /* leftの幅+間隔 */
をそれぞれ削除してください。

これで左右のメニューカラムは固定、記事部分の中央カラムはブラウザに合わせた可変幅になります。
少々難しいカスタマイズなので「複製」でコピーをバックアップしてからカスタマイズしてください。

関連記事

コメント投稿・編集欄のレイアウト (2009/04/29)
コメントとコメントの間隔を調整する (2009/04/09)
角を丸くする (lightframeシリーズ) (2009/03/27)
lightframeの左右カラム幅を固定、記事カラム幅を可変にする (2007/05/05)
『最新の記事』の便利ナビを設置する (lightframe) (2007/05/03)
lightframeの表示順序を変える。 (2007/02/02)
ページ下部(フッター上部)にフリースペースを設ける (2006/12/17)

[ 2007/05/05 22:23 ] カスタマイズ lightframe 専用 | TB(0) | CM(25)

≪ リストマークをアイコン画像にする | HOME | 『最新の記事』の便利ナビを設置する (standard) ≫

[ 1927 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2007/05/18 00:46 ] [ 編集 ]

[ 2165 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2007/06/12 19:09 ] [ 編集 ]

[ 2170 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2007/06/13 02:05 ] [ 編集 ]

[ 2783 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2007/09/26 08:16 ] [ 編集 ]

[ 2911 ] ご教授ください＞＜

自己解決に不可能を感じたので質問させていただく次第でございます・・・

初心者ながらにアフィリエイトを活用したブログ作りに励もうと勤しんでおります。

やはり商品のクリップは見やすく表示させたいので、日付やコメント、その他外観を日記のように感じるものをある程度とりのぞきました

そこで次はディスプレイをイメージ通りにしたいと考えたわけですが、
記事の幅がせまいのか・・・思うようにいきません。
私のイメージしているディスプレイは下記のように左がカテゴリ、□が商品のクリップといった形を考えています。

┌┐
││□□□
││□□□
││□□□
└┘

参考にしているサイト様はhttp://visucolle.blog121.fc2.com/です

私のサイトはhttp://fcmode.blog123.fc2.com/です

こういった事はやはり初心者には手難しい作業なのでしょうか・・・
何卒、ご教授願いたいところです＞＜

[ 2007/10/26 04:41 ] [ 編集 ]

[ 3226 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2008/04/17 14:38 ] [ 編集 ]

[ 3321 ] はじまして

はじめましてm(__)m
テンプレートが非常に良いと思いまして、使用させて頂こうと思いました、lightframeCustomiz2もよいと思いまして、現在、:あんいくうなor空様のlightframeCustomiz2を使用させて頂いています。
そこで、IE7ですと、左右のカラムが正常に表示されるのですが、IE6ですと左カラムが表示されない事に気づきました。
そこで、こちらの記事にて編集させて頂きましたが、レイアウトが崩れてしまいました…。

どこをどういじったら、良いのでしょうか？
是非、ご教授頂きます様申し上げま。
よろしくお願い致します。

[ 2008/05/24 05:11 ] [ 編集 ]

[ 3328 ] > universeさん

こちらの記事を参考にしてください。

サイト幅を変える
http://10plate.blog44.fc2.com/blog-entry-78.html

[ 2008/05/26 00:55 ] [ 編集 ]

[ 3332 ] いたお様

ご解答ありがとうございます。
上記URLも参照させて頂き変更してみたのですが、ブラウザ幅に合わなかったですo(´^｀)o ウー。
また、IE7ですとlightframeはきちんと表示されるのですが（左カラム落ちせずに）IE6ですと左カラム落ちしているのはなぜなのでしょうか？
ですので、
現在、standardをご使用させて頂いています。
表示速度や、FC2のblog2サーバーの重さ等を考慮すると、lightframeを使用させて頂きたいのですが…。
lightframeの早さには感激しています。
何卒、ご教授頂けます様お願い申し上げます。

[ 2008/05/26 14:48 ] [ 編集 ]

[ 3339 ] > universeさん

なにもカスタマイズしない純正のlightframeを使ってもカラム落ちするのでしょうか。
カラム幅よりも大きいもの(画像等)をカラムの中にいれているときにカラム落ちが起こります。
左カラムが落ちるのであれば、怪しいと思うプラグインを一つずつ外してみてください。問題となるプラグインを取り除いたときに正常に表示されると思います。

[ 2008/05/28 01:08 ] [ 編集 ]

[ 3342 ] いたお様

返信誠にありがとうございます。
現在、出先にて投稿させて頂いております。
ightframeCustomiz2にては
左カラム落ちといいいますか、全体的に左側へよっていて
左カラムが表示されませんでした。
そして、貴サイトに記載があります幅を%にした所すごく時間がかかって左カラムが出てきましたが、画面（IE）を一杯に広げると左側に現れていました。縮小しますとこの場合のみ左カラムが落ちてたように思います。
また、%ではなくpxにすると左カラムは現れませんでした。(>_<)
なぜでしょう？
そして、幅を調節しても変化がありません…。
現在、standardにて使用させて頂いておりますがそれぞれのプラグイン内の幅は以前と異なり現在のstandardの幅に広げて調整いたしました。
ですので、プラグイン内の幅は現在より狭かったということです。
また、上記現象はightframeCustomiz2にてです。
貴サイトのightframemonoですと、プラグイン２にあたります。「ニュース」がサイト中央topに記事の裏に重なっていてニュースのタイトルのみです。（IE7にてプレビューにてですが）
現在、standardにてカスタマイズさせて頂いておりますが、
是非、lightframeにしたいので
何卒ご教授お願い申し上げます。

[ 2008/05/28 06:46 ] [ 編集 ]

[ 3344 ] > universeさん

いま見たところightframeCustomiz2でカラム落ちせずに正常に表示されていますね。自己解決されたのでしょうか？原因は何でしたか？

[ 2008/05/29 00:45 ] [ 編集 ]

[ 3346 ] いたお様

ご報告遅れましてすみません。
記事内の半角英数部分を、途中で改行したり
ほかにも、プラグイン（フリースペースや、RSSフィード）などを削除し新たに追加しました。（普通に追加ですと、どうしてもカラム落ちしてしまいましたのでHTML編集にてしてみた所なんとか大丈夫でした。）
ただ、現在左カラムにあります「アクセス」を右カラムに表示するようにしますと、うまく表示されないのです…。
これだけ、解決しませんでした。
が、左カラムに持っていった所、なんとか表示されました。
(^_^.)
なぜ、右カラムですとNGなのでしょう？

しかし、lightframemonoですと、なぜかうまく表示されまないのです…。
また、サイトマップの作り方にて、別窓にて表示のHTMLタグを指定の場所に挿入したのですが、別窓にて開きません…。
サイトマップの別窓表示の仕方を改めて、教えて頂きたいと存じます。
時間のある時に挑戦します<m(__)m>

[ 2008/05/29 02:57 ] [ 編集 ]

[ 3347 ] ▼universeさん

逆アクセスランキング、私も付けていますが右カラム最下段です。
ちなみにightframe_monotoneなんですけれど、「うまく表示されない」とはカラム落ちしてしまう以外のことでしょうか？

[ 2008/05/29 11:12 ] [ 編集 ]

[ 3348 ] ちゃんさん

コメント誠にありがとうございます。
はい。
カラム落ちのみではなく、以下画像の様になってしまうのです…。(w＿－; ｳｩ･･
http://blog2.fc2.com/u/universe/file/lightframemonotone.jpg
と
http://blog2.fc2.com/u/universe/file/lightframemonotone2.jpg

[ 2008/05/29 17:39 ] [ 編集 ]

[ 3356 ] > universeさん

まず何が原因なのか突き止める必要がありますね。
ちょっと記事を書いたのでこの内容に従って確認してもらえますでしょうか。

テンプレートを変えたら表示が崩れた
http://10plate.blog44.fc2.com/blog-entry-165.html

[ 2008/06/01 22:37 ] [ 編集 ]

[ 3477 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2008/08/11 01:59 ] [ 編集 ]

[ 3483 ] お伺い

はじめまして。
テンプレートを利用させて頂きまして有難う御座います。

先日、鍵コメントをさせて頂いたのですが・・・
公開にしないと応じて頂けないのでしょうか？（；^ω^）
他の鍵コメント拝見しても、応じられていないようなので
公開で質問させて頂きます。

lightframeを使わせていただいてますが、（3カラムです）
左右にあります、プラグインを右に２つ寄せて、エントリー部分を左に
寄せたいのですが、可能でしょうか？

お忙しいとは思いますが、どうかご教授くださいますように
お願いいたします。

[ 2008/08/13 23:48 ] [ 編集 ]

[ 3484 ] ▼★魅鎖希さん

こちらに紹介されています。

『記事を左カラム、プラグインを中央と右カラムに表示する』
http://10plate.blog44.fc2.com/blog-entry-110.html

[ 2008/08/14 00:11 ] [ 編集 ]

[ 3485 ] > 魅鎖希さん、ちゃんさん

コメントに気付かず申しわけありません、魅鎖希さん。
なかなかログインしないもので＾＾；

ちゃんさんが教えてくれたURLの記事を参考にしてください。
ちゃんさん、いつもありがとうございますm(__)m

[ 2008/08/14 01:18 ] [ 編集 ]

[ 3487 ] 有難う御座いました。

いたお様、ちゃんサン様　有難う御座いまいます。

こんばんは。　お忙しいところご返答くださりまして
有難う御座います。
お蔭様で希望通りに変更できることが出来ました。(^.^)

カスタマイズの記事がありましたのに、見落としておりました。(^_^;)　
申し訳ありませんでした。m(__)m

[ 2008/08/15 02:16 ] [ 編集 ]

[ 3656 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます