Twenty Eleven サイドバーの幅を変更する

効果的にGoogleアドセンスやアフィリエイトの広告を貼り付けるためにサイドバーの幅を変更したくなりました。cssで指定した幅をお好みに変えるだけですぐにできちゃいますので、やってみましょう!

スポンサーリンク

style.cssからStructureの記述を探す

69行目あたりから始まるStructure(構造)という部分が全てのコンテンツの幅を指定している部分です。パーセンテージで指定した各marginで調整しているワケですね。ふむふむ。

そうすると#primaryの記事表示部分と#secondaryサイドバーの合計が100%になればお好みで変更できそうな感じです!

widthとmarginの合計は100%

今回はアドセンスの広告貼り付けスペース確保が目的なので、サイドバーは300px欲しいです。となると必然的に#secondaryのwidthが30%になります。(max-width 1000pxに対して30%=300px)

しかしこのままだと合計が100%を超えてしまうので、#primaryのwidthか他のmarginで調整しなくてはいけません。

各コンテンツの隙間が7.6%だと少し多いかな?と思ったので全て5%に減らし、5% x margin 3箇所(=15%) + サイドバー30% = 計45%を100から引いた55%を#primaryのwidthに設定します。

cssを更新すると無事に希望通りの幅になりました!

全体の見た目を揃えるために#branding hgroupと#access divのmarginも7.6%から5%に修正しました。 ※サイドバーを左側に持ってきている場合はRight Contentのleft-sidebarクラスも変更する必要があるみたいです。

こういった細かいところも思ったとおりに変更できると嬉しいですよね!

では、Ryo(@nydewebdesign)でした♪

スポンサーリンク

 

シェアする

  • このエントリーをはてなブックマークに追加

フォローする