BizVektor：サイドバー幅変更

BizVektorをWordpressのテンプレートとして使用し数ヶ月が経過した。

楽しみながら、ブログ情報を更新しつつ、コンテンツを充実させてブロガー活動を実施してきたので、勉強の一環を含めて、アフィリエイトを開始した。

ただ、気になっていたのが、アフィリエイトやバーナーのサイズが、BizVektorのデフォルトのサイドバー幅（220px）からはみ出してしまうことであった。

よって、サイドバー幅の変更にトライしてみたい。

BizVektorのテーマ自体を変更する方法もあるが、”BizVektorのHPにテーマのカスタマイズは子テーマで行って下さい”とあるので、その指示に従いたいと思う。

子テーマを利用

• 下記HPにアクセス

http://bizvektor.com/setting/customize/

• “Download BizVektor Child 0.1.0″をクリックしてZipデータをダウンロード

• WordPressのダッシュボードで「外観」-「テーマ」メニューを開いて「新規追加」をクリック

• 「テーマのアップロード」をクリック

• 「ファイルを選択」をクリックし、さっきダウンロードしたファイル（biz-vektor-child.zip）選択

↓

• Zipファイルが選択されているのを確認したら、「いますぐインストール」をクリック

• テーマのインストールが完了したら、「有効化」をクリック

• WordPressのダッシュボードで「外観」-「テーマの編集」をクリック

上記のように「★BizVektor子テーマサンプル★」が表示されていれば、インストール成功。

サイドバー幅を変更

• 子テーマのスタイルシート（style.css）に「#main #container #sideTower { float:right; width:220px;clear:none; } 」を追加
• 「220」の数字部分を変更すれば、サイドバーが変更できる

（補足１）「#main #container #sideTower」のみの変更では、290pxが最大値であり、それ以上の値にしたい場合は下記を参照して下さい

（補足２）BizVektorのサイドバー幅は、plain.cssファイル（/wp-content/themes/biz-vektor/design_skins/plainフォルダ）に記載されているため、コメント(/* */)を記入

補足

サイドバーを290以上に設定したい場合は、その他のパラメータを変更する必要がある。

何故、290より値を大きくするとサイドバーが表示なってしまうかであるが、計算式で表現するとほぼ下記となっているために、300pxだと表示しなくなくなってしまうと判断する。

※コンテンツ幅（640px）＋ マージン（20px）+ サイドバー幅(220px) ≤ 全体の幅（950px）

よって、サイドバー幅を300pxにしたい場合は、その他の値を調整すれば良い。

上記より、色々な設定が可能であるが、ここでは一例として、Google AdSenseにて300pxに設定したい場合があると思うのではと思い、一番簡単な方法を記載しておく。

（例１）
#main #container #content { float:left; width:630px; }
#main #container #sideTower { float:right; width:300px;clear:none; }

※上記例は、簡単に動作確認していますが、すべては確認していませんのでその点はご了解願います。

本件における、追加情報がありますので”BizVektor：サイドバー幅変更②”も確認して下さい。

Follow me!