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

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

スポンサーサイト

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

プラグイン3をプラグイン1と2の上に表示する

以前に記事を左カラム、プラグインを中央と右カラムに表示する方法を紹介しましたが、プラグイン3の表示位置は記事の上のままでした。



当サイト配布のテンプレート「lightframeシリーズ」において、さらにプラグイン3をプラグイン1と2の上に表示する方法を紹介します。

20090820_2.gif

HTMLを編集します。
青い箇所を削除し、赤い箇所を加えてください。
さらに紫の
<!--▼▼ プラグイン カテゴリー3 ▼▼--> から
<!--▲▲ プラグイン カテゴリー3 ▲▲--> まで
を、新たな箇所へ移動させてください。

<!--▲▲ ヘッダー ▲▲-->

<div id="center-left">

<div id="center">

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

<!--▲▲ プラグイン カテゴリー3 ▲▲-->




<!--▲▲ メイン表示 ▲▲-->

</div><!--/center-->

<div id="center-left">

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

<!--▲▲ プラグイン カテゴリー3 ▲▲-->


<div id="left">

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



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

</div><!--/left-->

<br class="c-both" />

</div><!--/left_center-->


<div id="right">

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



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

</div><!--/right-->

<br class="c-both" />

</div><!--/left_center-->

<!--▼▼ フッター ▼▼-->



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

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



既に記事を左カラム、プラグインを中央と右カラムに表示するを施している方は、オレンジの箇所が right になっているので left に直してください。

これで記事を左、その右にプラグイン1と2を表示し、さらにそのプラグイン1と2の上にプラグイン3を表示することができます。

このレイアウトならばプラグインカテゴリ3を常に表示させるようにしたほうが良さそうですね。

このカスタマイズは少しでもミスをすると表示が崩れてしまいます。必ずテンプレートのバックアップをとってから挑戦してください。


【関連記事】
記事を左カラム、プラグインを中央と右カラムに表示する
プラグインカテゴリ3を常に表示させる
関連記事
[ 5570 ]
先日、質問をさせて頂いた者です。いろいろと難しい事を要求してしまってすみませんでした。さっそく試してみます!重ね重ねありがとうございました。
[ 2009/08/21 03:22 ] [ 編集 ]
[ 5577 ] > まいさん
変更しなければならない箇所がかなりあるので気をつけてカスタマイズしてくださいね。
[ 2009/08/21 19:02 ] [ 編集 ]
[ 5578 ] あなろぐ
これいいですねー。
いつか使わせてもらおうと。
それと、リンクしていただいてる
もう一つのブログ、これも外して下さい。
もう更新することはないので。
どうもでした。
[ 2009/08/21 19:04 ] [ 編集 ]
[ 5584 ] > あなろぐさん
最近この記事を左カラムにするレイアウトが流行ってるみたいですね。よく見かけます。

リンク外しておきました。妻が今日からFXをはじめたのでちょっと残念です^^;
[ 2009/08/21 19:35 ] [ 編集 ]
[ 5655 ] おはようございます
いつもお世話になっております。
プラグイン3はそのままにして、1と2の上にフリーエリアは出来ませんでしょうか?

それから、私のところでは、

|    ヘッダー     |
|     記事      |
|    プラグイン3   |  
|プラグイン1|プラグイン2|
|    フッター     |

となるのですが、原因は何でしょうか?
本当は、URLを教えて確認して頂ければいいのでしょうが、
あまりに見にくくてさすがに放置は出来ませんが、
よろしくお願いいたします。
[ 2009/08/26 06:54 ] [ 編集 ]
[ 5656 ] ▼さくらいさん
>プラグイン3はそのままにして、1と2の上にフリーエリア

