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

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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

lightframe 2カラム化

lightframeシリーズの2カラム化を紹介します。standardシリーズはプラグインの設定次第で簡単にカラム数を変えることができましたが、lightframeシリーズの2カラム化はHTMLとスタイルシートの編集作業が必要になります。

【左側をメニュー、右側を記事にする場合】

HTMLを編集します。

<!--▼▼ プラグイン カテゴリー2 ▼▼-->
<!--plugin-->

<!--/plugin-->
<!--▲▲ プラグイン カテゴリー2 ▲▲-->


この記述を削除、または表示させたいところへ移動します。
例えばプラグイン1の下に表示させたければ<!--▲▲ プラグイン カテゴリー1 ▲▲-->のすぐ下に移動させます。

次にスタイルシートを編集します。

/******************************************* ▼ サイトの幅 ▼ */
#outline {
width:1000px; /* 全体 */
margin:0 auto;
}
#center {
width:743px; /* 中央 */
float:right;
}
#left {
width:217px; /* 左 */
float:left;
}
#right {
width:0px; /* 右 */
float:right;
}
#center-left {
width:1000px; /* 全体と同じ値を設定 */
float:left;
}
/******************************************* ▲ サイトの幅 ▲ */


1.右は0に設定。
2.center_leftは全体と同じ値に設定。

これで2カラムになります。右の幅が減った分、中央や左を増やすか全体を狭める等して調整してください。
全体-中央-左=記事とメニューの間隔となります。


【右側をメニュー、左側を記事にする場合】

HTMLを編集します。

<!--▼▼ プラグイン カテゴリー1 ▼▼-->
<!--plugin-->

<!--/plugin-->
<!--▲▲ プラグイン カテゴリー1 ▲▲-->


この記述を削除、または表示させたいところへ移動します。
例えばプラグイン2の上に表示させたければ<!--▼▼ プラグイン カテゴリー2 ▼▼-->のすぐ上に移動させます。

次にスタイルシートを編集します。

/******************************************* ▼ サイトの幅 ▼ */
#outline {
width:1000px; /* 全体 */
margin:0 auto;
}
#center {
width:763px; /* 中央 */
float:right;
}
#left {
width:0px; /* 左 */
float:left;
}
#right {
width:217px; /* 右 */
float:right;
}
#center-left {
width:763px; /* 中央と同じ値を設定 */
float:left;
}
/******************************************* ▲ サイトの幅 ▲ */


1.左は0に設定。
2.center_leftは中央と同じ値に設定。

これで2カラムになります。左の幅が減った分、中央や右を増やすか全体を狭める等して調整してください。
全体-中央-右=記事とメニューの間隔となります。

少し複雑ですが頑張ってお好みのサイズになるようにカスタマイズしてくださいね。
関連記事
[ 655 ] こんにちは
私のは記事になる前に自己流でやってしまったのですが、いたお様のカスタマイズ方法と同じで安心しました。

