注目タグ

テンプレート・プラグイン

トピック詳細

ブログのセンター記事幅とサイドカラム左右幅を今風にしたい

皆様お世話になります。いくつか質問がありましたが、今回はテンプレートの事でお伺いできればと思います。どうぞよろしくお願い 致します。



①センター記事の幅を広くしたい
②サイドカラム左右の幅を広くしたい



この2点を変更したいのですが、そもそも数値変更だけでは
無く過去スレを見ていますと基本の幅を変更しなければいけない
ようですが、CSSやHTMLについてはあまり解りませんので
お教え願えればと思っております。
よろしくお願い致します。



使用しているテンプレート⇒ http://webdb3.blog99.fc2.com/



なかなか他のテンプレートに変更してもしっくりきませんので
ご指導お願い致します。
テンプレートのポイントとしては昔に比べて訪問者のPC画面が大きくなり
幅広テンプレートでも画面に表示されやすくなりましたので、見やすい
テンプレート幅にしたいのです。

具体的にどの幅という事を表現できないのですが、今風で・・・
ワードプレス等によくある幅がいいかと思います。
FC2の共有テンプレートでは中々ないです(汗)
http://webopt.blog70.fc2.com/

この方のサイドカラム程度は欲しいです(目測です)



めぼしいサイトを見つけて定規で図りましたが、
サイドカラムが5センチ程度でセンター記事幅が14.5センチ程度です。


どうぞよろしくお願い致します。

2014年07月13日 12:52  by キムさん

