うぃず FC2テンプレート

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

スポンサーサイト

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

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


    スポンサードリンク



    2012.12.13 17:25|folder.png カスタマイズcomment.png(0)

    ブログの幅、プラグインエリアの幅を変更したい

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

  • ブログの幅やプラグインエリアの幅の変更方法を紹介したいと思います。

    スタイルシートの幅を設定している値の変更を行うだけで良いので、簡単です。

    ・記事エリアを狭くしてプラグインエリアを大きくしたりも簡単に出来るようになります。

    スポンサードリンク


    スタイルシート編集
    スタイルシート中にある、以下のような記述を探してください。

    /******************************************* ▼ サイトの幅 ▼ */
    #outline_header {
    min-width:1110px; /* 最低の幅(これ以上狭くなりません) */
    width:100%; /* ヘッダ全体(リキッドレイアウトです) */
    margin:0 auto;
    }
    #outline_footer {
    min-width:1110px; /* 最低の幅(これ以上狭くなりません) */
    width:100%; /* フッター全体(リキッドレイアウトです) */
    margin:0 auto;
    }
    #outline_main {
    width:1110px; /* 全体 */
    margin:0 auto;
    }

    #main {
    width:635px; /* メイン*/
    float:left;
    }
    #first {
    width:260px; /* プラグイン1の幅 */
    float:right;
    }
    #second {
    width:205px; /* プラグイン2の幅 */
    float:right;
    }
    #main-first { /* 計算して設定してください ------ */
    width:900px; /* (【全体】-【プラグイン1】-【メイン】-【プラグイン2】)/2 + プラグイン1 + メイン */
    float:left;
    }
    /******************************************* ▲ サイトの幅 ▲ */



    赤い部分の数値を変更すれば、幅を変更できます。

    #outline_headerのmin-width
    #outline_footerのmin-width
    #outline_mainのwidth
    は同じ値が望ましいです。


    width:635px; /* メイン*/

    ここの値は記事のエリアになります。デフォルトでは635pxにしています。

    width:260px; /* プラグイン1の幅 */

    ここの値は真ん中のエリアであるプラグイン1の幅になります。デフォルトでは260pxにしています。

    width:205px; /* プラグイン2の幅 */

    ここの値は右のエリアであるプラグイン2の幅になります。デフォルトでは205pxにしています。

    width:900px; /* (【全体】-【プラグイン1】-【メイン】-【プラグイン2】)/2 + プラグイン1 + メイン */

    ここで3つのエリアの幅の値に従って、値を決定してください。

    上記の例ですと、(【1110px】−【635px】−【260px】−【205px】)/2【260px】+【635px】= 900px
    となります。


    もし、記事エリアとプラグインエリアとの間隔をゼロにしたいのであれば、
    (【全体】-【プラグイン1】-【メイン】-【プラグイン2】)/2の値を0にして、残りのプラグイン1 + メインの幅をwidthに記入すればOKです。



    関連記事
    コメントの投稿












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

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

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

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

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


    FC2ブロガー必見!

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


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


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

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

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