これからも御指導宜しくお願い致しますm(__)m
[ 2006/10/15 15:58 ] [ 編集 ]
[ 656 ] > ちゃんさん
こんばんは、ちゃんさん。
いや、実際凄いですよ。自己流でも何でも出来てしまうことは凄いです。そして何よりやってみるその挑戦マインドが素晴らしいじゃないですか。私はちゃんさんのようなチャレンジャーが大好きです。私も触発されてどんどんいろんなことに挑戦して行こうと思います。
[ 2006/10/16 00:38 ] [ 編集 ]
[ 657 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2006/10/16 21:06 ] [ 編集 ]
[ 2684 ] こんにちは
ほんとにもの凄い初心者ですいませんが、
2カラムを3カラムに変える方法ってありますか?
[ 2007/08/29 12:01 ] [ 編集 ]
[ 2687 ] >>Metallicanさん
現在Metallicanさんがお使いのものを3カラムに変えるとなると、製作者の方(http://oresamachan.blog23.fc2.com/)
にお聞きするしかないと思います。
[ 2007/08/29 17:22 ] [ 編集 ]
[ 2688 ]
ありがとうございます
[ 2007/08/29 18:08 ] [ 編集 ]
[ 2772 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2007/09/22 16:31 ] [ 編集 ]
[ 3436 ]
初めまして。
テンプレートlightframeをお借りしてます。
カスタマイズの説明がわかりやすくて助かりました。
これからもこちらのカスタマイズ記事にはお世話になるかと思います。
更新頑張って下さい。
[ 2008/07/03 14:05 ] [ 編集 ]
[ 3594 ]
このサイトのおかげでブログのデザインをカッコいいモノにする事ができました!
特に、私の運営するブログは2chのまとめサイトなので、いたおさんのシンプルなテンプレートだと記事が目立ってとてもやりやすいです、ありがとうございます。
さて、ここで質問なんですが…
lightframe_monotoneを使わせてもらっているんですが、3カラムから2カラムにしたところ、リンク集が消えてしまいました;;
どうにかリンク集を復活させられないでしょうか、既出だったらすいません。
[ 2008/11/30 20:57 ] [ 編集 ]
[ 4497 ] カラムの改造についてのアドバイスお願いいたします
はじめましていたお様
こちらのテンプレートを1年前から愛用させて頂いております。パソコン初心者の私にとってこのサイトがあってこその私と思っております。またこちらの方は心のお優しい方ばかりで感謝しております。改めて御礼を申しあげます。
去年いたお様がお留守の時にちゃん様に助けられた事があります。この場を借りて、お礼を申し上げます。

今回お願いしたい件はホームページみたいにしたく、私のブログのタイトル通りショッピングを楽しむブログなので、いたお様の記事及びコメントも拝見させて頂きましたが、このような記事が見つからず、質問させて頂きました。

いたお様の(先生達)というリンク欄に私がしたいカラム改造が見つかりましたので、このような改造方法をお教えていただければ幸いと存じます。

サイト名は(私の写真)
サイトURLは http://aizawaphoto.blog110.fc2.com/です
↑許可なしに載せてしまい申し訳ございません

ご指導宜しくお願いいたします


[ 2009/05/28 11:38 ] [ 編集 ]
[ 4498 ] ▼sunflower015さん
「私の写真」様のHTMLを覗かせて頂いたのですが、

プラグイン1と2は外し、プラグイン3だけ残してそこに枠を作ってカテゴリー(文字は画像)を貼ってあります。

記事自体はトップページでは表示されないカスタマイズ
http://10plate.blog44.fc2.com/blog-entry-152.html
をする代わりにページナビを表紙にしてエンター(SCENE)設置してあるようです。

かなりの大改造ですのでHTML・スタイルシート・テーブルタグ・FC2変数を分かっていないとちょっと難しいと思います。

と言うことで、ブログに表紙のみを付ける方法であればFCafe様で紹介されていましたよ^ ^
http://pcafe.blog3.fc2.com/blog-entry-60.html


PS.
いたお師匠ならもっと的確な答えを出して頂けると思うのですが、またもや私ですみません(^^;)
[ 2009/05/28 14:53 ] [ 編集 ]
[ 4502 ] ちゃん様!いつも有難うございます
こんばんは
いつもちゃん様に助けて頂き、本当に有難うございます。
図々しくもひそかにご返事を待っていました。

ちゃん様が言ったようにかなり難しそうですね!
初心者の私には・・FCafe様のサイトを拝見させて頂きましたが、これがまた難しくて、出来ませんでした。

ちゃん様が教えてくれた最初の方法で(ブラグイン①と②)を非表示にし、今画面上ではヘッダーの部分とブラグイン③だけになっています。見た目は私の望んでたイメージなのですが、ただ、次のページ、前のページ、トラックバック、コメントの欄を消したいのですが・・次のページと前のページをカテゴリ名に変更できるならなお良いのですが

またブラグイン①と②の所にあったカテゴリの部分をヘッダーの真下に移す事は可能でしょうか?
素材さんでお借りしたバナー素材でカテゴリ一覧を囲むような形です。

頭の中ではイメージが出来てるのですが、いざ説明となると
なかなか難しく、ややこしい説明で大変申し訳ございません!わかり難ければ、再度頭中で整理をし、分かりやすい説明が出来る努力をいたします。

宜しくお願いいたします


[ 2009/05/28 21:12 ] [ 編集 ]
[ 4503 ] ▼sunflower015さん
>カテゴリの部分をヘッダーの真下に移す
http://tanpoko.blog70.fc2.com/blog-entry-1046.html
このタグの
<li><a href="リンク先URL">メニュー1</a></li>

<li><a href="リンク先URL"><img src="画像URL" width="画像横幅" height="画像高さ" alt="代替文字" border="0" /></a></li>
とすればいけそうです。

>トラックバック、コメントの欄を消したい
HTMLから該当部分を抜いてしまえば表示されなくなります。

>次のページと前のページをカテゴリ名に変更
これは
≪前のカテゴリ|HOME|次のカテゴリ≫
と表示させるのかなと思ったのですが(違ったらすみません)、それを出力させる変数は無かったような…

他の方法でリンクさせる方法があるとは思うのですが…力不足でごめんなさいi-201
[ 2009/05/28 22:38 ] [ 編集 ]
[ 4508 ] > ちゃんさん、sunflower015さん
ちゃんさん、いつもありがとうございますm(__)m
ちゃんさんのレスは的確で素晴らしいです。

sunflower015さん、環境設定の「過去の記事の管理」からもコメント、トラバを受け付けない(表示させない)ようにすることができますよ。

ちゃんさんのおっしゃる通り
≪前のカテゴリ|HOME|次のカテゴリ≫
とすることは出来ません。

≪前の記事タイトル|HOME|次の記事タイトル≫
とすることならば出来ますが。

またこのナビゲーションを削除してしまうと、他のページへ移動することが出来なくなってしまうので、私的写真さんのようにトップページに各カテゴリへのリンク等が必要になります。
[ 2009/05/29 00:04 ] [ 編集 ]
[ 4514 ] いたお様!ちゃん様!本当に有難うございます
おはようございます
お礼の返事が遅くなり、申し訳ございませんm(_)m

ちゃん様が言ってた通りに最初はヘッダーの真下に画像の横メニューを入れたのですが、私の場合カテゴリがものすごく多く、ページを開いた時に、かなりごちゃごちゃした感じになり、まるで押し売り状態でした。

そこで無い頭で考えたのが、真下に6個横メニューを作り、
テーブル形式でやりました。
多いカテゴリはブラグイン3に移しました。

≪前のカテゴリ|HOME|次のカテゴリ≫ そうです。
私のサイトを見ると、トップページには次のページと出ていますが、その次のページを開いたときにはちゃんとカテゴリ名になってるような・・!?

それとトラックバック、コメントの欄を消したい件ですが、
HTMLで該当部分を消したのですが、消えませんでした。

後いたお様がお教えてくれた環境設定の「過去の記事の管理」からもコメント、トラバを受け付けない(表示させない)ようにする方法が分かりませんでした。

今日朝からずっと自分のサイトにログインをしてるのですが、ずっとエラーになり、サイトが開きません
最初に出たエラーは DB error(LOO1)です
その後いまでも id fc2 com error となったままです

私が何かしたのでしょうか?

いつも初心的な質問ばかりで大変申し分けございません。
宜しくお願いいたします。






[ 2009/05/30 10:16 ] [ 編集 ]
[ 4522 ] > かどりんさん、sunflower015さん
かどりんさん、いつもありがとうございますm(__)m

sunflower015さんは、一つのカテゴリにつき一つの記事しか書いていないみたいですね。カテゴリ名と記事名が同じなので
≪前のカテゴリ|HOME|次のカテゴリ≫
が実現できているみたいです。これはこれで問題ないのではないでしょうか。

記事の右下に表示されるコメント数とトラバ数も消したい場合はHTMLの以下を削除してください。

<!--▼ エントリー(記事)▼-->

<!--allow_tb-->

<!--deny_comment-->コメント(-)<!--/deny_comment--><br />


<!--▲ エントリー(記事)▲-->

[ 2009/05/30 23:59 ] [ 編集 ]
[ 4537 ] いたお様、かどりん様本当に有難うございます
かどりん様!コメント&アドバイスを頂き、本当に有難うございます。エラーの件について、いつの間にか直っておりました。かどりん様のコメントで気がづいたのですが、私が昨日エラーの件で本来なら、ちゃん様やいたお様に聞くべき事ではなかったのですね。まずfc2さんの公式マニュアルもしくは障害報告などのfc2さんからのブログを確認すべきでした。何事も確認もせず、すぐ人に頼ってしまう所だめですね!気づかせてくれた事に感謝いたします。

いたお様
いつも分かりやすくお教えてくださり、有難うございます。
トラックバック及びコメントの件は解決いたしました。

カテゴリは確かにいたお様が言ってたように、記事名をカテゴリ名にしています。このままで行こうと思います。
記事の方はこれから増やしていきます。
この度沢山のアドバイスをして頂き、有難うございました。

またいき詰まった時には、ご指導宜しくお願いいたします。
[ 2009/05/31 12:50 ] [ 編集 ]
[ 4543 ] > sunflower015さん
ユーザーフォーラムを調べるだけで解決できる事は多いです。
どうしても自分が抱える問題のトピックスが見つけられなければ、高いスキルの方々が広い分野でサポートしてくれているので是非ご活用ください。
[ 2009/05/31 20:25 ] [ 編集 ]
[ 5167 ] シンプルでいいですね
この度写真プログを開設しました。
テンプレはシンプルな方がいいだろうと、2カラムにしました。
無精な性格なのでカテゴリー1を削除したら、プラグイン非対応になったので慌ててカテゴリー2の上にもって行きました。
「無精してはいか~ん」と天の声だったような・・・(笑)

この新しいブログにリンクを貼らせて頂いてもいいでしょうか?
[ 2009/07/29 13:47 ] [ 編集 ]
[ 5180 ] > 豪州サンディさん
カスタマイズが順調に進んでますね。
もちろんリンク大歓迎ですよ^^
[ 2009/07/29 22:10 ] [ 編集 ]
[ 5210 ] プラグインをメニューバーに持ってきたいのですが
こんにちは。初めてメールします。
最近FC2でネットショップを立ち上げましたが、
思うように変更できず頭を抱えています。

現在は3カラムですが、2カラム化させて、
左のプラグインの内容をタイトル下の横メニューバーに
移動させ、ドロップバーを作りたいのですが、
まずはプラグインを横メニューバーに移動させることは
可能なのでしょうか?
お手すきの時にでもアドバイスをお願いします。
[ 2009/07/31 14:06 ] [ 編集 ]
[ 5215 ] > Mikra Rouhaさん
私はFC2ショッピングカートを登録したことがないので詳しくは解らないのですが、HTMLとCSSを編集できるのなら横メニューバーを作れると思います。
[ 2009/07/31 21:52 ] [ 編集 ]
[ 5244 ] いたおさん
お返事ありがとうございます。
HTMLとCSSは編集可能なのです。
プラグインカテゴリーが3つに
分かれていて、そのカテゴリー1を
横メニューバーに移動させたいんですが・・。
何とか移動方法を探してみます。
お忙しいところありがとうございました。
[ 2009/08/02 16:49 ] [ 編集 ]
[ 5255 ] > Mikra Rouhaさん
FC2ショッピングカートにもプラグインがあるんですね。
HTMLとCSSが編集可能ならば、必要なタグを然るべき場所に貼付けるだけです。HTMLとCSSをある程度覚えなければなりませんが、本格的にカスタマイズするためには必要なことなので頑張ってください。
[ 2009/08/03 00:32 ] [ 編集 ]
[ 5847 ] メニューと記事の幅の間隔
現在、再びカスタマイズに励んでいます・・・
なんだか“賽の河原の石積み”状態になってきました。(泣き笑い)

“右側をメニュー、左側を記事”の件で質問です。

いたお師匠の仰るとおりにすると、オリジナルよりもメニューと
記事の幅の間隔が狭くなるようです。
オリジナルと同じ間隔にするには、どうすればいいのでしょうか?
[ 2009/09/05 16:53 ] [ 編集 ]
[ 5850 ] >豪州サンディさんへ
記事上のカラムでテストしましたが、最後の設定値

2カラム 右プラグイン 中央記事

#center-left {
width:780px; /* 中央と同じ値を設定 */
float:left;
}

