BizVeltorは1月末にバージョンアップしました。同時にCSSファイルの構成を見直したとかで新バージョンでは以下のカスタマイズを行ってもサイドバーの幅は変更できなくなったようです（この記事の検証のために一度試してみた）。当方は旧バージョン使い続けるつもりだったのでそのままにしていたが、子テーマにチャレンジしたのでそちらで新しく記事にしました。
サイドバーの広告が欠ける
メインサイトのテーマにはBizVektorという無料のWordPressテーマを使用しているが、一つだけ問題がある。サイドバーに250×250サイズのAdsenseを貼り付けているのだが、BizVektorのサイドバーの幅が250ピクセルより少ないらしく、広告の右側が欠けてしまっている。これは前から気にはなっていたのだが、コンテンツの充実を優先させて手付かずのままであった。しかし、記事をいくら増やしてもユーザー数はあまり増加しないことから、気分転換にカスタマイズを試みることとした。
BizVektorカスタマイズの第一歩でつまづく
サイドバーの幅の変更は、Googleで検索するとかなりヒットする。但し、WordPress標準のテーマであるTwenty Elevenをベースにした情報が大半であり、BizVektorをカスタマイズした情報は得られなかった。そこでTwenty Elevenのカスタマイズ情報をBizVektorに当てはめてみようとしたが、その第一歩でつまずく事となった。基本となるスタイルシートの体裁が、Twenty ElevenとBizVektorとではまったく異なっていたのである。Twenty Elevenの場合、テーマのデザインに関する基本的な情報がスタイルシートに記載されているのに対し、Bizvektorの方は作者や権利情報の記載しかない。また、BizVektorは他のテーマよりPHPファイルの量がずば抜けて多くなっている。何処かにサイドバーの情報があるはずだが、何処にあるのかさっぱり分からない。
BizVeｋtorのファイルは多数
BizVektorで検索すると、カスタマイズを試みたというブログが見つかった。サイドバーのカスタマイズに関するものではなかったが、BizVektorのテーマの基本的な作り方に関する情報が得られた。BizVektorは初心者向けの企業用WordPressテーマであり、管理画面からの設定だけでクオリティの高いサイトが作れることをウリにしている。事実、BizVektoはサイトの基本のカラーが7色用意されているが、その選択はテーマの管理画面から選べるようになっている。これは便利な反面、全てのカラー用のPHPファイルがすべてBizVektorのディレクトリ内に用意されているということになる。このサイトはTCDの無料テーマを使用しているが、カラーは4色用意している。しかし、ダウンロードすると4つのテーマファイルに分かれており、一つのカラー用のPHPファイルしか入っていない。ファイル数は、BizVektorの数分の1しかない。
BizVektorのベースとなるplain.css
BizVektorのカスタマイズを試みたブログによると、BizVektorの基本的な仕様はplain.CSSに記述されているとのこと。素人レベルの理解によると、BizVektorはplain.cssの情報を読み込み、それにカラー別の情報を上書きすることで成り立っているらしい。つまり、カラーによる違いがないことは、plain.cssをカスタマイズすれば良いことになる。サイドバーの幅はこれにあたることは間違いない。
記述している場所が分かれば後は簡単
plain.cssの何処にサイドバーの幅に関する記述があるのか、というところに更に時間を要したが、見つかれば直すところは1カ所しかなかった。その部分の書き換え方を述べる前に、このカスタマイズの前提となる事項を記しておく。
- BizVektorのバージョン：0.6.6.1（2012年11月6日現在では0.6.7.2）
plain.cssの置いてあるフォルダは
- wp-content⇒themes⇒biz-vektor⇒stylesのフォルダ内
plain.cssは全部で828行あるが、その751～768行を以下に表示させた。
<br />/*-------------------------------------------*/<br />/* フルサイズ<br />/*-------------------------------------------*/<br />@media (min-width: 970px) { /* スクロール分余裕に20px */<br />.innerBox,<br />#gMenu #gMenuInner.innerBox { width:950px; margin:0px auto; }<br />#main #container { padding-top:30px;}<br />#main #container #content { float:left; width:640px; }<br />#main #container #sideTower { float:right; width:220px; }<br />body.left-sidebar #main #container #content { float:right; }<br />body.left-sidebar #main #container #sideTower { float:left; }<br />form#searchform input#s {width:120px; }<br />form#searchform input#searchsubmit { width:20%; }#topMainBnr { width:100%; }<br />#topMainBnr img { width:950px !important; }<br />#topMainBnrFrame .slider li { }<br />#topMainBnrFrame { width:950px;min-height:250px; }<br />
書き直す部分は759行目にある「width:220px;」という部分。220ピクセルとなっていることから、250×250のAdsense広告が収まりきれないのは当然である。220を250に書き換えることでぴったり収まることになる。