こちらの方法で出来ると思います。
【フリーエリアを作る】
http://tanpoko.blog70.fc2.com/blog-entry-804.html
[ 2009/08/26 10:46 ] [ 編集 ]
[ 5657 ] いつもお世話になってます
ちゃんさんありがとうございました。
無事出来ました。
もう少しいじってから、公開したいと思います。
本当にありがとうございました。
[ 2009/08/26 12:53 ] [ 編集 ]
[ 5662 ] > さくらいさん、ちゃんさん
> さくらいさん
他に製作中のサイトが崩れてしまったということでしょうか。現状をみてみないと原因は解りませんが、こちらの記事も参考になると思います。

表示が崩れる原因の調査手順
http://10plate.blog44.fc2.com/blog-entry-274.html

公式プラグイン「フリーエリア」を使う方法もありますが、他のプラグインと違うデザインの枠にしたければ、ちゃんさんの方法が役に立ちますね。

> ちゃんさん
いつもありがとうございます m(__)m
[ 2009/08/26 18:57 ] [ 編集 ]
[ 5667 ] ありがとうございます。
ちゃんさんのwebを参考にさせていただき、
無事に公開できました。
色々とお気遣い頂きありがとうございます。
[ 2009/08/26 21:10 ] [ 編集 ]
[ 5669 ] > さくらいさん
公開されたということは解決されたんですね。
私の記事には無いけど、ちゃんさんが記事にしているカスタマイズも沢山あります。是非参考にしてください。
[ 2009/08/26 23:13 ] [ 編集 ]
[ 5673 ]
HTMLの最後の</div><!--/left_center-->


<br class="c-both" />の上かな?

下になってるけど。
[ 2009/08/27 04:21 ] [ 編集 ]
[ 5676 ] ▼YASUDAみかんさん
HTMLを編集します。
青い箇所を削除し、赤い箇所を加えてください。


と書いてある通り、移動した後の位置ですよ。
[ 2009/08/27 10:56 ] [ 編集 ]
[ 5684 ]
自分は上の記事どうりにしてすると
プラグインの下にフッターが表示されます。

自分が上に書いたコメントどうりすると
フッターがいつもの場所に表示されるんです。

まぁ、上の記事どうりの場所にフッターが表示されるということです。www
[ 2009/08/27 18:31 ] [ 編集 ]
[ 5691 ] > YASUDAみかんさん、ちゃんさん
> YASUDAみかんさん
奇妙な現象ですが、正しく表示されるならそれでいいのではないでしょうか^^;

> ちゃんさん
いつもありがとうございます m(__)m
[ 2009/08/27 20:09 ] [ 編集 ]
[ 6377 ] ぷーさん
http://roxas0914.blog56.fc2.com/

こちらのサイトのような配置にするには
どうすればよいでしょうか
[ 2009/10/06 09:25 ] [ 編集 ]
[ 6378 ] ▼ぷーさん
以前私がコメント欄に書いた方法ですが、見付けられませんでした(^^;)
どの記事のコメ欄だったか…;
なので下に書いておきますね。

********************


<div id="outline">

<!--▼▼ ヘッダー ▼▼-->

<!--▲▲ ヘッダー ▲▲-->



<div id="center-left">

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

<!--▲▲ プラグイン カテゴリー3 ▲▲-->

<div id="center">

<!--▼▼ カテゴリ、月別、検索、タグナビゲーション ▼▼-->

<!--▲▲ カテゴリ、月別、検索、タグナビゲーション ▲▲-->

<!--▼▼ メイン表示 ▼▼-->

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

<!--▲▲ メイン表示 ▲▲-->
</div><!--/center-->

<div id="left">
<!--▼▼ プラグイン カテゴリー1 ▼▼-->

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

<br class="c-both" />
</div><!--/left_center-->

<div id="right">
<!--▼▼ プラグイン カテゴリー2 ▼▼-->

<!--▲▲ プラグイン カテゴリー2 ▲▲-->
</div>
<!--/right-->
<br class="c-both" />

<!--▼▼ フッター ▼▼-->

<!--▲▲ フッター ▲▲-->

</div><!--/outline-->

