BizVektorの子テーマを作る②

BizVektorの子テーマを作る①という記事を書いてから2カ月近くが経過してしまった。このサイトへの訪問者が増えており、続きの記事を書かねばと思いつつ、今日まで手をつけずにきてしまった。子テーマ用のスタイルシートを作ってしまえば、その後の作業は簡単にできる。

カスタマイズしたい部分をStyle.cssに書き加えるだけ

plain.cssから必要箇所をコピー

BizVektorのカスタマイズ①でサイドバーの幅を広げたが、それと同じことを子テーマで行ってみた。作業は実に簡単で、BizVektorのオリジナルのCSSファイルからサイドバーの幅を指定している構文を抜き出し、子テーマとして作成したStyle.cssに複写し、必要箇所を買い換えれば良い。

BizVektorのサードバーの幅は、plain.cssというファイルで指定されている。ファイルの場所は、

wp-content⇒themes⇒biz-vektor⇒bizvektor_themes⇒plainフォルダ

の中にある。

/*-------------------------------------------*/
/*	フルサイズ
/*-------------------------------------------*/
@media (min-width: 970px) { /* スクロール分余裕に20px */
.innerBox,
#gMenu #gMenuInner.innerBox	{ width:950px; margin:0px auto; }
#main #container	{ padding-top:30px;}
#main #container #content	{ float:left; width:640px; }
#main #container #sideTower	{ float:right; width:250px; }
body.left-sidebar #main #container #content	{ float:right; }
body.left-sidebar #main #container #sideTower	{ float:left; }
form#searchform input#s	{width:120px; }
form#searchform input#searchsubmit	{ width:20%; }

#topMainBnr			{ width:100%; }
#topMainBnr img		{ width:950px !important; }
#topMainBnrFrame .slider li { } 
#topMainBnrFrame	{ width:950px;min-height:250px; }

サイドバーの幅は、946行目にあった。この行を1行コピーする。

style.cssにペーストして数字を書き換える

style.cssは、WordPressのダッシュボード⇒外観⇒テーマ編集で直ぐに見つかる。と言うよりも、子テーマ作成当初はこのstyle.cssしか存在しない。初めての作業の場合、

@import url(‘../biz-vektor/style.css’);

という行の下に先ほどコピーした1行をペーストする。私の場合は後で迷わないように注釈をコメントアウトで入れておいた。

/*-------------------------------------------*/
/*	サイドバーの幅を220から250に
/*-------------------------------------------*/
#main #container #sideTower	{ float:right; width:220px; }

そして220pxの数字を変更すればよい。私の場合、220を250に変更した。これらの作業は、WordPressのテーマ編集ページで行える。

/*-------------------------------------------*/
/*	サイドバーの幅を220から250に
/*-------------------------------------------*/
#main #container #sideTower	{ float:right; width:250px; }

BizVektorのカスタマイズ①でplain.cssを直接書き換えたが、BizVektorのバージョンアップ後はその方法ではうまくいかなかった。子テーマでも手こずるかと思ったが、思いのほか簡単にカスタマイズできた。今度はフォントにメイリオを加えることに挑戦してみよう。

BizVektorがバージョンアップした後、子テーマを作らずに上記のカスタマイズをplain.cssに直接行ったが、うまく動かなかった。今回は簡単にできたことから、どこかおかしくなっているのでは・・・・という疑念が当初からあった。そこでチェックしてみたところ・・・・・・横幅をスマートフォンサイズにすると表示がおかしくなる。本来ならば下の画像のようにサイドバー部分が画面の下に移り、狭くなった幅いっぱいに表示されるようになるのだが、上記の方法でやるとサイドバーの元のサイズで右寄せ（右サイドバー使用）で表示されてしまう。あまり重大な問題ではないと思うが、少し気になるので私のメインサイトは元に戻しておいた。