スポンサーサイト

  • --.--.--  --曜日
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
FC2ランキング

幅の変更

  • 2008.06.24  火曜日
2カラム 3カラム

左図が2カラムの構成、右図が3カラムの構成です。2カラムの左サイドバーはsideが左側になるだけなので省略しています。

全体を囲むのが container で、メインカラムが content 、サイドカラムは2カラムの場合 side で、 3カラムは side-leftside-right 。 3カラムでは左カラムとメインカラムを囲む wrapper があります。

幅を拡げるにはスタイルシートでそれぞれのwidthの値を変更します。
#container{
width:●●px;

メインカラム・サイドカラムの数値を変更する場合は、必ずcontainerも変更してください。
3カラムの場合はwrapperも変更します。以下は一例です。

2カラム3カラム
content
side
container
520px → 550px(+30)
220px → 240px(+20)
750px → 800px(+50)
content
side-left
wrapper
side-right
container
420px → 450px(+30)
180px → 200px(+20)
610px → 660px(+50)
180px → 200px(+20)
800px → 870px(+70)

構成の違い

テンプレート「kanso」ではデザイン上、メインカラムと右カラムをwrapperで囲んでいます。 今後もデザインによって、多少違う構成もあるかも知れませんが、やり方は同じです。スタイルシートの注釈からどのような構成か把握できると思いますので、理解した上で変更してください。

固定幅の背景画像

固定幅の背景画像を設定しているテンプレートの場合、背景画像も同じように 幅の変更をしなくては見た目が変わりません。画像加工はサイズ変更のみ可なので、元の画像のイメージを崩さないよう、 画像加工の知識のある方のみ行ってください。

FC2ランキング

この記事へのコメント

 
  • あずき
  • URL
  • 2009.02.23 16:48

はじめまして…omiseya-san_3を使わせて貰ってます。
全体のカラー&お店屋さんの可愛らしさが大好きです♪

ですが、記事を書きだして気づいたんですが、バナーを貼ると、少しはみ出してしまします(ノ_-;)

両サイドバーを少し狭くして、content(メイン)を
あと1㎝だけ、広げることって可能でしょうか?

FC2のサポートの方で質問したら、このテンプレートは画像が使われているので、作者の方に聞いては?と言うアドバイスを頂きました。

お忙しいとは、思いますがお返事頂ければ 嬉しいです。

 

はじめまして、あずきさん

テンプレート気に入ってくれて嬉しいです。

ご質問の件ですが、記事に書いてある通りスタイルシートのwidthの値を変更し、背景画像も同じように幅を変更すれば出来ますよ。

1㎝というのは目分量で測った数値のようなので、表示したいバナーのちゃんとした数値を調べてからなさった方がいいと思います。(単位はピクセルで)

画像の加工に関しては、元画像のイメージを崩さないようにお願いいたします。画像のサイズ変更のやり方などは、どのソフトをお使いになるか分かりませんが、詳しいサイトがあると思うので使用方法などはそういったサイトを参考にしてください。

あまりカスタマイズ向きのテンプレートではないので大変かもしれませんが、頑張ってくださいね。

それからブログを拝見したところ、Firefoxではヘッダー画像が表示されませんでした。こちらのケース(http://masimarock.blog92.fc2.com/blog-entry-114.html)と同じようなので、修正してみてください。
 
  • あずき
  • URL
  • 2009.03.01 01:55

今晩は…バナーサイズは468pxだったので
468px+余白pxを計算して入れたのに
全然、思うようにできませんでした><

教えていただいたのに、ごめんなさい。
 

そうですか…

もう諦めてらっしゃるかも知れませんが、一応簡単なやり方を書いておきます。

入れたいバナーが468px、元々のテンプレートに入る幅は417pxです(テンプレート記事に記載しています)。差は51pxですから、container・wrapper・contentのwidthの値を+51にします。

それから、全体とメインカラムに使用している背景画像も+51pxにして、サイズ変更した画像をご自身のブログへアップロードします。スタイルシートの該当する画像のアドレスを変更し保存。

それからブログを確認します。以前のキャッシュが残ってると思うので、リロードして確認してみてください。これでちゃんと表示されると思います。
 
  • あずき
  • URL
  • 2009.03.05 01:17

カスタマイズって難しいもんですね…

チャコ さん、ありがとうございます。
下の矢印のサイズを変更するだけで、出来るのかと
思ってました。(汗)
(サイズ変更した画像をご自身のブログへアップロード)
ここまでの、スキルが無いのでテンプレートあきらめて
他の物を…(勝手な事を言ってすみません)でも、
やっぱり、無くて…このまま、使わせて下さい。
他のものじゃ~しっくりこなくてv-390
記事画像でテンプレートが崩れないように気をつけます。

/* 全体 */
#container{
background:url("http://blog-imgs-10.fc2.com/m/a/s/masimarock/bg_02_3.gif") repeat-y;
text-align:left;
margin:0px auto;
width:901px;} ←+51px

/* メインカラムと左カラム */
#wrapper{
float:left;
width:659px;} ←+51px

/* メインカラム */
#content{
float:right;
width:451px;} ←+51px
 

一応記事にも1回目の返答にも、画像について書いていたのですが…v-388

カスタマイズは、ある程度HTMLとCSSを理解してないと難しいかもしれませんね。理解できたら、また挑戦してみてはいかかでしょうか。

ところで、スタイルシートの一部を書かれたのはどういった意味で…?
 
  • あずき
  • URL
  • 2009.03.05 21:41

チャコさん…気を悪くされたなら、すみませんv-393
contentなどのpxの数字が、違ってたので…
私の見る場所の勘違いかと思ってv-292

書いてたら、見ていただけるかと思い…
甘えすぎでした…すみませんでしたm(_ _ )m

 

いえいえ

全然気を悪くしたとかではなく、ただ文面からはカスタマイズは諦めたと解釈したのですが、最後にスタイルシートの一部を書かれてるので、まだ何か求めてらっしゃるのか、それがどういう事なのか分からなくて…。

>contentなどのpxの数字が、違ってたので…
というのは記事に書いたものと、スタイルシートに書かれた数字が違うという事でしょうか?記事にあるのは一例で、テンプレートの数字とは違いますよ。contentやsideを変更すると、それを囲む部分もそれに応じた数値だけ変えるという事を示したかったのですが、混乱させてしまったでしょうか…。記事に一例だという事を付け足しておきました。
 
  • えむ
  • URL
  • 2009.09.08 16:21
  • 編集

質問

はじめまして、えむといいます
FC2でブログを作成に挑戦しています。
ド素人でわからないことがあるのですが、
ここで質問してもいいでしょうか?

1カラムで幅は画面の半分、
それをセンターに持ってきたいです。
この場合、記事の部分の幅は何pxに設定すればいいのでしょうか?

あと、こういうのを設定する場所はCSSで合ってますか?
 

はじめまして

配布しているテンプレートの質問しか受け付けていないのですが、これはうちのテンプレートのカスタマイズですか?

もしそうでないならFC2フォーラムで質問なさってください。うちのテンプレートであれば、どのテンプレートか教えてください。よろしくお願いします。

↑ページトップ

コメントを書く

※質問は該当するテンプレート記事へお願いします

アイコン
装飾
 
※非公開コメント投稿不可

↑ページトップ

この記事へのトラックバック

この記事にトラックバックする(FC2ブログユーザー)

↑ページトップ

ブログランキング

カテゴリー

プロフィール

カレンダー(月別)

検索フォーム

コメント

リンク

RSSフィード

その他

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