Powered By FC2ブログ
ブログやるならFC2ブログ
今すぐブログを作っちゃおう!
今すぐブログを作っちゃおう!
カスタマイズへのショートカット
- テーブル内のフォントサイズが大きくなる⇒CSSを修正してください
- 今使用しているブログとサイズが異なる⇒各カラムサイズは変更可能です
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さんのブログで勉強させてもらいます☆
今後ともよろしくお願いします。
ご親切に本当にありがとうございました。
すごく嬉しいです(≧▽≦)♪
本当にありがとうございました。
これからも困った時はtemplatetubeさんのブログで勉強させてもらいます☆
今後ともよろしくお願いします。
ご親切に本当にありがとうございました。
お手柔らかに
☆みぅ☆さん、こんにちは。
上手くできたようでよかったですね。
私もそれ程詳しいわけではありませんので、あまり突っ込まれると
答えられないかもしれません。
あまり時間が無いので、ちょびちょびしか更新しませんが、
またおいでください。
上手くできたようでよかったですね。
私もそれ程詳しいわけではありませんので、あまり突っ込まれると
答えられないかもしれません。
あまり時間が無いので、ちょびちょびしか更新しませんが、
またおいでください。
コメントの投稿
トラックバックURL
http://templatetube.blog78.fc2.com/tb.php/22-25f1bdf9
プロフィール
Author:templatetube
ＦＣ２ブログへようこそ！
最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
友達申請フォーム
Appendix
ブログ内検索
RSSフィード
リンク
Powered By FC2ブログ
タグリスト
こんばんわ☆
こんなに早く作成していただき、本当に嬉しく思います。
本当にありがとうございました。
今から頑張ってやってみます。
もし何かわからないことがあったらまたよろしくお願いします♪
感謝です☆彡