うぃず FC2テンプレート

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

『02Tシリーズ』プラグインメニュー(サイドバー)の位置を右から左に変えたい

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

  • 要望があったため、プラグインメニューバー(サイドバー)を右から左に移す方法を記しておきます。

    せっかくお気に入りのテンプレートを発見しても、プラグインメニューの位置が気に入らなければ、使いもんにならなくなってしまいますよね。

    そんな人のために('∀`)



    スポンサードリンク


    【テンプレートの設定】→【02T_White(の編集をクリック)】→【02T_White のHTML編集】を見てください。

    ①、02T_White の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 ▲▲-->

    <!--▼▼ プラグイン カテゴリー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><!--/left-->

    <br class="c-both" />

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

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

    <!--/index_area-->

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




    ②、次に02T_White1 のスタイルシート編集します。

    /******************************************* ▼ サイトの幅 ▼ */
    #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;
    }
    /******************************************* ▲ サイトの幅 ▲ */



    上記の記述を以下のように書き換えてください。

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





    これで、プラグインメニューサイドバー)を右から左、あるいは左から右に変えることだって可能になりますね。

    関連記事
    コメントの投稿












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

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

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

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

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


    FC2ブロガー必見!

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


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


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

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