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

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

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

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

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

子テーマを利用

  • 下記HPにアクセス

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

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

Child-theme

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

ダッシュボード

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

アップロード

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

ファイルを選択

bizvektor-child

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

インストール

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

有効化

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

テーマの編集

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

サイドバー幅を変更

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

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

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

サイドバー

補足

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

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

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

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

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

(例1)
#main #container #content { float:left; width:630px; }
#main #container #sideTower { float:right; width:300px;clear:none; }

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

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