orange_cat_regular、blue_cat_regularの右カラムと左カラムの幅修正

orange_cat_regular、blue_cat_regularの右カラムと左カラムの幅を修正する方法を以下に紹介しますm(_._)m

ステップ1:
http://blog6.fc2.com/f/ff12expo/file/sidebar_orange.gif
↑この画像をダウンロードする
（URLをブラウザに入力すると画像が出てくるので
その画像の上で右クリック->名前を付けて画像を保存[IEの場合])

（この画像は左カラムのメニュー部分の幅に合わせて作ってあります
なので、狭くしたい場合は小さく、広くしたい場合は大きくなるように修正して下さい）

ステップ2:
ダウンロードした画像を自分がこのくらいの幅と思う大きさに修正する
（例えば
http://blog7.fc2.com/c/chanu/file/sidebar_orange_short.gif
↑これくらいの大きさに切り取って保存する）
その画像を自分の管理画面の「ファイルアップロード」機能を利用してアップロードする
アップロードしたらCSSファイルにある以下のような部分の記述を
新しくアップロードした画像のURLに変更する
（下の見本はすでに新しい画像のURLに変更してあります）
#left_column {
line-height : 1em;
background : transparent url("http://blog7.fc2.com/c/chanu/file/sidebar_orange_short.gif") left top repeat-y;
border-left: 1px solid #FFD700;
}

ステップ3:
HTML内の以下のような部分に修正を加える
■修正箇所1つ目
【修正前】
<table width="740px" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="270px" align="left" valign="top" id="left_column">
【修正後】
<table width="740px" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="240px" align="left" valign="top" id="left_column">

■修正箇所2つ目
【修正前】
</td>
<td width="470px" align="left" valign="top" id="right_column">
【修正後】
</td>
<td width="500px" align="left" valign="top" id="right_column">

この時上の部分は左側のカラムの幅を示し
下の部分は右側のカラムの幅を示しているので
左側のカラムで減らした数だけ、右側のカラムの数を増やしてやるようにする
右左合計で740になるように注意する

以上で変更は終了です
何か不具合がある場合はコメント等でお知らせくださいm(_._)m

人気blogランキング参加中

↑ワンクリックよろしくお願いいたしますm(_._)m