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

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

プラグイン３をプラグイン１と２の上に表示する

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



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

20090820_2.gif

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

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

<div id="center-left">

<div id="center">

<!--▼▼ プラグイン カテゴリー３ ▼▼-->
～
<!--▲▲ プラグイン カテゴリー３ ▲▲-->

～

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

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

<div id="center-left">

<!--▼▼ プラグイン カテゴリー３ ▼▼-->
～
<!--▲▲ プラグイン カテゴリー３ ▲▲-->

<div id="left">

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

～

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

</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; /* 左 プラグイン１の幅 */
float:left;
}
#right {
width:217px; /* 右 プラグイン２の幅 */
float:right;
}
#center-left { /* 計算して設定してください ------ */
width:763px; /* (全体-左-中央-右)/2 + 左 + 中央 */
width:444px; /* プラグイン１＋余白＋プラグイン２ */
float:left;
float:right;
}
/* ▲ サイトの幅 ▲ */



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

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

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

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


【関連記事】
記事を左カラム、プラグインを中央と右カラムに表示する
プラグインカテゴリ３を常に表示させる
関連記事
[ 2009/08/20 23:35 ] カスタマイズ lightframe 専用 | TB(0) | CM(29)

≪ この記事へのトラックバック(FC2ブログユーザーのみ) | HOME | Firefox等でCSSが反映されないときは ≫

[ 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 ] おはようございます
いつもお世話になっております。
プラグイン３はそのままにして、１と２の上にフリーエリアは出来ませんでしょうか?

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

｜　　　　ヘッダー　　　　　｜
｜　　　　　記事　　　　　　｜
｜　　　　プラグイン３　　　｜　　
｜プラグイン１｜プラグイン２｜
｜　　　　フッター　　　　　｜

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

こちらの方法で出来ると思います。
【フリーエリアを作る】
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 ]
自分は上の記事どうりにしてすると
プラグインの下にフッターが表示されます。

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

まぁ、上の記事どうりの場所にフッターが表示されるということです。ｗｗｗ
[ 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 ] > ぷーさん、ちゃんさん
> ぷーさん
プラグイン１と２の表示位置を入れ替えたいときは、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 ] > ぷーさん
記事を掲載したのでこちらを参考にしてください。

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

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

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

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

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

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

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

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

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

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

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









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

≪ この記事へのトラックバック(FC2ブログユーザーのみ) | HOME | Firefox等でCSSが反映されないときは ≫

ブログ内検索1



サイトマップ

カテゴリ別全記事一覧表示

カテゴリ
お薦め カスタマイズ

【共通】


【lightframe】
【standard】
【スマホ用】

プロフィール

いたお

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

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

いたおの他の運営サイト
iPhoneアプリも作ってます
ありがとうございます

先生達

RSSフィード
カレンダー
02 | 2023/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 | 2023/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 -
サイト外タグ検索
ユーザータグ

メニューバー よくある質問 



△ ページトップへ戻る