</body></html>
[ 2009/10/06 12:17 ] [ 編集 ]
[ 6379 ]
ちゃんさんありがとうございます。
できればなのですがプラグイン1と2の位置関係?を逆にしたいのですが可能でしょうか。(プラグイン2より1の方を上に表示させたいといいう意味です。うまく説明できなく申し訳ありません)
[ 2009/10/06 12:52 ] [ 編集 ]
[ 6383 ] > ぷーさん、ちゃんさん
> ぷーさん
プラグイン1と2の表示位置を入れ替えたいときは、HTMLの
<!--▼▼ プラグイン カテゴリー1 ▼▼-->

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

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

<!--▲▲ プラグイン カテゴリー2 ▲▲-->
を入れ替えてください。

> ちゃんさん
いつもありがとうございますm(__)m
以前残してくれたコメントはこちらですね。
http://10plate.blog44.fc2.com/blog-entry-208.html#comment4367
この方法も記事にしておきますね^^
[ 2009/10/07 00:29 ] [ 編集 ]
[ 6385 ]
いたおさんありがとうございます
やはり私の説明があれでしたね・・・
画像を作ったのでこれで多分いいかと思います

http://imgur.com/cMzb3.gif

このように表示させたいのですがどのようにHTMLを書き換えればよいでしょうか。
[ 2009/10/07 07:58 ] [ 編集 ]
[ 6394 ] > ぷーさん
それでは記事に掲載しようかと思うのですが、この画像を使わせてもらってもよろしいでしょうか。
[ 2009/10/08 00:35 ] [ 編集 ]
[ 6396 ]
いたおさんありがとうございます
画像の方は構いません
この記事の画像を引用して編集したようなものなので・・・
記事の方お願いします
[ 2009/10/08 00:46 ] [ 編集 ]
[ 6399 ] > ぷーさん
それでは後日掲載するのでもう少しお待ちください。
[ 2009/10/08 01:07 ] [ 編集 ]
[ 6409 ]
ありがとうございます
記事の方待っています
[ 2009/10/08 22:39 ] [ 編集 ]
[ 6410 ] > ぷーさん
記事を掲載したのでこちらを参考にしてください。

プラグイン3のレイアウト (lightframe)
http://10plate.blog44.fc2.com/blog-entry-316.html
[ 2009/10/09 01:03 ] [ 編集 ]
[ 8063 ]
いつもお世話になっております。

現在、記事を左カラム、プラグインを中央と右カラムに表示する方法をしております。

この二つのカラムの上に画像を置きたいと考えているのですが、左カラムと右カラムが同時に下がってくれません。(左カラムしか下がらない状態です。

二つのカラムの足並みを揃えて画像を設置するにはどうすればいいでしょうか。
[ 2010/01/27 16:03 ] [ 編集 ]
[ 8073 ] > Mさん
今はこのカスタマイズをしているんですよね。

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

まずこれを元に戻してから次のカスタマイズをしてください。

プラグイン3をプラグイン1と2の上に表示する
http://10plate.blog44.fc2.com/blog-entry-280.html

これでお望みのかたちになるはずです。行程が多いのでテンプレートのバックアップをとってから進めてください。

[ 2010/01/27 23:24 ] [ 編集 ]
[ 8315 ] lightframe 2カラム化
lightframe 2カラム化です
【左側をメニュー、右側を記事にする場合】を実行しました

この上にプラグイン3を両端まで表示させるにはどうすればいいですか?

いっぱい質問しちゃってすみません><
[ 2010/02/10 21:43 ] [ 編集 ]
[ 8317 ]
>>d0w0bさん
<!--▼▼ プラグイン カテゴリー3 ▼▼-->
の上にある、
<div id="center-left">
<div id="center">
を、<!--▲▲ プラグイン カテゴリー3 ▲▲-->
の下に移動させてください。
[ 2010/02/10 22:53 ] [ 編集 ]
[ 9167 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2013/02/26 20:23 ] [ 編集 ]
コメントの投稿









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

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

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

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

いたおの他の運営サイト
カレンダー
08 | 2016/09 | 10
- - - - 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をここに
今日の日付入りカレンダー

08 | 2016/09 | 10
- - - - 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 -
ユーザータグ


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