WordPressのテーマカスタマイズ・・・Twenty Elevenのサイドバーの幅の変更

　子テーマも完成したので、いよいよTwenty Elevenのテーマをカスタマイズすることに。ヘッダーの隙間を埋めるのは、「Twenty Elevenのヘッダーをカスタマイズする」を参考に、style.cssの



　/* =Header
----------------------------------------------- */
#branding {
 border-top: 2px solid #bbb; padding-bottom: 10px;
 position: relative;
 z-index: 9999;
}




　border-top: 2px solid #bbb;を削除して、　#page.hfeed { margin-top: 0px; }を追加するだけ。これで隙間がなくなってすっきり。




　だが問題だったのは、サイドバーの幅の変更。一応ＨＰも作成経験があるので、サイドバーの幅の変更は簡単だと思っていたのだが、結構ややこしかった。。。html5について全く勉強したことがなかったこともあるのだろうが、自分の知識では結構難しかった。




　まずは、「Twenty Elevenのレイアウトの構造を調べてみる」で全体のレイアウト勉強して、


#page {
 margin: 2em auto;
 max-width: 1000px;}


　のページの幅を1000ｐｘにして、



#primary {
 float: left;
 margin: 0 -30% 0 0;
 width: 100%;
}

#content {
 margin: 0 21% 0 2%;
 width: 77.0.%;
}

#secondary {
 float: right;
 margin-right: 0%;
 width: 30%;
}


　この部分を弄ったわけだが、　#secondary のwidthの部分を３０％にして300ｐｘサイドバーの幅を確保。他はそれに合わせて調整してサイドバーの幅は拡がったのだが、これであってるのかは正直自分の知識では何とも言えない。。。他にもグラデーション、等html5新要素を取り入れ、見出しなども作成して、一応サイトの形としては完成したのだが、見出し、サイドバーの幅はともかく、ブログのデザインはデフォルトのほうがよかったような気がする。。。。自分のサイトはこれなのだが、他のサイトと比べるとかなりダサい気がするので。。。それにhtml5はまだＩＥ9は対応してないらしくＩＥ9では完全に表示されないので。。。

関連記事: