ブログの本文の幅を広げたい

                  
       スタイルシートでどの部分がブログの

       本文の幅になっているのでしょうか?

       またどのようにすれば幅を 広げられるでしょうか?


   A  3カラムデザインのカラムの大きさを変更

             
       3カラムデザインのテンプレートは、以下の

      ような部品で構成され、

      下図の様な構造になっています。

                
       (デフォルト2005グリーンのテンプレートの

       CSSを参考にしています。

       全てのテンプレートが同じ構造とは
限りま

       せんのでご確認ください。)

                  #container
                  #wrapper
                  #content
                  #left
                  #right

                 
       それぞれの大きさを指定することで、カラム

       の大きさを変えることができますが、

       一歩間違うとサイドバーが
落ちまくり、慌て

       ふためく、という事態に陥りますので、CSS

       のバックアップは必須です。

                 
       #wrapperというのがちょっとわかりにくい

      のですが、
 「左サイドバーと、真ん中部分を

      包むもの」ということみたいです。

                 
      つまり、#leftと#contentの横幅(width)の

      合計が

      #wrapperより小さく、#wrapperと#rightの

      横幅(width)の合計が#containerより小さく

      ないといけないようです。

                 
     各部品の横幅(width)を変更してみてください。

                 
       各部品の大きさには少し余裕が必要です。

                 
     特にFirefoxでは、marginの解釈の仕方などが

      インターネットエクスプローラーと少し違って、

      かなり厳密なようです
ので、変更後はFirefox

      でもサイドバーなどが落ちていないか、ぜひ

      確認してみてください。


               横幅をいじって大きくすると、カラムがはみ

       出したようになるのですが、#containerの

       背景画像が原因のようです。

                
     ↓この部分を/* */でくくって、CSSが反映され

       ないようにします(コメントアウト)。

                  background:url(http://parts.blog.livedoor.jp/img/usr/new_default_...gif) repeat-y 50% 0;
                  /*background:url(http://parts.blog.livedoor.jp/img/usr/new_default_...gif) repeat-y 50% 0;*/


           
2,A   各テンプレートの中には、CSSで各要素を広げた

    だけでは、各カラムの”枠”が広がらないものが

    あります。

                 
    これはなぜかと言いますと、枠が各カラムの

    背景画像で描画してあるからです。

                 
    ですから、枠を広げるためにはこの画像を全て

    変更しなければなりません。


         それぞれの要素の背景画像をCSSでURLを

    コピーする。  

    そのURLをブラウザに入力し画像を開く。

                 
    右クリックし画像を自分のPCに保存。

                 
    フォトレタッチソフトなどでカスタマイズし、できた

    画像を自分のブログにアップロードする。

                
    画像のURLだけをコピーし、各要素ごとにまとめ

    ておく。 CSSをバックアップし編集する。

                
    各要素の画像を自分でカスタマイズした画像の

    URLと置き換える。

                
    画像をカスタマイズし、広げた幅の分だけ、

   各要素のwidthを広げる。  CSSを保存し、再構築。

                
    以上のような過程を経る必要があります。


        デザインテンプレートの中の「シンプル」にある

    「Liquid Piano」の本文カラムを広げたいという

    ご希望が
寄せられましたので、 実際に本文

    カラムを広げるのに必要な画像を全て100px

    広げたものを備してみました。


         以下、Liquid Pianoテンプレートの本文カラムを

    100px広げる手順をご紹介いたします。


         ■手順■

                #container
                #banner
                #blogcontainer
                #categorytitle,.datetop,#articletop
                .fullbody,#articlebody
                .dateend,#articlebottom


           以上のリンク先の画像をダウンロードし、

     自分のPCに保存します。

               
     ブログの管理画面にログインし、全ての

       画像をアップロードします。

               
     アップロードした画像のURLだけを抜き出し

     て、まとめておきます。

               
    CSSのバックアップを行い、編集を開始します。

               
      CSSの上記の各要素の画像のURLを、

     アップロードした画像のURLに置き換えます。


          下に示す要素のwidthを100pxづつ広げます。

           #container width:786px;→width:886px;
           #banner width:767px;→width:867px;
           #blogcontainer width:765px;→width:865px;

           #wrapper width:585px;→width:685px;
 
                 #content width:405px;→width:505px;

                 #blog width:395px;→width:495px;
                 CSSを保存し、全ページ再構築します。


          一応これで、Liquid Pianoテンプレートの本文の

        カラムが100px広がるはずです。

 カテゴリ
 タグ