WordPressのテーマ「Bizvektor」は、無償で商用にも利用でき、デザインや機能も洗練されているテーマで、ビジネスにはもちろん個人の利用にもおすすめのテーマです。
「Bizvektor」では、サイドバーの幅もCSSカスタマイズのメニューで簡単に変更でき、しかもそこには親切にサンプルコードまで記載されているので、CSSに詳しくなくても変更することができるようになっていてとても便利です。
とっても便利なのですが、サイドバーの幅を260px以上に設定するとレイアウトがくずれてしまいます。
しかし、アフィリエイトの広告バナーを貼りたい時って、幅が300pxのものが多いので、それを貼ると、バナーが切れて表示されてしまいます。
300px幅のバナーなどを貼りたい方のために、サイドバーの幅を300pxに拡張する方法をご紹介します。
「Bizvektor」のサイドバーの幅を300pxに変更する手順
- FTPなどを使って、/wp-content/themes/biz-vektor/design_skins/plain/plain.cssファイルをダウンロードします。
- 771行目に書かれている970pxを990pxに変更します。
- 774行目、790行目、792行目に書かれている950pxを970pxに変更します。
- 変更を保存し、元の場所に上書きアップロードします。
- WordPressの子テーマCSSを開きます。
※ FTPでダウンロードしても、WordPressの「テーマの編集」で開いてもどちらでも良いです。 - CSSに以下を追加します。
/* PC画面でメインエリアの幅を広くする */ @media (min-width: 970px) { #main #container #content { width:650px !important; } } /* PC画面でサイドバーの幅を広くする */ @media (min-width: 970px) { #main #container #sideTower { width:300px !important; } } - 「保存」もしくは「アップロード」します。
注意事項として、「plain.css」は「Bizvektor」がアップデートされると、上書きされデフォルトに戻りますので、アップデートした後は、忘れずに再度編集をしてください。（子テーマの設定はアップデートしてもそのまま残ります）
以上で、サイドバーの幅が300pxになり、バナーなども切れずに表示されるようになります。
アフィリエイト広告などで広告が切れて表示されてしまい、困っている方やサイドバーの幅を自分の希望の幅に変更したいのにできずにお困りの方は、上記手順を参考に、色々値を変えて設定してみてください。
「Bizvektor」はテーマだけの機能で、SNSの連携ができたり、Googleアナリティクスの設定もUAコードを設定するだけで解析ができるようになったりと、簡単に必要な機能が使えるようになっていますので、テーマを何にしたらよいかお考えの方も、無料ですので一度、試してみると良いかもしれません。
カスタマイズもしやすい設定になっていますし、アップデートもしっかり行ってくれていますので、安心して使えるテーマだと思います。