コメント一覧 7件中、1~7件表示

  • 標野ゆき様


    大変お世話になっております。

    問題が解りました。ヘッダー幅の数値を変更をしていなかったため
    画像のようになっていただけでした。
    ご指摘感謝しております。
    考えれば解る事ですが、苦手と思い込んでおり通常の発想が
    出来ていなかったようです。恐縮でございます。

    >width: 1030px;/*+200px*/ <<初期値に+150で980ですね



    しばらくこのまま問題が無いようであれば、改めて質問をして
    見たいと思います。 標野ゆき様には大変感謝いたしております。
    今後ともどうぞよろしくお願い致します。


    2014年07月13日 21:04 by キムさん

  • ヘッダーの背景画像を削除して、背景色を敷くための編集後のスタイル指定は
    .banner_title {
    text-align: left;
    background-color: #336699;
    }
    ↑こちらで間違いありません↑

    質問者さんのブラウザでは
    シメノのコメントの太字タグが正しく反映されていないのかも?

    ヘッダーの幅については
    .banner {
    width: 1030px;/*+200px*/ <<初期値に+150で980ですね

    .entryBodybox {
    width: 478px;/*記事枠幅*/ <<+90で568になりますね

    ↑この2か所がきちんと記述されているでしょうか?↑
    半角と全角が間違っていたり、セミコロンが落ちていたりすると
    正しく反映されない場合があります。

    編集前のスタイル指定と編集後のスタイル指定が混在していますが
    /*+値px*/のコメントがある部分は編集済みで
    それ以外のコメント部分は編集前です。

    ちなみに
    .main {
    float: left;
    overflow:hidden;
    width: 488px;/*メインカラム幅*/<<ここは+90で578になりますね。

    2014年07月13日 20:12 by 標野ゆき

  • 標野ゆ様


    お世話になっております。IPOキムと申します。


    左右カラムの幅変更と記事幅変更は出来ました。
    しかしながらヘッダーの変更がなぜかできません。


    -------------------------------------------


    .banner_title {
    text-align: left;
    background-image: url('http://blog-imgs-12.fc2.com/w/e /b/webdb3/top_tytle_bg_blue_830x10.gif');
    }
    太字の部分を削除して
    background-color: #336699;
    このような指定を追加されてはいかがでしょうか。


    -------------------------------------------

    こちらですが、


    .banner_title {
    text-align: left;
    background-color: #336699;
    }

    こういう事ではないのでしょうか。
    ご親切にアドバイスを頂きましたが、私の無知により手こずって
    おります。お教え願えたらと存じます。。。


    現在の上記CSSでこんな感じになってしまいました。
    添付ファイル


    サイドカラム+30×2
    記事+90
    全体で150px


    ヘッダーの「background-image:」をCtrl+Fで探しますと
    3か所ほど出ますのでこのあたりでうまくいかないのかと思います。
    何度もご親切にご回答真にありがとうございます。


    とても嬉しく思っておりますが、最後の最後で手こずっております(涙)

    2014年07月13日 18:22 by キムさん

  • ヘッダー背景についてですが
    画像を外して、背景色指定に置きかえる方法をお勧めします。

    .banner_title {
    text-align: left;
    background-image: url('http://blog-imgs-12.fc2.co m/w/e/b/webdb3/top_tytle_bg_blue_830x10.gif');
    }
    太字の部分を削除して
    background-color: #336699;
    このような指定を追加されてはいかがでしょうか。
    (プラグインタイトルの背景色と同じです)


    メインカラム幅の変更については
    スタイルシートの

    /* ---------------------------------------- */
    /* ★ 中央記事部分の設定  ★    */
    /* ---------------------------------------- */
    .main {
    float: left;
    overflow:hidden;
    width: 488px;/*メインカラム幅*/
    }
    /* ------- ▼記事の外枠部分▼ ------- */
    .entryBodybox {
    width: 478px;/*記事枠幅*/
    margin: 0px 5px 10px 5px;
    text-align: left;
    border: 1px solid #bbb;
    }
    上の部分を変更します。
    どれだけ広げたいか判らないので、初期値のまま引用しています。

    .container {
    width: 1030px;/*+200px*/
    .banner {
    width: 1030px;/*+200px*/
    この部分で全体幅を広げる。

    .side_left {
    width: 270px;/*+100px*/
    .side_right {
    width: 270px;/*+100px*/
    .sideSet {
    width: 260px;/*+100px*/
    この部分でサイドカラム幅を広げる。

    メインカラム幅の拡張値+サイドカラム幅の拡張値×2=全体幅の拡張値
    となるように調整してください。

    2014年07月13日 16:23 by 標野ゆき

  • 標野ゆき様


    この度は早々のご回答真に感謝致します。


    サイドカラムを変更すると、ヘッダーも崩れるわけですか。
    そうですよね・・・
    お分かりになればさらに教えて頂きたいのですが、
    ヘッダーの境目の部分に何か入れる場合はどうしたらよいのでしょうか?


    そのままヘッダーの境目を同じカラーで覆えばいいのではないかと思った
    次第です。もしくはアフィリンクなどのバナーを入れ込む等。
    知人にイラストレーターがいるので何か作って頂くのもありかと思いました。
    もし見ていらっしゃいましたら、よろしくお願い致します ^^


    知人は画像編集などはしますがHTMLは全然解りません。
    私もあまり解りませんので(汗)
    頼って申し訳ありません。


    センター記事の幅変更の解れば御願いたいところであります。
    失礼致しました。

    2014年07月13日 15:41 by キムさん

  • /* ---------------------------------------- */
    /* ★ 左メニュー全体の設定  ★    */
    /* ---------------------------------------- */

    .side_left {
    float: left;
    overflow:hidden;
    width: 270px;/*+100px*/
    }


    /* ---------------------------------------- */
    /* ★ 右メニュー全体の設定  ★   */
    /* ---------------------------------------- */

    .side_right {
    float: left;
    overflow:hidden;
    width: 270px;/*+100px*/
    }

    /* ---------------------------------------- */
    /* ★ サイドメニューの設定  ★   */
    /* ---------------------------------------- */

    .sideSet {
    width: 260px;/*+100px*/
    margin: 0px 5px 20px 5px;
    text-align: left;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    }

    ヘッダーの背景が画像なので
    左右幅を広げると右側に繰り返し部分ができて、色の境目ができます。
    気になるようなら、画像を中央ぞろえにする、画像の代わりに背景色を敷く
    背景画像を変更するなどの方法があると思います。

    2014年07月13日 14:31 by 標野ゆき

  • 以下はスタイルシートの編集例です。
    サイドカラムを100ピクセルずつ、全体の幅を200ピクセル広げる編集例です。
    /*+値px*/とある部分の値が変更されています。

    プレビューしてみて
    適当でなかったら好みの値に変更してください。
    またスタイルシートのどの部分にあるかはCtrl+F、ページ内検索で探してください。

    /* -- ▼全体の外枠・広さの設定▼ -- */
    .container {
    MARGIN-LEFT: auto;
    MARGIN-RIGHT: auto;
    width: 1030px;/*+200px*/
    background-color: #fff;
    border: 1px solid #bbb;

    .banner {
    width: 1030px;/*+200px*/
    padding: 0px;
    clear: both;
    margin: 0px 0px 15px 0px;
    }

    次の項に続きます。

    2014年07月13日 14:31 by 標野ゆき