■Liquid Pianoの本文カラムを広げる。


各テンプレートの中には、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


以上のリンク先の画像をダウンロードし、自分のＰＣに保存します。

ブログの管理画面にログインし、全ての画像をアップロードします。
アップロードした画像のＵＲＬだけを抜き出して、まとめておきます。

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

ＣＳＳの上記の各要素の画像のＵＲＬを、アップロードした画像のＵＲＬに置き換えます。


下に示す要素の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広がるはずです。
自己責任でトライしてみてください。