にしたところ幅は狭くなると思います。この値を弄ると効果があると思えます。
[ 2009/09/05 18:03 ] [ 編集 ]
[ 5868 ] > 豪州サンディさん、通行人さん
> 豪州サンディさん、通行人さん
理解が悪くて申しわけありません。質問の確認をさせてください。

オリジナル(元々のテンプレート)の幅は
記事(center)が 526px
右メニュー(right)が 217px
のはずですが、それよりも幅が狭くなってしまったということでしょうか?
[ 2009/09/06 00:12 ] [ 編集 ]
[ 5874 ] おはようございます
いたおさんへ

豪州サンディさんのテンプレートを拝見し、右プラグイン 中央 記事を確認しました。3カラム前提なので、オリジナル?はわたしも悩んだのですが、この記事に書かれている2カラム上の値でテストしました。わたしが拝見した際は、記事とプラグインの間が離れていたので動かすpxの場所を書いた流れです。
[ 2009/09/06 06:22 ] [ 編集 ]
[ 5877 ] > 豪州サンディさん、通行人さん
記事からプラグインまでの間隔の事だったのですね。
申しわけありません。やっと理解しました^^;
記事(#center)のフロートをleftとすれば、あとは全体(#outline)と記事(#outline)の幅設定しだいで自由にその間隔を変えられます。

豪州サンディさんのスタイルシートの場合、変えるべきところは次の箇所です。

#outline {
width:803px; /* 全体 */
margin:0 auto;
}
#center {
width:546px; /* 中央 */
float:left;
}
[ 2009/09/06 12:21 ] [ 編集 ]
[ 5880 ] >通行人さん >いたおさん
お騒がせして申し訳ありません。
自分の日本語の不出来を思い知りました。

