スポンサーサイト

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

simple_columnsの記事横幅カスタマイズ

simple_columnsを利用されている方で
横幅の大きい写真を載せたら

hamidashi.gif

こんな風になってしまって
とても見られた状態じゃなくなった
(´Д⊂グスン
という経験をされた方がいるのではないでしょうか

写真の横幅はある程度考えて
投稿しないといけない部分はあるのですが

どうしても乗せたい写真が大きくなる傾向があるので
右側の記事の部分の横幅をもう少し大きくできないだろうか


という要望に答えるカスタマイズ方法をご紹介したいと思います
(全部表示するには↓をクリックして下さいm(_._)m)

<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="220" align="left" valign="top" id="left_column">
<-- 途中省略しています -->
</td>
<td width="10" align="left" valign="top" id="middle_column">
 
</td>
<td width="370" align="left" valign="top" id="right_column">
<-- 途中省略しています -->
</td></tr>
</table>



(途中省略した部分がかなり大きいので
探すのがちょっと苦労かもしれませんががんばって下さい)
↑のオレンジの部分の数字を大きくする事で
右側の記事の部分を任意の横幅に変更する事が出来ます

例えば
乗せたいと思っている写真の横幅が
いつも400くらいの大きさになってしまうという場合は

370の部分を420位に変更し
370が50増えたので
600の部分にも50を足して
650に変更します

例)

<table width="650" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="220" align="left" valign="top" id="left_column">
<-- 途中省略しています -->
</td>
<td width="10" align="left" valign="top" id="middle_column">
 
</td>
<td width="420" align="left" valign="top" id="right_column">
<-- 途中省略しています -->
</td></tr>
</table>



さらに
CSS部分にも変更を加えて下さい
CSSの上部に以下のような部分があります
/* Layout
------------------------------------------------------------ */
div#container {
margin-top : 0px;
margin-bottom: 0px;
/*↓この幅を指定するとブログ部分がこの幅でブラウザの中央に表示される*/
width : 600px;
height: 100%;
margin-left : auto;
margin-right : auto;
text-align : left;
}

↑ここを
↓このように変更して下さい(例に挙げた変更の場合)
/* Layout
------------------------------------------------------------ */
div#container {
margin-top : 0px;
margin-bottom: 0px;
/*↓この幅を指定するとブログ部分がこの幅でブラウザの中央に表示される*/
width : 650px;
height: 100%;
margin-left : auto;
margin-right : auto;
text-align : left;
}

これで左側の記事の部分の列が少しだけ大きくなったと思います

今回紹介した方法で
ある程度の横幅を広げる修正は出来ますが
その広げた横幅よりもさらに広い幅の写真を載せれば
当然テンプレートの形が崩れる事になります

どうしても
横幅に制限が出来てしまう構造なので
写真を載せる時には
なるべく記事部分の横幅を少し気にしていただいて
写真の横幅がおおきかった場合には写真の大きさを修正してからアップする
などの工夫が必要になってくるかと思います

色々気遣いが必要なテンプレートかと思いますが
どうかかわいがってやってもらいたいと思っています
よろしくお願いいたしますm(_._)m

スポンサーサイト

KH2 ワールド(アグラバー)«  | HOME |  »skyblue_catとskyblue_cat_regularのミニ・カスタマイズ

コメント

コメントの投稿

管理者にだけ表示を許可する

トラックバック

http://ff12expo.blog6.fc2.com/tb.php/132-927b3d26

 | HOME | 

FF12発売中
FF12関連ゲーム+音楽
発売中のお勧めゲーム
これから発売予定のお勧めゲーム
    とてもいい励みになっています!
    一日ワンクリックお願いします!↓
  • psBlogRanking.gif
今日: 昨日:
TOTAL:

RECENT ENTRIES

CATEGORIES

RECENT COMMENTS

【リンクについて】
このサイトはリンクフリーです

FF12 Expo お勧め


    Micro Button黒_logobmb




    アフィリエイトはここからスタート!LinkShare


APPENDIX

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