ワタクシ、別のコスメブログはWordPressを使ってまして、つい最近テーマをTwenty Elevenに変更しました。
このテーマ、ウインドウの幅によってフレキシブルに変更する「レスポンシブWEBデザイン」になっているのです。これがカスタマイズ分からんくて・・・
本読んで、ネットで調べて、無理矢理やったらなんとか出来たので自分メモ的に書いておきます。
「Style.css」の2つのかたまり部分に修正が必要です。
83行目あたりからの
}
#primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
}
#secondary {
float: right;
margin-right: 7.6%;
width: 18.8%;
}
そしてもう少し下、176行目あたり
/* Right Content */
.left-sidebar #primary {
float: right;
margin: 0 0 0 -26.4%;
width: 100%;
}
.left-sidebar #content {
margin: 0 4% 0 34%;
width: 58.4%;
}
.left-sidebar #secondary {
float: left;
margin-left: 7.6%;
margin-right: 0;
margin-top: 20px;
width: 18.8%;
}
なぁんでこんなに数字が小数点とかになっちゃってるの～？これを図解すると一気に分かりやすくなります。たぶん解釈はあっている・・・はず。
「％」になっているものの、左右幅が1000ピクセルなので計算は楽です。
1000pxで表示してる場合、本文部分にあたる「#content」は584px、サイドバーにあたる「#secondary」は188px、残りのマージンは各76px、というのを表しているのです。
584px ＋ 188px ＋ 3（76px）＝1000px というわけです。
私のブログは本文の写真幅が500px、サイドバーはアドセンスを貼りたいので300px欲しいと思い、下記のような配分にしてみました。
それをstyle.cssで書いてみるとこんな風になります。
83行目あたり
}
#primary {
float: left;
margin: 0 -35% 0 0;
width: 100%;
}
#content {
margin: 0 40% 0 5%;
width: 55%;
}
#secondary {
float: right;
margin-right: 5%;
width: 30%;
}
176行目あたり
/* Right Content */
.left-sidebar #primary {
float: right;
margin: 0 0 0 -35%;
width: 100%;
}
.left-sidebar #content {
margin: 0 4% 0 40%;
width: 55%;
}
.left-sidebar #secondary {
float: left;
margin-left: 5%;
margin-right: 0;
margin-top: 20px;
width: 30%; /* increased sidebar width 4% from 18.8% to 30% */
}
たぶんこれで変わるはず・・・私は無事変更できました。
もう少しテンプレート勉強しますです、ハイ。
こちらもどうぞ
・WordPress Twenty Elevenのヘッダーサイズを変更する方法。
・WordBench千葉に参加して学んだ事
WordPress 3.x (速習デザイン)
大曲 仁 (著), 星野 邦敏 (著), 豊田 有 (著)
2,814円（アマゾン 通常配送無料）
このテーマ、ウインドウの幅によってフレキシブルに変更する「レスポンシブWEBデザイン」になっているのです。これがカスタマイズ分からんくて・・・
本読んで、ネットで調べて、無理矢理やったらなんとか出来たので自分メモ的に書いておきます。
「Style.css」の2つのかたまり部分に修正が必要です。
83行目あたりからの
}
#primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
}
#secondary {
float: right;
margin-right: 7.6%;
width: 18.8%;
}
そしてもう少し下、176行目あたり
/* Right Content */
.left-sidebar #primary {
float: right;
margin: 0 0 0 -26.4%;
width: 100%;
}
.left-sidebar #content {
margin: 0 4% 0 34%;
width: 58.4%;
}
.left-sidebar #secondary {
float: left;
margin-left: 7.6%;
margin-right: 0;
margin-top: 20px;
width: 18.8%;
}
なぁんでこんなに数字が小数点とかになっちゃってるの～？これを図解すると一気に分かりやすくなります。たぶん解釈はあっている・・・はず。
「％」になっているものの、左右幅が1000ピクセルなので計算は楽です。
1000pxで表示してる場合、本文部分にあたる「#content」は584px、サイドバーにあたる「#secondary」は188px、残りのマージンは各76px、というのを表しているのです。
584px ＋ 188px ＋ 3（76px）＝1000px というわけです。
私のブログは本文の写真幅が500px、サイドバーはアドセンスを貼りたいので300px欲しいと思い、下記のような配分にしてみました。
それをstyle.cssで書いてみるとこんな風になります。
83行目あたり
}
#primary {
float: left;
margin: 0 -35% 0 0;
width: 100%;
}
#content {
margin: 0 40% 0 5%;
width: 55%;
}
#secondary {
float: right;
margin-right: 5%;
width: 30%;
}
176行目あたり
/* Right Content */
.left-sidebar #primary {
float: right;
margin: 0 0 0 -35%;
width: 100%;
}
.left-sidebar #content {
margin: 0 4% 0 40%;
width: 55%;
}
.left-sidebar #secondary {
float: left;
margin-left: 5%;
margin-right: 0;
margin-top: 20px;
width: 30%; /* increased sidebar width 4% from 18.8% to 30% */
}
たぶんこれで変わるはず・・・私は無事変更できました。
もう少しテンプレート勉強しますです、ハイ。
こちらもどうぞ
・WordPress Twenty Elevenのヘッダーサイズを変更する方法。
・WordBench千葉に参加して学んだ事
WordPress 3.x (速習デザイン)大曲 仁 (著), 星野 邦敏 (著), 豊田 有 (著)
2,814円（アマゾン 通常配送無料）