Home > スポンサー広告 > FC2ブログのレイアウトの幅を可変にする

スポンサーサイト

スポンサー広告

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

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/71-f704464e
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog

Home > スポンサー広告 > FC2ブログのレイアウトの幅を可変にする

Home > blog > FC2ブログのレイアウトの幅を可変にする

FC2ブログのレイアウトの幅を可変にする

blog

今使っている sharpgreenテンプレートは幅が固定されているので、幅を可変にカスタマイズする

CSSによる段組(マルチカラム)レイアウト講座などのサイトを読んでいたが、難しく断念していた。

検索したら偶然Harukiya Archivesというサイトを見つけた。 sharpgreenの幅を可変にする方法そのものが書いてあった。

sharpgreenのブロック分けと回り込み(float)のさせ方はオーソドックスなので、各ブロックに指定されているwidthの値を相対値にするだけの小変更で可能です。

Harukiya Archives

こんな簡単にやれてしまうんだろうか。

sharpgreenのレイアウト

sharpgreenのレイアウト

A div#all
外枠を除いた全体。
B div#main
メイン。記事。
C div#menu
サイドバー。メニュー。
sharpgreenのデフォルトの CSS
body {
  text-align : center;
}
#all {
  margin: 20px auto;
  width: 720px;
  text-align: left;
}
#main {
  width: 500px;
  margin: 0 10px 0 0;
  float: right;
}
#menu {
  width: 185px;
  float: left;
  text-align: center;
  padding: 0 0 15px 0;
}
幅を可変にカスタマイズした CSS
body {
  text-align : center;
}
#all {
  margin: 30px auto;
  width: 90%;
  text-align: left;
}
#main {
  overflow: hidden;
  width: 73%;
  margin: 0 2% 0 0;
  float: right;
}
#menu {
  width: 22%;
  float: left;
  text-align: center;
  padding: 0 0 15px 0;
}

Harukiya Archivesに書いてある通りに widthの値を相対値の %単位に変えただけです。

一応成功しました。

問題点は、ブラウザのクライアントエリアの幅を狭くした時、サイドバーのメニューのタイトルの画像が切れてしまうこと。タイトルが間延びして、間抜け顔になったことかな。

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/71-f704464e
Listed below are links to weblogs that reference
FC2ブログのレイアウトの幅を可変にする from Karafuto Blog

Home > blog > FC2ブログのレイアウトの幅を可変にする

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

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