Powered By FC2ブログ
ブログやるならFC2ブログ
今すぐブログを作っちゃおう!

--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2007年03月18日

トップを3カラムに、それ以外を2カラムにカスタマイズする

せっかく2カラムを作成しましたので、少しアレンジしてみましょう。トップページを3カラム、それ以外を左メニューの2カラムにしてみます。意外と簡単にできますよ。

1.カスタマイズテンプレートのダウンロード

blogtube_extra_32.txt
blogtube_extracss.txt

解説もしますが、カスタマイズ済みのテンプレートはダウンロードできます。新しいテンプレートを用意して、それに貼り付けてみて下さい。プレビューだとトップだけしか表示されませんので、更新して適用しないと確認できません。

2.index_areaとnot_index_area

今回はトップ(index_area)とそれ以外(not_index_area)でカラム数を変えますので、テンプレートで使用できる変数をうまく使って表示を切り替えます。


<!--index_area-->
<body class="layout-three-column">
<!--/index_area-->

<!--not_index_area-->
<body class="layout-two-column-left">
<!--/not_index_area-->

bodyでカラム数を変更できますので、index_areaとnot_index_areaの変数を用いて切り替えます。もちろん逆もできますし、右メニューと左メニューでの切り替えも可能です。意味ないと思いますが。

3.右メニューの削除


<!--index_area-->
<!-- 右メニュー開始 -->
<div id="box-right">
~
</div><!-- box-right -->
<!-- 右メニュー終了 -->
<!--/index_area-->

テンプレートの説明で、左メニュー2カラムの場合は右メニューを削除すると説明していますが、トップだけ表示するindex_areaで囲めばトップ以外では削除(非表示)されます。
ちなみに紹介しているテンプレートでは、フリーエリア、プラグイン2が表示されます。

4.左メニューの切り替え

汎用的にするため、トップとそれ以外で切り替えます。トップはプラグイン1とFC2ブログの広告を表示します。


<!--index_area-->
<!-- 左メニュー開始 -->
<div id="box-sub">

<!--plugin-->
<!--plugin_first-->

<div class="lefttitle">
<%plugin_first_title>
</div><!-- lefttitle -->

<div class="leftmain">
<%plugin_first_description>
<%plugin_first_content>
<%plugin_first_description2>
</div><!-- leftmain -->

<!--/plugin_first-->
<!--/plugin-->

<!-- FC2ブログ広告 ★削除不可★ 開始↓ -->
<h3 class="lefttitle">
Appendix
</h3>
<div class="leftmain"><!-- Ad -->
<%ad><br />
<%ad2>
</div><!-- Ad -->
<!-- FC2ブログ広告 ★削除不可★ ここまで↑ -->

</div><!-- box-sub -->
<!--/index_area-->

次にトップ以外ですが、メニューが左だけになるので、プラグイン3を使用してみます。これでトップのメニューと完全に切り離せますので、管理が簡単になります。
もし単純にプラグイン1とプラグイン2を連続させたい場合は変更してください。もちろんFC2ブログの広告も表示します。


<!--not_index_area-->
<!-- 左メニュー開始 -->
<div id="box-sub">

<!--plugin-->
<!--plugin_third-->

<div class="righttitle">
<%plugin_third_title>
</div><!-- righttitle -->

<div class="rightmain">
<%plugin_third_description>
<%plugin_third_content>
<%plugin_third_description2>
</div><!-- rightmain -->

<!--/plugin_third-->
<!--/plugin-->

<!-- FC2ブログ広告 ★削除不可★ 開始↓ -->
<h3 class="lefttitle">
Appendix
</h3>
<div class="leftmain"><!-- Ad -->
<%ad><br />
<%ad2>
</div><!-- Ad -->
<!-- FC2ブログ広告 ★削除不可★ ここまで↑ -->

</div><!-- box-sub -->
<!--/not_index_area-->

やっていることは単純で、カラム変更の応用です。

5.いくつかのヒント

プラグインは以下のようになりますので、変更する場合にどうぞ。(プラグインxという文字は説明文ですので、その下から貼り付けてください)


プラグイン1
<!--plugin-->
<!--plugin_first-->

<div class="lefttitle">
<%plugin_first_title>
</div><!-- lefttitle -->

<div class="leftmain">
<%plugin_first_description>
<%plugin_first_content>
<%plugin_first_description2>
</div><!-- leftmain -->

<!--/plugin_first-->
<!--/plugin-->

プラグイン2
<!--plugin-->
<!--plugin_second-->

<div class="righttitle">
<%plugin_second_title>
</div><!-- righttitle -->

<div class="rightmain">
<%plugin_second_description>
<%plugin_second_content>
<%plugin_second_description2>
</div><!-- rightmain -->

<!--/plugin_second-->
<!--/plugin-->

プラグイン3
<!--plugin-->
<!--plugin_third-->

<div class="righttitle">
<%plugin_third_title>
</div><!-- righttitle -->

<div class="rightmain">
<%plugin_third_description>
<%plugin_third_content>
<%plugin_third_description2>
</div><!-- rightmain -->

<!--/plugin_third-->
<!--/plugin-->

カラムサイズの変更ですが、細かい計算は置いておいて、メニューとメインカラムの変更だけなら以下を参考にしてください。


.layout-two-column-left #box-main,
.layout-two-column-right #box-main{
float: right;
width: 660px;
}

.layout-two-column-left #box-sub{
float: left;
width: 230px;
}

上がメインカラム、下が左カラムです。合計を890pxにしてください。

スポンサーサイト

コメント

こんばんわ☆

わぁ~♪
こんなに早く作成していただき、本当に嬉しく思います。
本当にありがとうございました。
今から頑張ってやってみます。
もし何かわからないことがあったらまたよろしくお願いします♪
感謝です☆彡

出来ましたぁ~♪

おかげ様で、私が思っていた通りに仕上がりました!!
すごく嬉しいです(≧▽≦)♪
本当にありがとうございました。
これからも困った時はtemplatetubeさんのブログで勉強させてもらいます☆
今後ともよろしくお願いします。

ご親切に本当にありがとうございました。

お手柔らかに

☆みぅ☆さん、こんにちは。

上手くできたようでよかったですね。
私もそれ程詳しいわけではありませんので、あまり突っ込まれると
答えられないかもしれません。
あまり時間が無いので、ちょびちょびしか更新しませんが、
またおいでください。

調味料

調味料を探すなら http://www.mnpainctr.com/100227/100300/

財布・コインケース・マネークリップ

財布・コインケース・マネークリップ http://tonies.archiunite.net/

コメントの投稿

サイト管理者にのみ通知する

トラックバックURL

http://templatetube.blog78.fc2.com/tb.php/22-25f1bdf9
プロフィール

templatetube

Author:templatetube
FC2ブログへようこそ!

最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

Appendix


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。