うぃず FC2テンプレート

FC2ブログのテンプレートの配布や、コピペで簡単にカスタマイズできるような方法を紹介しています。
FC2ブログで使えるテンプレートを配布しています
2013.05.10 00:46|folder.png カスタマイズcomment.png(0)

『02Tシリーズ』3カラムにしたい(サイドバー2つ)

  • このエントリーをはてなブックマークに追加

  • 『02Tシリーズ』というのは、『02T_(名前)』という名前のテンプレートです。

    さて「3カラムもかっこいいけど、3カラムにしたい!」という要望があったため、

    書き換え方を記しておきます。3カラムは個人的に好きなのですが、左右にいろんな情報がありますので、記事を若干見づらくしているのかなーと考えたりしています。

    詳細は、つづきから(´Д` )



    スポンサードリンク


    HTML編集

    <div id="left">

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

    <br class="c-both" />

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

    <div id="right">
    <!--index_area-->

    <!--/index_area-->
    <!--▼▼ プラグイン カテゴリー1 ▼▼-->
    <!--plugin-->
    <!--plugin_first-->
    <div class="plugin1_outline">
    <div class="plugin1_title ta_<%plugin_first_talign>"><%plugin_first_title></div>
    <div class="plugin1_body ta_<%plugin_first_align>">
    <!--plugin_first_description-->
    <div class="p1u_description ta_<%plugin_first_ialign>"><%plugin_first_description></div>
    <!--/plugin_first_description-->
    <%plugin_first_content>
    <!--plugin_first_description2-->
    <div class="p1d_description ta_<%plugin_first_ialign>"><%plugin_first_description2></div>
    <!--/plugin_first_description2-->
    </div><!--/plugin1_body -->
    </div><!--/plugin1_outline-->
    <!--/plugin_first-->
    <!--/plugin-->
    <!--▲▲ プラグイン カテゴリー1 ▲▲-->

    <!--▼▼ プラグイン カテゴリー2 ▼▼-->
    <!--plugin-->
    <!--plugin_second-->
    <div class="plugin2_outline">
    <div class="plugin2_title ta_<%plugin_second_talign>"><%plugin_second_title></div>
    <div class="plugin2_body ta_<%plugin_second_align>">
    <!--plugin_second_description-->
    <div class="p2u_description ta_<%plugin_second_ialign>"><%plugin_second_description></div>
    <!--/plugin_second_description-->
    <%plugin_second_content>
    <!--plugin_second_description2-->
    <div class="p2d_description ta_<%plugin_second_ialign>"><%plugin_second_description2></div>
    <!--/plugin_second_description2-->
    </div><!--/plugin2_body-->
    </div><!--/plugin2_outline-->
    <!--/plugin_second-->
    <!--/plugin-->
    <!--▲▲ プラグイン カテゴリー2 ▲▲-->
    </div><!--/right-->


    という箇所があると思うので、以下のように書き換えます。


    <div id="left">
    <!--▼▼ プラグイン カテゴリー1 ▼▼-->
    <!--plugin-->
    <!--plugin_first-->
    <div class="plugin1_outline">
    <div class="plugin1_title ta_<%plugin_first_talign>"><%plugin_first_title></div>
    <div class="plugin1_body ta_<%plugin_first_align>">
    <!--plugin_first_description-->
    <div class="p1u_description ta_<%plugin_first_ialign>"><%plugin_first_description></div>
    <!--/plugin_first_description-->
    <%plugin_first_content>
    <!--plugin_first_description2-->
    <div class="p1d_description ta_<%plugin_first_ialign>"><%plugin_first_description2></div>
    <!--/plugin_first_description2-->
    </div><!--/plugin1_body -->
    </div><!--/plugin1_outline-->
    <!--/plugin_first-->
    <!--/plugin-->
    <!--▲▲ プラグイン カテゴリー1 ▲▲-->
    </div><!--/left-->

    <br class="c-both" />

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

    <div id="right">
    <!--index_area-->

    <!--/index_area-->


    <!--▼▼ プラグイン カテゴリー2 ▼▼-->
    <!--plugin-->
    <!--plugin_second-->
    <div class="plugin2_outline">
    <div class="plugin2_title ta_<%plugin_second_talign>"><%plugin_second_title></div>
    <div class="plugin2_body ta_<%plugin_second_align>">
    <!--plugin_second_description-->
    <div class="p2u_description ta_<%plugin_second_ialign>"><%plugin_second_description></div>
    <!--/plugin_second_description-->
    <%plugin_second_content>
    <!--plugin_second_description2-->
    <div class="p2d_description ta_<%plugin_second_ialign>"><%plugin_second_description2></div>
    <!--/plugin_second_description2-->
    </div><!--/plugin2_body-->
    </div><!--/plugin2_outline-->
    <!--/plugin_second-->
    <!--/plugin-->
    <!--▲▲ プラグイン カテゴリー2 ▲▲-->
    </div><!--/right-->


    これで、HTMLの編集はおしまいです。こうすれば、プラグイン1が左側、プラグイン2が右側として現れるようになります。逆にしたければ、

    <!--▼▼ プラグイン カテゴリー1 ▼▼-->から<!--▲▲ プラグイン カテゴリー1 ▲▲-->までの記述と、<!--▼▼ プラグイン カテゴリー2 ▼▼-->から<!--▲▲ プラグイン カテゴリー2 ▲▲-->までの記述とを、入れ替えてあげてください。

    スタイルシート編集

    /******************************************* ▼ サイトの幅 ▼ */
    #outline {
    min-width:1050px;
    width:100%; /* 全体 */
    margin:0 auto;
    }
    #outline_main {
    width:1050px; /* 全体 */
    margin:0 auto;
    }
    #center {
    width:735px; /* 中央 */
    float:right;
    }
    #left {
    width:0px; /* 左 */
    float:left;
    }
    #right {
    width:305px; /* 右 */
    float:right;
    }
    #center-left { /* 計算して設定してください ------ */
    width:735px; /* (全体-左-中央-右)/2 + 左 + 中央 */
    float:left;
    }
    /******************************************* ▲ サイトの幅 ▲ */



    各色の値を変更してください。

    例えば、
    ・中央(記事部分)の広さを600px
    ・左のサイドバー220px
    ・右のサイドバー220px
    にしたい場合、

    /******************************************* ▼ サイトの幅 ▼ */
    #outline {
    min-width:1050px;
    width:100%; /* 全体 */
    margin:0 auto;
    }
    #outline_main {
    width:1050px; /* 全体 */
    margin:0 auto;
    }
    #center {
    width:600px; /* 中央 */
    float:right;
    }
    #left {
    width:220px; /* 左 */
    float:left;
    }
    #right {
    width:220px; /* 右 */
    float:right;
    }
    #center-left { /* 計算して設定してください ------ */
    width:825px; /* (全体-左-中央-右)/2 + 左 + 中央 */
    float:left;
    }
    /******************************************* ▲ サイトの幅 ▲ */



    このように書き換えることで、2カラムから3カラムに変えられるようになりました!
    関連記事
    コメントの投稿












    管理者にだけ表示を許可する
    トラックバック
    この記事のトラックバックURL

    検索フォーム
    スマートフォン用テンプレート
    カスタマイズしやすいように考慮してHTMLを記しています。
    SP01_Gray
    スマートフォンテンプレートグレー
    グレーが基本色のテンプレートです。
    メインカラー :#444444
    メニューカラー:#333333
    サブカラー  :#EFEFEF
    ラインカラー :#999999
    で主に構成しています。CSSにて色指定箇所を置換すれば簡単に色替えが可能です。 お好みの色に変更して楽しんでください。

    SP01_Blue
    スマートフォンテンプレート青
    爽やかな水色が基本色のテンプレートです。
    TopNTagCloud

    フリーエリア
    メールフォーム
    何か質問等ありましたらお気軽にお問い合わせください。

    名前:
    メール:
    件名:
    本文:


    FC2ブロガー必見!

    必ず結果が出るブログ運営テクニック


    もっとカスタマイズしたい方必見!


    毎日メンテナンスするだけで・・・

    最新トラックバック
    ブロとも申請フォーム