今、ブログ内容をちょっと変えようとしている最中で、
それに合わせてテンプレをカスタマイズしているところでした。

お忙しい中を有難うございました。
今日も一件落着です。
[ 2009/09/06 13:06 ] [ 編集 ]
[ 5881 ] > 豪州サンディさん
こちらこそ理解が悪くて申しわけありませんでした;
一件落着して良かったです^^
[ 2009/09/06 13:54 ] [ 編集 ]
[ 5889 ] すみません
混乱させてしまったようで申し訳ありません。
[ 2009/09/06 17:24 ] [ 編集 ]
[ 6097 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2009/09/18 17:46 ] [ 編集 ]
[ 6121 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2009/09/20 09:04 ] [ 編集 ]
[ 8694 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2010/05/29 00:21 ] [ 編集 ]
[ 8816 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2011/04/05 16:29 ] [ 編集 ]
[ 9119 ] カラムの重なり
こんにちは。ブログ開設当初からずっと(こっそり)お世話になっております。
自己解決しましたが(方法が正しいかどうかはともかく...^^;)、報告させていただきます。
lightframeを使用し、右にメニュー、左を記事に設定していました。
ずっと問題なく表示されていたのですが、今月(2012.04)初めから、急に表示がくずれてしまいました。右メニューが中央部分の右寄りに移動し、中央の記事部分にスッポリ覆われて下部しか見えない状態です。
FireFox3.6以外はほぼ全てのブラウザで同じ症状、そして表示がくずれた時期も同じでした。(関係あるかどうかは不明ですが、FC2で『テンプレートが反映しない』トラブルが出ていた頃です)
結局、「center」と「center-left」のうちの一方と、「left」を削除してみたら、2カラムが(それなりに)表示されるようになりました。自分であれこれカスタマイズしているので、何かおかしなことをしでかしていたのかもしれません。
[ 2012/04/22 14:33 ] [ 編集 ]
コメントの投稿









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

ブログ内検索1
プロフィール

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

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

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

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

02 | 2014/03 | 04
- - - - - - 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 - - - - -
ユーザータグ


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。