BizVektorのカスタマイズアーカイブ

BizVektorの3PRエリアで3つの画像を丸く加工したいことがあるかもしれません。たとえば、次のようなイメージです。

3PRエリアの画像を丸くする

ここでは、CSSを使って3PRエリアの3つの画像を丸くする方法を紹介します。

BizVektorの3PRエリアの画像を丸くする

まずは、3PRエリアに正方形の画像を入れます。

3PRエリアに正方形の画像を入れる

次のCSSを子テーマのstyle.cssまたは「外観」-「CSSカスタマイズ」などのメニューに入力します。

/* 3PRエリアの画像を丸く */
#topPr .prImage {
    border-radius: 50%;
}

/* 左右の枠線を消す */
#topPr,
#topPr .topPrOuter {
    border: none;
}

/* 「詳しくはこちら」をセンタリング */
#topPr .moreLink {
    text-align: center;
}

/* 「詳しくはこちら」のフォントなど */
#topPr .moreLink a {
    font-size: 18px;
    line-height:150%;
}

1行目～4行目が画像を丸くするCSSです。その他、「詳しくはこちら」のスタイルなども設定しています。表示結果は次のようになります。

3PRエリアの画像を丸くする

ちなみに、長方形の画像だと次のようになります。

長方形の画像を丸くしたイメージ

違和感があれば、角丸の「border-radius: 50%」を小さくして微調整することができます。たとえば、「border-radius: 60px;」にすると次のようになります。

画像の角丸サイズを変更したイメージ

ついでに、画像のマウスオーバー時に色を薄くするCSSを紹介します。

/* マウスオーバー時に色を薄く */
#topPr .prImage:hover {
    opacity: 0.6;
}

画像にマウスオーバーすると、少し透明になります。

画像のマウスオーバー時に半透明になる

BizVektorのカスタマイズに関する記事を当サイトに掲載してきましたが、この記事にまとめておきます。CSSのカスタマイズが中心ですが、実際に西沢直木のIT講座でも要望の多い相談がベースになっています。参考にしてください。

BizVektorはバージョンアップが早いので、記事で紹介しているCSSやPHPがすべてのバージョンでうまくいくとは限りません。うまくいかないときはWordPress個別サポートにご相談ください。

BizVektorカスタマイズの基礎（CSS）

BizVektorのデザイン（テーマオプションで対応できない部分）を微調整するにはCSSのカスタマイズが必要です。といっても、親テーマのCSSファイルを直すのは間違いです。もっと効率的な方法があります。それは、最優先されているスタイルを調べて上書きする方法です。「BizVektorのCSSの直し方」を読んで、効率的にCSSをカスタマイズする方法をマスターしましょう。

今後、BizVektorに限らずWordPressのCSSを自由にカスタマイズできるようになりたい場合は、「BizVektorのCSSの直し方」は必修です。理解できなければWordPress個別サポートをご利用ください。1時間くらいでCSSカスタマイズの基礎を説明します。

ヘッダー画像のカスタマイズ

ヘッダー画像については、初期設定のサイズ（幅950px、高さ250px）を変更したり、画面幅いっぱいに広げたいという要望が人気です。また、ヘッダー画像の上にバナーを乗せたり、グローバルメニューとヘッダー画像の上下関係を入れ替えたいという要望もたまにあります。記述するCSSは少し複雑になりますが、興味がある方はチャレンジしてみてください。

ヘッダー画像を画面の横幅いっぱいに広げたイメージは次のようになります。

ヘッダー画像を画面幅いっぱいに広げる

連絡先のカスタマイズ

BizVektorの象徴ともいえる画面右上の連絡先。定番の要件は「連絡先を画像に置き換えたい」ですが、そのためのコードはBizVektorのサイト（電話番号のカスタマイズ）に掲載されています。当サイトでは一歩進んで、連絡先エリアをウィジェット化する方法を紹介しました。参考にしてください。

ウィジェットに「連絡先」を追加したイメージ

連絡先のウィジェット化はPHPの変更が必要です。難しそうであれば、CSSを使ったスタイル変更に取り組んでみてください。

functions.phpを編集するときは画面が真っ白になることを想定して必ずFTPツールを使うようにしてください。「外観」-「テーマの編集」メニューで編集するのは危険です。不安な方はWordPress個別サポートにご相談ください。作業をサポートします。

フッターのカスタマイズ

BizVektorのフッターはデザインスキンによっては黒塗りだったりするので、色を変えたいとか、画像を表示したいという要望をいただきます。意外と難しいかもしれませんが、少し難しい課題に取り組みたい方はチャレンジしてみてください。

画面を下にスクロールしたときに表示されるフッターのフローティングメニューも人気の要件です。

スマホに便利！フッターに表示できるフローティングメニュー

BizVektorではアイコンフォントのFont Awesomeが使用可能なので、フッターやヘッダーで少しずつアイコンを使ってみるとカスタマイズしている感じがでてきますよ。

3PRエリアのカスタマイズ

BizVektor定番パーツの「3PRエリア」は、数を増やして「4PR」や「6PR」にしたいという要望が多いです。「テーマオプション」メニュー自体をカスタマイズするのは危険なので、代替手段としてPage Builderプラグインを使って3列、4列のレイアウトを組み立てる方法を覚えると便利です。

オリジナルの「6PRエリア」の完成イメージ

言うまでもありませんが3PRエリアのフォントサイズや色はCSSで変更可能です。カスタマイズしてみるとオリジナルパーツのように加工できて面白いですよ。以下は3PRエリアの画像を丸くしたイメージです。

3PRエリアの画像を丸くする

コードを書くのが面倒なら「拡張プラグイン」

ここまで定番のカスタマイズを紹介しました。CSSやPHPを直せば自由にカスタマイズできるといっても、慣れていないと面倒ですよね。そんな方もガッカリすることはありません。BizVektorでは「拡張プラグイン」が提供されているので、自分の要望にピッタリのプラグインがあれば、簡単に解決することができます。

たとえば、フッターのコピーライト（Powered by WordPress & BizVektor …）を消す「BizVektor FooterPoweredDelete」や投稿をグリッド表示する「BizVektor Grid Unit」などです。

投稿をグリッド表示できる「Grid Unit」

BizVektorっぽくなく仕上がる「拡張デザインスキン」

コアなBizVektorファンになると、「BizVektorらしくないデザインに仕上げたい」という贅沢な悩みが出てくることもあります。そんな方はBizVektorの「拡張デザインスキン」を探してみましょう。

BizVektor Vast

たとえば、BizVektor Vastを使うと、次のように仕上げることができます。

BizVektor Vastのトップページ

BizVektor Vastの特徴

画面いっぱいに広がるメイン画像
PCとスマホでメイン画像の切り替えが可能
画面上部に固定されるヘッダーメニュー

BizVektor Vastのサンプルサイト

BizVektor Vastの購入はこちらから

BizVektor Attract

BizVektor Attractを使うと次のように仕上げることができます。

BizVektor Attractの使用例

BizVektor Attractの特徴

画面いっぱいに広がるメイン画像
背景になじむグローバルメニュー
細かい色設定が可能

BizVektor Attractのサンプルサイト

BizVektor Attractの購入はこちらから

どうですか？初期設定のBizVektorらしくないですよね。あとは、あなたのアイデアで、より洗練されたデザインに仕上がると思います。BizVektor Attractについて詳しくは、以下のページをご覧ください。

幅広い業種で使えるおすすめのデザインスキン「BizVektor Attract」

ベースの機能はBizVektorのまま。見た目は変わってもテーマはBizVektorなので安心です。気に入らないときは元に戻せば良いので。

まとめ

以上、当サイトで紹介してきたBizVektorのカスタマイズパターンをまとめました。私が無理に考えたパターンではなく実際に相談の多い要望がベースになっています。CSSやPHPの修正が必要になりますが、カスタマイズの構想を練るときの参考にしてください。作業のサポートや詳しい説明はWordPress個別サポートで対応します。気軽にご相談ください。

BizVektorのカスタマイズ相談はこちら

西沢直木によるWordPress講座の紹介

BizVektorで制作中のWordPressサイトでtitleタグを自由に変更する方法を紹介します。投稿や固定ページの「タイトル」として入力した文字とは別の文字をtitleタグに設定することで、SEO対策などにも役立つでしょう。

ブラウザのタイトルバー（titleタグ）(1)とページのタイトル(2)を違う内容にしたい

タイトルを入力するフィールドの作成

個々の投稿や固定ページの編集画面でタイトルとは別のカスタマイズ用タイトルを入力できるように、カスタムフィールドを作ります。

Advanced Custom Fieldsプラグインのインストール

「プラグイン」‐「新規追加」メニューからAdvanced Custom Fieldsプラグインをインストール、有効化します。

Advanced Custom Fieldsプラグインのインストール

カスタムフィールドの作成

「カスタムフィールド」メニューを開いて「フィールドグループ」‐「新規追加」メニューをクリックします。

「フィールドグループ」‐「新規追加」メニューをクリック

任意のタイトル(1)（例：タイトルカスタマイズ用）を入力して、「フィールドを追加」ボタン(2)をクリックします。

カスタムフィールドを追加

開いた画面で次のように設定します。

フィールドラベル(1) --- 編集画面に表示する項目名を入力（例：SEOタイトル）
フィールド名(2) --- 任意のフィールド名を英数字で入力（例：seo_title）
フィールドタイプ(3) --- 「テキスト」を選択

フィールドラベル・フィールド名・フィールドタイプの設定

画面を下にスクロールして「ルール」を設定します。これは、カスタムフィールドを表示する条件の設定です。タイトルのカスタマイズを投稿のみで行う場合は「投稿タイプ・等しい・post」に設定します。

投稿のみでタイトルのカスタマイズを行う場合

固定ページでもタイトルをカスタマイズする場合は、「Add rule group」をクリックします。

「Add rule group」をクリックして条件を追加

2つ目の条件に「投稿タイプ・等しい・page」を追加します。

「投稿タイプ・等しい・page」を追加

条件は「投稿タイプ・等しい・post」または「投稿タイプ・等しい・page」になります。このカスタムフィールドを投稿または固定ページで使用可能にするということです。うまくいかないときは条件を見直してみましょう。

これで投稿と固定ページのタイトルをカスタマイズできるようになります。画面を上にスクロールして、「公開」ボタンをクリックすると設定完了です。

カスタマイズ用タイトルの入力

投稿または固定ページの編集画面を開いて画面を下にスクロールすると、「SEOタイトル」が入力できるようになっています。試しにtitleタグに表示したい内容を入力してみましょう。

titleタグに設定するタイトルを入力

「更新」ボタンをクリックすると設定完了です。これで、ページのタイトル(1)とは異なるカスタマイズ用のタイトル(2)を入力できました。

タイトル(1)とは別のカスタマイズ用タイトル(2)を入力できた

あとは、カスタマイズ用に入力したタイトル（SEOタイトル）をブラウザのタイトルバー（titleタグ）に反映すれば完了です。

titleタグのカスタマイズ

BizVektorではtitleCustomフックを使うことで、titleタグをカスタマイズすることができます。それには、次のようなコードを子テーマのfunctions.phpなどに入力します。

/* titleタグのカスタマイズ */
function my_titleCustom($value) {
    if (get_field('seo_title')) {
        $value = get_field('seo_title');
    }

    return $value;
}
add_filter('titleCustom', 'my_titleCustom');

「seo_title」は、作成したカスタムフィールドの名前に合わせて変更してください。

これにより、カスタムフィールド「SEOタイトル」に何か入力されている投稿や固定ページでは、その文字がtitleタグ(1)に設定されます。ページのタイトル(2)とは違った内容になります。

ページタイトルとtitleタグが違う内容になる

何も入力されていない場合は通常通り投稿や固定ページのタイトルがtitleタグに反映されます。

カスタマイズ用のタイトルを設定していない場合は変化なし

まとめ

このように、カスタムフィールドとtitleCustomフックを使うと、BizVektorで投稿や固定ページのtitleタグを自由に変更することができます。ページのタイトルとブラウザのタイトルを変えたい方は参考にしてください。

西沢直木によるWordPress講座の紹介

BizVektorの拡張デザインスキン「BizVektor Vast」ではヘッダー画像が画面いっぱいに表示され、インパクトのあるサイトに仕上げることができます。

ヘッダー画像が画面いっぱいに表示される拡張デザインスキン「BizVektor Vast」

その他、BizVektor Vastの特徴をいくつか紹介します。ピンときたらご購入を検討ください。

BizVektor Vastのデモサイトはこちら

グローバルメニューが画面上部に固定される

画面をスクロールしたときにグローバルメニューが画面上部に固定されます。動作イメージは以下の動画でご確認ください。

ヘッダーが固定されるのはPC（幅970px～）のみです。モバイル端末についてはCSSカスタマイズが必要です。

ヘッダーの色や透明度を設定できる

画面上部のヘッダーは色や透明度を設定できます。

メニューの背景色を設定できる

透明度を指定すれば、画面スクロール時にヘッダーの裏にコンテンツが透けて見えるようになります。

ヘッダーの透明度を設定できる

PCとスマホで違うヘッダー画像を表示できる

基本的にPC画面は横長、スマホ画面は縦長なので、同じ画像を使うとスマホのヘッダー画像が予想外に小さく見える場合がありますが、BizVektor Vastではモバイル端末用のヘッダー画像を設定できます。

モバイル端末用のヘッダー画像を設定できる

PCとスマホで違うヘッダー画像になります。

PCとスマホで違うヘッダー画像にできる

ページタイトルの背景画像を表示できる

ページタイトルの背景画像

以上のような機能を組み込みたい方にBizVektor Vastをおすすめします。

BizVektor Vastの購入はこちらから

西沢直木によるWordPress講座の紹介

BizVektorで画面全体の幅を100%に広げる方法を紹介します。検証したバージョンはBizVektor 1.9.13、デザインスキンはRebuildです。仕上がりイメージは次のようになります。

全体の幅を100%にしたBizVektor

加工前のBizVektorは次のようなイメージです。ヘッダー画像を含めて画面全体の幅は950pxになっています。

初期設定の幅は950px

以下、画面幅を100%に広げる方法を紹介します。

画面全体の幅を100%にするCSS

画面全体の幅を100%にするには、次のようなCSSを子テーマのstyle.cssなどに入力します。

/* 外枠を100%に */
#headerTop,
#header,
#topMainBnrFrame,
#topMainBnr img,
#main,
#footMenu{
    width: 100% !important;
}

/* 内枠を少し小さく */
.innerBox,
#header .innerBox,
#pageTitBnr .innerBox,
#panList .innerBox,
#footMenu .innerBox,
#footer .innerBox {
    width: 98%;
    margin: 0px auto;
}

/* ヘッダー画像を100%幅に */
#topMainBnr img {
    max-width: 100% !important;
}

#topMainBnrFrame {
    min-height: inherit;
}

@media (min-width: 970px) {
    /* メインコンテンツの幅 */
    #main #container .content {
        width: 70%;
    }

    /* サイドバーの幅 */
    #main #container #sideTower {
        width: 25%;
    }
}

外枠を100%、内枠を98%に設定して、少しだけ余白（左右1%、合計で2%）を入れています。全体を文字通りの100%にするとコンテンツが左右ピッタリくっついてしまい、見づらくなるためです。

すべて100%にすると見づらくなる

上記CSSの18行目の「98%」は自由に変更できます。小さくすることで左右の余白が大きくなります。また、34行目、39行目ではメインコンテンツ、サイドバーの幅を設定しています。これらも自由に設定してください。

18行目：全体の幅（98%）
34行目：メインコンテンツの幅（70%）
39行目：サイドバーの幅（25%）

ヘッダー画像のサイズを大きく

全体の幅を100%にしてヘッダー画像の幅も広げた場合、初期設定の幅950px、高さ250pxというヘッダー画像は幅が広がってぼやけてしまうかもしれないので、ヘッダー画像のサイズも変更した方が良いかもしれません。それには、次のコードを子テーマのfunctions.phpなどに入力します。

/* ヘッダー画像のサイズを変更 */
function my_biz_vektor_customheader_size() {
    return array(1500, 300);
}
add_filter('biz_vektor_customheader_size', 'my_biz_vektor_customheader_size');

この例では幅1500px、高さ300pxに変更しています。画面の幅が広がっても対応できるようになります。変更後、「外観」-「ヘッダー」メニューを見るとヘッダー画像のサイズ設定が変更されます。

ヘッダー画像のサイズ設定が変更される

これで、BizVektorの画面幅を100%（98%）に広げる作業は完了です。

全体の幅を100%にしたBizVektor

スライドショーを表示している場合の問題

トップページのヘッダー画像をスライドショーにしている場合、スライドショー画像の切り替えボタンが100%の外にはみ出てしまうので対処が必要です。たとえば、次のようなCSSを使います。前述のCSSに続けて入力してください。

/* スライドショーからはみ出た部分を非表示に */
#topMainBnr {
    overflow: hidden;
}

スライドショーからはみ出た部分を非表示にするやっつけのCSSですが、これで100%幅の外に出てしまった部分に対応できます。

まとめ

以上、BizVektorで画面全体の幅を100%に広げる方法を紹介しました。ふわっと仕上げなので足りない部分があれば修正をお願いします。また、コンテンツ幅などを変えてみて、自分なりのベストな設定を模索してみてください。

西沢直木によるWordPress講座の紹介

BizVektorでは「外観」-「カスタマイズ」メニューからグローバルメニューなどに使う色を変更できますが「キーカラー」を変更するとサイト全体の色が変わってしまいます。そこで、グローバルメニューの色だけを変更するCSSの例を紹介します。仕上がりイメージは次のようになります。

グローバルメニューの色を変更したイメージ

グローバルメニューの色（背景色・文字の色）を変更するCSSの例は次のようになります。子テーマのstyle.cssなどに入力してお使いください。

/* グローバルメニューの背景色 */
#gMenu {
    background: darkred !important;
}

/* グローバルメニュー項目の背景色など */
#gMenu .menu li a {
    background: darkred !important;
    color: #fff !important;
    border: none !important;
    box-shadow: unset;
    text-shadow: none;
    padding: 10px 20px;
}

/* グローバルメニューのリンク文字の色 */
#gMenu .menu li a strong,
#gMenu .menu li a span {
    color: #fff !important;
}

/* グローバルメニューのマウスオーバー時の色 */
#gMenu .menu li a:hover {
    background: #f6bfbc !important;
    color: #000 !important;
}

/* 既存の枠線などを消す */
#gMenu,
#gMenu .menu,
#gMenu .menu li a {
    border: none !important;
    box-shadow: unset;
}

強調した部分の「background」が背景色、「color」が文字の色です。自由に変更してお使いください。

主なデザインスキンの仕上がりは次のようになります。

普段は真っ白な「プレーン」のグローバルメニューにも色を付けられます。

デザインスキン「プレーン」の例

「Calmly」はこんな感じになります。キーカラーとは別の色にできます。

デザインスキン「Calmly」の例

「Default」はこんな感じになります。サイトのキーカラー（ここでは緑）とは別の色に設定できます。

デザインスキン「Default」の例

「Rebuild」は次のようになります。

デザインスキン「Rebuild」の例

余白に違和感があれば、上記のCSS1行目から4行目の「グローバルメニューの背景色」を削除してみてください。次のようにスッキリしたメニューになります。

RebuildのCSS修正後

あとは自由に色などを変更してみてください。

西沢直木によるWordPress講座の紹介

BizVektorの特徴といえば画面右上の「連絡先」です。この連絡先をPCとスマホで別々の内容にしたいという相談が多いです。たとえば、スマホでは連絡先画像を表示したいなどの要件です。

PCとスマホの連絡先レイアウトを変えたい

以下、PCとスマホで連絡先レイアウトを違う内容にする方法を紹介します。

連絡先のレイアウトを再現する

まずは、連絡先のレイアウトを自由に変更できるように、HTMLベースで連絡先を再現します。それには、次のコードを子テーマのfunctions.phpなどに入力します。

// 連絡先のHTMLを自由にレイアウトする
add_filter('headContactCustom','my_headContactCustom');
function my_headContactCustom(){
    $headContact = '<div id="headContact"><div id="headContactInner">';

    if (wp_is_mobile()) {
        /* モバイル端末（スマホ・タブレット）の連絡先レイアウト */
        $headContact .=  <<<EOM

<div id="headContactTxt">お問い合わせはこちらから</div>
<div id="headContactTel"><a href="tel:0399999999">TEL 03-9999-9999</a></div>
<div id="headContactTime">受付時間 10:00 - 20:00 [ 日曜日除く ]</div>

EOM;
    } else {
        /* PCの連絡先レイアウト */
        $headContact .=  <<<EOM

<div id="headContactTxt">お問い合わせはこちらから</div>
<div id="headContactTel">TEL 03-9999-9999</div>
<div id="headContactTime">受付時間 10:00 - 20:00 [ 日曜日除く ]</div>

EOM;
    }
    $headContact .= '</div></div>';

    return $headContact;
}

サイトを確認して、上記コードの入力前後で何も変化がなければ成功です。連絡先のレイアウトが再現できたということです。

いつもどおり連絡先が表示されれば成功

デザインスキンによっては連絡先が表示されない場合があります。また、上記のコードはPHPでモバイル端末を判定しているので、画面の幅を狭くするだけではモバイル端末の表示は確認できないです。

これで、「外観」-「テーマオプション」とは連動せず手動でレイアウトを指定する連絡先を再現できました。あとは、上記のコードのHTML部分を自由に変更すれば連絡先の連絡先を変更することができます。

モバイル端末の連絡先を画像に

連絡先のレイアウトを変更する例として、モバイル端末の連絡先を画像表示のみにしてみます。それには、上記の10行目から12行目までのコードを削除して次のような画像タグに置き換えます。

<a href="tel:0399999999"><img src="http://-----.jpg" /></a>

「tel:0399999999」と「http://-----.jpg」は変更してください。これで、モバイル端末の場合はクリックすると通話できる画像が表示されます。

コードを編集したイメージは次のようになります。

モバイル端末用の連絡先を画像だけに

これで、スマホでは連絡先に画像が表示されるだけになります。電話番号へのリンクを設定しておけばクリックしてダイヤルできるClick to Callになります。

モバイル端末ではClick to Callが表示される

画像が小さくなってしまう場合は次のようなCSSを子テーマのstyle.cssに入力してみてください。

/* 連絡先の幅を100%に */
@media (max-width: 659px) {
    #header #headContact {
        width: 100%;
    }
}

PC画面の連絡先レイアウトを変更する

PC画面の連絡先レイアウトは19行目から21行目です。自由に変更していただいて構いませんが、ここでは、連絡先の上に検索フォームを表示してみます。少しやっつけですが、次のようなコードを19行目から21行目の前に追加します。

<form method="get" class="searchform" action="">
    <input type="text" name="s" />
    <input type="submit" value="検索" />
</form>

これで、連絡先の上に検索フォームが表示されるようになります。

PC画面の連絡先の上に検索フォームを表示する

ここまでの作業でPCとスマホの連絡先レイアウトが別々の内容になりました。

PCとスマホの連絡先が異なる内容に

まとめ

以上、BizVektorでPCとスマホの連絡先レイアウトを変える方法を紹介しました。あとはアイデア次第です。HTMLの編集が必要ですが、いろいろと試してみてください。

西沢直木によるWordPress講座の紹介

人気のテーマBizVektorですが、2種類あることをご存じでしょうか？通常版とBizVektor Global Editionです。どちらも簡単にサイトを構築できるBizVektorに変わりありませんが、使える機能が微妙に、というより、かなり違うと言ってもよいかもしれません。

今後、BizVektorで作ったサイトをカスタマイズして発展させていこうと思っている方は、確認してください。

BizVektorのエディション

BizVektor通常版 --- bizvektor.comからダウンロードして使います。通常はこちらの使用をおすすめします。
BizVektor Global Edition --- 「外観」-「テーマ」メニューからインストールできるバージョンです。通常版で使える機能が制限されています。

BizVektor通常版とは

通常版のBizVektorはbizvektor.comからダウンロードしてインストールして使います。古くから使っている方にとっては、なじみ深いテーマです。

通常版のBizVektor

上記のサイトには子テーマのサンプルもあるので、ダウンロードしてインストールするのに違和感はないと思います。

BizVektorでWordPressサイトを作成して、将来的にはカスタマイズして発展させていきたい。そんな方はこちらの通常版を使いましょう。

BizVektor Global Editionとは

BizVektor Global Editionとは、「外観」-「テーマ」メニューから選択してインストールできるテーマです。ダウンロードする手間が省けるのがメリットです。手軽にインストールしたい場合は便利ですが、通常版で使える機能が制限されている点に注意が必要です。

BizVektor Global Edition

たとえば、「外観」-「ウィジェット」メニューを開くと、通常版で使える「コンテンツエリア（トップページ）」などのウィジェットがBizVektor Global Editionには存在しません。

通常版とBizVektor Global Editionの「ウィジェット」メニューの違い

その他、BizVektor Global Editionではいくつかの機能が使えません。また、BizVektorに適用できるBizVektor Grid Unitなどの便利な拡張プラグインが使えない場合があります。本格的にサイト制作したい場合は、bizvektor.comからダウンロードできる通常版のBizVektorを使った方が無難です。

WordPress講座の紹介

銀座・スカイプ・出張・メールでWordPressの入門からカスタマイズ・トラブルまで対応しています。便利なマンツーマン対応・料金は安心の後払い方式です。気軽にご利用ください。

これから始める方には
ホームページ作成講座

WordPressを使用中の方は
個別サポートが便利です

BizVektorのグローバルメニューをあれこれカスタマイズして、初期設定とはひと味違ったデザインを模索している方も多いと思います。一例としてグローバルメニューに下線を付ける方法を紹介します。BizVektorを例に説明しますが他のテーマでも参考になると思います。仕上がりイメージは次のようになります。

BizVektorのグローバルメニューに下線を付ける

BizVektor特有の2行目の説明を表示した場合は次のようなイメージになります。

グローバルメニューに説明と下線を表示する

以下、カスタマイズに使うCSSを紹介します。

BizVektorのグローバルメニューに下線を付加

加工前のグローバルメニューは次のようなイメージです。

BizVektorのグローバルメニュー（加工前）

グローバルメニューに下線を付けるため、次のようなCSSを使います。子テーマのstyle.cssまたは「外観」-「CSSカスタマイズ」メニューなどに入力してください。

/* グローバルメニューに下線を付加する */
#gMenu .menu > li > a:after {
    content: '';
    display: block;
    margin: 15px auto 3px;
    background-color: green; /* 下線の色 */
    width: 90%; /* 下線の幅 */
    height: 5px; /* 下線の高さ */
}

/* マウスオーバー時の下線の色 */
#gMenu .menu > li:hover > a:after {
    background-color: orange;
}

これで、グローバルメニューに下線が表示されます。実際は下線ではないので下線が付いたように見えるだけですが、マウスオーバー時に色を変えることもできます。

グローバルメニューに下線が付く（マウスオーバー時に色が変わる）

あとは、色やサイズなどを自由に変更してみてください。

擬似要素「:after」を使う理由

すでに同じカスタマイズをしようと思って次のようなCSSを思い付いたかもしれませんが、グローバルメニューのaタグやliタグに下線（border-bottom）を付けてもうまくいきません。

/* グローバルメニューに下線を付加する（失敗例） */
#gMenu .menu > li > a {
    border-bottom: solid 3px orange;
}

この設定だと、ブロックの下線（オレンジの部分）になってしまいます。メニューの下線に見えず、少し違和感がありますね。

aタグに下線を付けると違和感が

下線がブロックに紐付いてしまうため幅などを柔軟に変更するのが難しいですね。そこで、aタグの直後の擬似要素「:after」を使っています。

:afterは直後の要素なのでaタグとは違うスタイルを設定できます。最初に紹介したコードのように幅（width）や高さ（height）を使って下線の太さを変えることもできます。

下線の角を丸くする

ブロックなのでCSSでは本当の下線（border-bottom）を指定しても構わないのですが、背景色（background-color）を使うことで、次のように角丸にしたいときにも便利です。

下線を角丸に

最初に紹介したコードに「border-radius」を指定すれば、下線の角を丸くできます。具体的には次のようになります。

/* グローバルメニューに下線を付加する */
#gMenu .menu > li > a:after {
    content: '';
    display: block;
    margin: 15px auto 3px;
    background-color: green; /* 下線の色 */
    width: 90%; /* 下線の幅 */
    height: 8px; /* 下線の高さ */
    border-radius: 4px; /* 角丸の半径 */
}

/* マウスオーバー時の下線の色 */
#gMenu .menu > li:hover > a:after {
    background-color: orange;
}

スマホ対応（端末幅で下線を制御）

グローバルメニューを装飾するときの注意はスマホ対応です。この例でも、スマホ表示時にもグローバルメニューに下線が付いてしまいます。

スマホでも下線が付いてくる

これでも問題ないので、どう対応するかは好みによって異なりますが、幅が広くなったときだけ下線を付けるなど、必要に応じて対応してください。

次の例では、端末幅が970px以上の場合のみに下線を表示しています。

@media (min-width: 970px) {
    /* グローバルメニューに下線を付加する */
    #gMenu .menu > li > a:after {
        content: '';
        display: block;
        margin: 15px auto 3px;
        background-color: green; /* 下線の色 */
        width: 90%; /* 下線の幅 */
        height: 8px; /* 下線の高さ */
        border-radius: 4px; /* 角丸の半径 */
    }

    /* マウスオーバー時の下線の色 */
    #gMenu .menu > li:hover > a:after {
        background-color: orange;
    }
}

スマホでは下線が表示されなくなります。

スマホは下線が表示されない

あとは、いろいろと試行錯誤してみてください。

うまくいかないときは個別サポートまたはメールサポートにご相談ください。

人気のWordPressテーマBizVektorとSEOに役立つAll in One SEO Packプラグインには、同じような機能があります。たとえば、トップページのタイトル設定やmeta descriptionの自動生成機能などです。

両方共に設定した場合、どちらが優先されるのか心配ですよね。実際、どちらかを無効にしないとマズイ設定もあります。この記事で簡単に説明します。

以下の内容は執筆時点2018年2月の最新版（All in One SEO Pack 2.4.5.1／BizVektor 1.10.1）で検証しています。

トップページのタイトルはAll in One SEO Packが優先される

All in One SEO Pack、BizVektor共にトップページのタイトル（titleタグ）を設定できますが、基本的にはAll in One SEO Packの設定が優先されます。「BizVektorの設定が反映されない」で焦らないようにしましょう。

All in One SEOでは「All in One SEO」‐「一般設定」メニューの「ホームページ設定」‐「ホームタイトル」に設定します。

All in One SEOのトップページタイトル設定

BizVektorでは「外観」-「テーマオプション」-「SEO & GA」メニューの「トップページのtitleタグ」に設定します。

BizVektorのトップページタイトル設定

両方のメニューを設定した場合、優先されるのはAll in One SEOの設定です。

All in One SEOのタイトルが優先される

All in One SEOのタイトル設定を空にすると、「サイト名 | キャッチフレーズ」というスタイルのtitleタグになります。

All in One SEO Packのタイトル設定を消すと「サイト名 | キャッチフレーズ」に

All in One SEO Packのホームページ設定で「代わりに固定フロントページを利用する」を有効にすると、フロントページに設定した固定ページのタイトルがtitleタグに設定されます。

固定フロントページを有効にする

いずれにしてもAll in One SEO Packの設定に基づいてtitleタグが切り替わります。

BizVektorのトップページタイトル設定を有効にするには、All in One SEO Packを停止するしかありません。ですから、All in One SEO Packを有効にしている場合はBizVektorのタイトル設定が反映されないと思ってAll in One SEO Packのタイトル設定を使いましょう。

All in One SEO Packを停止した場合

meta descriptionは重複するのでBizVektorの設定を削除

投稿や固定ページの「抜粋」などに入力した文章をmeta descriptionに反映する機能も定番です。BizVektor、All in One SEO Pack共に対応しているため、meta descriptionが重複してしまう可能性があります。

All in One SEO Packでは投稿または固定ページの編集画面で「メタディスクリプション」を入力します。

All in One SEO Packのメタディスクリプションを入力

BizVektorではmeta descriptionとして出力したい文字を編集画面の「抜粋」に入力します。

BizVektorのメタディスクリプションを入力

両方の機能によって2つのmeta descriptionが出力されます。これはSEO的に良い状態ではありません。

meta descriptionが重複する

現在のAll in One SEO Pack（バージョン 2.4.5.1）ではmeta descriptionの出力を停止できないようなので、BizVektor側のmeta description機能を停止する必要があります。

All in One SEO Packの一般設定で「SEO を行う投稿タイプ」の「投稿」や「固定ページ」のチェックを外すことでmeta descriptionが出力されなくなりますが、投稿や固定ページについてSEO機能全般が無効になるので、この方法で良いかどうかは検討が必要です。

SEO機能を無効にすればmeta descriptionは出力されなくなる

BizVektorのメタディスクリプションを無効にするには、次のコードを子テーマのfunctions.phpにコピーペーストします。

/* メタディスクリプションの出力を停止 */
function my_remove_filter() {
    remove_filter( 'wp_head', 'biz_vektor_setHeadDescription', 5);
}
add_action( 'after_setup_theme', 'my_remove_filter', 90);

これにより、BizVektorのメタディスクリプション出力機能が無効になり、All in One SEO Packのmeta descriptionのみが出力されるようになります。

Googleアナリティクス設定はどちらか一方のみ設定

All in One SEO Pack、BizVektor共にGoogleアナリティクスでアクセス解析を有効にするためのトラッキングIDを入力できます。

Googleアナリティクス設定

ただし、両方に入力するとアクセス数が間違って2回カウントされ、アクセスが急増したように見えてしまうので注意してください。

対策は簡単で、どちらかのトラッキングIDを削除すれば大丈夫です。アクセス解析用のタグが1つだけ出力されるようになります。

BizVektorのスマホメニューのラベル「MENU」や開閉時のアイコンを変更する方法を説明します。仕上がりイメージは次のようになります。header.phpの変更が必要になるので子テーマを使うのが理想です。

スマホメニューの「MENU」やアイコンを変更する

「MENU」を「メニュー」に変更する

まずは、スマホメニューの「MENU」を任意の文字に変更します。

スマホメニューの「MENU」

BizVektorのスマホメニューの「MENU」はheader.phpの84行目あたり（BizVektoバージョン1.11.5の場合）に書かれています。

<h3 …略…><span>MENU</span></h3>

この「MENU」を好きな文字に変更すれば完了です。できれば子テーマを使うことをおすすめします。

「MENU」が好きな文字（例：メニュー）に変更されます。

「MENU」が「メニュー」になる

メニュー開閉時のアイコンを変更する

続いてメニューを開閉するときのアイコンです。

メニュー開閉時のアイコン

上記のアイコンは画像ですが、アイコン用の画像を準備するのが面倒なのでアイコンフォントを使って変更してみます。

それには、次のようなCSSを子テーマのstyle.cssまたは「外観」-「カスタマイズ」-「追加CSS」メニューなどに入力します。

/* 「MENU」のアイコンを消す */
#gMenu.itemOpen .assistive-text span,
#gMenu.itemClose .assistive-text span {
    background: none;
    padding-left: 0px;
}

/* 開閉アイコン共通設定 */
#gMenu .assistive-text span:before {
    font-family: 'FontAwesome';
    margin-right: 5px;
    font-size: 18px;
}
/* 開くときのアイコン */
#gMenu.itemClose .assistive-text span:before {
    content: '\f078';
}

/* 閉じるときのアイコン */
#gMenu.itemOpen .assistive-text span:before {
    content: '\f077';
}

4行目の「background: none;」で既存のアイコン画像を無効にしています。代わりに指定するアイコンが16行目（）と21行目（）です。

これにより、メニュー開閉時のアイコンが変更されます。

スマホメニュー開閉時のアイコンが変わる

アイコンの選び方

アイコンは以下のページから選べます。

Font Awesome Icons

使いたいアイコンを見つけて、そのページを開きます。

使いたいアイコンのページを開く

Unicode（ここでは「f0ab」）をコピーします。

Unicodeをコピー

コピーしたコードを上記のCSSの16行目や21行目と入れ替えます。

アイコンのコードを入れ替える

「￥」（バックスラッシュ：スラッシュの逆のような記号）を消さないように注意してください。

スマホメニュー開閉時のアイコンが設定されます。

アイコンが変更される

あとは試行錯誤です。よくわからなければ個別サポートにご相談ください。

WordPress個別サポート

困ったときに役立つCSSの辞書です

HTML5 & CSS3ポケットリファレンス［改訂新版］ (POCKET REFERENCE)

森史憲, 藤本壱

1,814円(10/08 21:23時点)

発売日: 2018/03/02

Amazon 楽天ブックス

Amazonの情報を掲載しています

ご存じのようにBizVektorがアップデート終了とのことで、新たに使えるテーマを探している方も多いと思います。自由に選んでJINでもSANGOでも良いのですが、いろいろな事情からBizVektorでおなじみのヘッダーに電話番号が表示されるテーマを探している方も多いようです。

BizVektorのトレードマークともいえるヘッダーの電話番号

そこで、ピッタリ一致とまではいきませんが、BizVektorのようにヘッダーの画面右上に電話番号を表示できるテーマを探してみました。まだあるとは思いますが少しずつアップしていきます。

ほとんどのテーマではheader.phpを修正すれば画面右上に連絡先を表示できますが、ここでは面倒なカスタマイズなしで実現できるテーマを探してみました。

【有料】Lightning Pro＋Fort／Pale

人気テーマLightningの有料版「Lightning Pro」に拡張デザインスキン「Fort」や「Pale」をインストールするとヘッダーに電話番号や問い合わせボタンを表示することができます。

Lightning Pro＋Fort

Lightning Pro＋Fortデモサイトより

LightningではBizVektorでおなじみ3PRエリアの代わりになるPRブロックが使用可能なので移行のイメージがつきやすいかもしれません。

3PRエリアの代わりになるPRブロック

Lightning Proではモバイル固定メニューも使用可能になっています。

モバイル固定メニューが使える「Lightning Pro」

詳しくは、以下のページをご覧ください。

Lightning Proの強力な便利機能を紹介！

Lightning Fortの入手はこちらから

Lightning Pro＋Pale

優しい雰囲気に仕上がる「Pale」はサロン・美容系・保育／介護施設などに適した拡張デザインスキンです。Fortと同じように電話番号や問い合わせボタンを表示できます。

ヘッダーを含めた全体に背景色や背景画像を適用できるのでアイデア次第でユーザーに訴求するデザインに仕上げることができるでしょう。

Lightning Pro＋Paleデモサイトより

Lightning Paleの入手はこちらから

【有料】Emanon Business

無料版もあるEmanonですが、個人事業主や中小企業向けのビジネスサイトの構築に最適化されたテーマ有料版のEmanon BusinessではヘッダーCTAとして画面右上に電話番号を表示することができます。電話番号・問い合わせボタンのいずれか、または両方を表示／非表示にできます。

Emanon BusinessのヘッダーCTA

連絡先の下（ファーストビューセクション）のレイアウトはスライドショー、おすすめ記事、ページボックスなどから選べます。

ページボックスを使うと、次のように特定ページへのアイキャッチ画像リンクを表示することができます。

ページボックスセクションの使用例

投稿一覧もBizVektorの雰囲気に近いような気がします。

Emanon Businessの投稿一覧

スマホのフッターに固定されるモバイルフッターメニューも使用可能です。

モバイルフッター固定メニュー

CTA機能付きWordPressテーマ Emanon

【有料】LAW（TCD）

多くのWordPressテーマを販売しているTCDにも「画面右上の電話番号」なテーマがないか探してみたところ、ありました。弁護士や税理士などの「士業」サイトに適した落ち着いた雰囲気のテーマ「LAW」です。

TCD（LAW）デモサイトより

3PRエリアの代わりになるブロックも使用可能です。マウスオーバー時に動きがあります。

TCD（LAW）デモサイトより

モバイル固定メニューも使えます。

TCD（LAW）デモサイトより

士業サイトに適したテーマ「LAW」の入手はこちらから

【無料】テンプレートキング

無料で使えるWordPressテンプレートが配布されています。商用利用可、コピーライト表示も不要です。カスタマイズメニューではロゴ画像、連絡先、スライドショーなどを設定できます。以下は無料版の「ベーシックデザイン会社案内系ブルー(C01)」の例です。

テンプレートキング（ベーシックデザイン会社案内系ブルー）

テンプレートは以下サイトの「テンプレート一覧」から選ぶことができます。

テンプレートキングはこちら

【有料】LIQUID PRESS

LIQUID PRESSによるビジネスサイト向けテーマ「CORPORATE」ではロゴ画像、連絡先、スライドショーなど、企業サイトに必要な機能に対応しています。SEO内部対策済でSNSとの連携もバッチリです。

【参考】LIQUID CORPORATEデモサイトより

WordPressテーマならLIQUID PRESS

【有料】クラウドテンプレート

レスポンシブWordPressテンプレートを提供しているクラウドテンプレートでは200種類以上のデザインからテーマを選ぶことができます。以下は「レスポンシブWPテーマ No.267」の例です。ロゴ画像、連絡先はもちろん、3PRエリア風のパーツも使用可能です。

クラウドテンプレートデモサイトより

クラウドテンプレートはこちら

【無料】無料ホームページテンプレート.com

無料でレスポンシブWordPressテンプレートが提供されています。クレジット表記を消すにはライセンスキーの購入が必要なようです。

ロゴ画像、連絡先、ヘッダー画像などを変更できます。また、グローバルメニュー2行目の英語表記にも対応しています。以下は「無料レスポンシブWordPressテーマNo.021」の例です。

無料ホームページテンプレート.com（No.021）

無料ホームページテンプレート.comはこちら

BizVektorの拡張デザインスキン「BizVektor Vast」ではヘッダー画像が画面いっぱいに表示され、インパクトのあるサイトに仕上げることができます。

ヘッダー画像が画面いっぱいに表示される拡張デザインスキン「BizVektor Vast」

その他、BizVektor Vastの特徴をいくつか紹介します。ピンときたらご購入を検討ください。

BizVektor Vastのデモサイトはこちら

グローバルメニューが画面上部に固定される

画面をスクロールしたときにグローバルメニューが画面上部に固定されます。動作イメージは以下の動画でご確認ください。

ヘッダーが固定されるのはPC（幅970px～）のみです。モバイル端末についてはCSSカスタマイズが必要です。

ヘッダーの色や透明度を設定できる

画面上部のヘッダーは色や透明度を設定できます。

透明度を指定すれば、画面スクロール時にヘッダーの裏にコンテンツが透けて見えるようになります。

PCとスマホで違うヘッダー画像を表示できる

PCとスマホで違うヘッダー画像になります。

ページタイトルの背景画像を表示できる

以上のような機能を組み込みたい方にBizVektor Vastをおすすめします。

投稿画面幅いっぱいのヘッダー画像と固定ヘッダーが特徴的な「BizVektor Vast」は西沢直木のIT講座に最初に表示されました。

加工前のBizVektorは次のようなイメージです。ヘッダー画像を含めて画面全体の幅は950pxになっています。

以下、画面幅を100%に広げる方法を紹介します。

画面全体の幅を100%にするCSS

画面全体の幅を100%にするには、次のようなCSSを子テーマのstyle.cssなどに入力します。

/* 外枠を100%に */
#headerTop,
#header,
#topMainBnrFrame,
#topMainBnr img,
#main,
#footMenu{
    width: 100% !important;
}

/* 内枠を少し小さく */
.innerBox,
#header .innerBox,
#pageTitBnr .innerBox,
#panList .innerBox,
#footMenu .innerBox,
#footer .innerBox {
    width: 98%;
    margin: 0px auto;
}

/* ヘッダー画像を100%幅に */
#topMainBnr img {
    max-width: 100% !important;
}

#topMainBnrFrame {
    min-height: inherit;
}

@media (min-width: 970px) {
    /* メインコンテンツの幅 */
    #main #container .content {
        width: 70%;
    }

    /* サイドバーの幅 */
    #main #container #sideTower {
        width: 25%;
    }
}

18行目：全体の幅（98%）
34行目：メインコンテンツの幅（70%）
39行目：サイドバーの幅（25%）

ヘッダー画像のサイズを大きく

/* ヘッダー画像のサイズを変更 */
function my_biz_vektor_customheader_size() {
    return array(1500, 300);
}
add_filter('biz_vektor_customheader_size', 'my_biz_vektor_customheader_size');

これで、BizVektorの画面幅を100%（98%）に広げる作業は完了です。

スライドショーを表示している場合の問題

/* スライドショーからはみ出た部分を非表示に */
#topMainBnr {
    overflow: hidden;
}

スライドショーからはみ出た部分を非表示にするやっつけのCSSですが、これで100%幅の外に出てしまった部分に対応できます。

まとめ

投稿 BizVektorで画面全体の幅を100%に広げる方法は西沢直木のIT講座に最初に表示されました。

グローバルメニューの色を変更する

グローバルメニューの色（背景色・文字の色）を変更するCSSの例は次のようになります。子テーマのstyle.cssなどに入力してお使いください。

/* グローバルメニューの背景色 */
#gMenu {
    background: darkred !important;
}

/* グローバルメニュー項目の背景色など */
#gMenu .menu li a {
    background: darkred !important;
    color: #fff !important;
    border: none !important;
    box-shadow: unset;
    text-shadow: none;
    padding: 10px 20px;
}

/* グローバルメニューのリンク文字の色 */
#gMenu .menu li a strong,
#gMenu .menu li a span {
    color: #fff !important;
}

/* グローバルメニューのマウスオーバー時の色 */
#gMenu .menu li a:hover {
    background: #f6bfbc !important;
    color: #000 !important;
}

/* 既存の枠線などを消す */
#gMenu,
#gMenu .menu,
#gMenu .menu li a {
    border: none !important;
    box-shadow: unset;
}

強調した部分の「background」が背景色、「color」が文字の色です。自由に変更してお使いください。

主なデザインスキンの仕上がりは次のようになります。

普段は真っ白な「プレーン」のグローバルメニューにも色を付けられます。

「Calmly」はこんな感じになります。キーカラーとは別の色にできます。

「Default」はこんな感じになります。サイトのキーカラー（ここでは緑）とは別の色に設定できます。

「Rebuild」は次のようになります。

ゆっくり色を変える

CSSのtransitionを使うと、マウスオーバー時にゆっくり色を変化させることができます。次の例では、0.5秒を指定しています。実際に使って動作イメージをつかんでください。

/* ゆっくり色変化 */
#gMenu .menu li a {
    transition: 0.5s;
}

グローバルメニューの下線

グローバルメニューに下線を付ける例を紹介します。

/* グローバルメニューの下線 */
@media (min-width: 770px) {
    #gMenu .menu > li > a:after {
        border-top: solid 2px #fff;
        content: '';
        display: block;
        margin-top: 10px;
    }

    #gMenu .menu > li:hover > a:after {
        border-top: solid 2px navy;
    }
}

表示結果は次のようになります。

あとは自由に色などを変更してみてください。

投稿 BizVektorのグローバルメニューの背景色を変更する方法は西沢直木のIT講座に最初に表示されました。

以下、PCとスマホで連絡先レイアウトを違う内容にする方法を紹介します。

連絡先のレイアウトを再現する

// 連絡先のHTMLを自由にレイアウトする
add_filter('headContactCustom','my_headContactCustom');
function my_headContactCustom(){
    $headContact = '<div id="headContact"><div id="headContactInner">';

    if (wp_is_mobile()) {
        /* モバイル端末（スマホ・タブレット）の連絡先レイアウト */
        $headContact .=  <<<EOM

<div id="headContactTxt">お問い合わせはこちらから</div>
<div id="headContactTel"><a href="tel:0399999999">TEL 03-9999-9999</a></div>
<div id="headContactTime">受付時間 10:00 - 20:00 [ 日曜日除く ]</div>
 
EOM;
    } else {
        /* PCの連絡先レイアウト */
        $headContact .=  <<<EOM

<div id="headContactTxt">お問い合わせはこちらから</div>
<div id="headContactTel">TEL 03-9999-9999</div>
<div id="headContactTime">受付時間 10:00 - 20:00 [ 日曜日除く ]</div>
 
EOM;
    }
    $headContact .= '</div></div>';

    return $headContact;
}

サイトを確認して、上記コードの入力前後で何も変化がなければ成功です。連絡先のレイアウトが再現できたということです。

モバイル端末の連絡先を画像に

<a href="tel:0399999999"><img src="http://-----.jpg" /></a>

「tel:0399999999」と「http://-----.jpg」は変更してください。これで、モバイル端末の場合はクリックすると通話できる画像が表示されます。

コードを編集したイメージは次のようになります。

画像が小さくなってしまう場合は次のようなCSSを子テーマのstyle.cssに入力してみてください。

/* 連絡先の幅を100%に */
@media (max-width: 659px) {
    #header #headContact {
        width: 100%;
    }
}

PC画面の連絡先レイアウトを変更する

<form method="get" class="searchform" action="">
    <input type="text" name="s" />
    <input type="submit" value="検索" />
</form>

これで、連絡先の上に検索フォームが表示されるようになります。

ここまでの作業でPCとスマホの連絡先レイアウトが別々の内容になりました。

まとめ

投稿 BizVektorの連絡先をPCとスマホで別レイアウトにする方法は西沢直木のIT講座に最初に表示されました。

今後、BizVektorで作ったサイトをカスタマイズして発展させていこうと思っている方は、確認してください。

BizVektorのエディション

BizVektor通常版 --- bizvektor.comからダウンロードして使います。通常はこちらの使用をおすすめします。
BizVektor Global Edition --- 「外観」-「テーマ」メニューからインストールできるバージョンです。通常版で使える機能が制限されています。

BizVektor通常版とは

通常版のBizVektorはbizvektor.comからダウンロードしてインストールして使います。古くから使っている方にとっては、なじみ深いテーマです。

上記のサイトには子テーマのサンプルもあるので、ダウンロードしてインストールするのに違和感はないと思います。

BizVektorでWordPressサイトを作成して、将来的にはカスタマイズして発展させていきたい。そんな方はこちらの通常版を使いましょう。

BizVektor Global Editionとは

投稿 BizVektorには2種類（通常版とGlobal Edition）あるので注意！は西沢直木のIT講座に最初に表示されました。

BizVektor特有の2行目の説明を表示した場合は次のようなイメージになります。

以下、カスタマイズに使うCSSを紹介します。

BizVektorのグローバルメニューに下線を付加

加工前のグローバルメニューは次のようなイメージです。

/* グローバルメニューに下線を付加する */
#gMenu .menu > li > a:after {
    content: '';
    display: block;
    margin: 15px auto 3px;
    background-color: green; /* 下線の色 */
    width: 90%; /* 下線の幅 */
    height: 5px; /* 下線の高さ */
}

/* マウスオーバー時の下線の色 */
#gMenu .menu > li:hover > a:after {
    background-color: orange;
}

あとは、色やサイズなどを自由に変更してみてください。

擬似要素「:after」を使う理由

/* グローバルメニューに下線を付加する（失敗例） */
#gMenu .menu > li > a {
    border-bottom: solid 3px orange;
}

この設定だと、ブロックの下線（オレンジの部分）になってしまいます。メニューの下線に見えず、少し違和感がありますね。

下線がブロックに紐付いてしまうため幅などを柔軟に変更するのが難しいですね。そこで、aタグの直後の擬似要素「:after」を使っています。

下線の角を丸くする

最初に紹介したコードに「border-radius」を指定すれば、下線の角を丸くできます。具体的には次のようになります。

/* グローバルメニューに下線を付加する */
#gMenu .menu > li > a:after {
    content: '';
    display: block;
    margin: 15px auto 3px;
    background-color: green; /* 下線の色 */
    width: 90%; /* 下線の幅 */
    height: 8px; /* 下線の高さ */
    border-radius: 4px; /* 角丸の半径 */
}

/* マウスオーバー時の下線の色 */
#gMenu .menu > li:hover > a:after {
    background-color: orange;
}

スマホ対応（端末幅で下線を制御）

グローバルメニューを装飾するときの注意はスマホ対応です。この例でも、スマホ表示時にもグローバルメニューに下線が付いてしまいます。

次の例では、端末幅が970px以上の場合のみに下線を表示しています。

@media (min-width: 970px) {
    /* グローバルメニューに下線を付加する */
    #gMenu .menu > li > a:after {
        content: '';
        display: block;
        margin: 15px auto 3px;
        background-color: green; /* 下線の色 */
        width: 90%; /* 下線の幅 */
        height: 8px; /* 下線の高さ */
        border-radius: 4px; /* 角丸の半径 */
    }

    /* マウスオーバー時の下線の色 */
    #gMenu .menu > li:hover > a:after {
        background-color: orange;
    }
}

スマホでは下線が表示されなくなります。

あとは、いろいろと試行錯誤してみてください。

うまくいかないときは個別サポートまたはメールサポートにご相談ください。

投稿 BizVektorのグローバルメニューに下線を付ける方法は西沢直木のIT講座に最初に表示されました。

以下の内容は執筆時点2018年2月の最新版（All in One SEO Pack 2.4.5.1／BizVektor 1.10.1）で検証しています。

トップページのタイトルはAll in One SEO Packが優先される

All in One SEOでは「All in One SEO」‐「一般設定」メニューの「ホームページ設定」‐「ホームタイトル」に設定します。

BizVektorでは「外観」-「テーマオプション」-「SEO & GA」メニューの「トップページのtitleタグ」に設定します。

両方のメニューを設定した場合、優先されるのはAll in One SEOの設定です。

All in One SEOのタイトル設定を空にすると、「サイト名 | キャッチフレーズ」というスタイルのtitleタグになります。

いずれにしてもAll in One SEO Packの設定に基づいてtitleタグが切り替わります。

meta descriptionは重複するのでBizVektorの設定を削除

All in One SEO Packでは投稿または固定ページの編集画面で「メタディスクリプション」を入力します。

BizVektorではmeta descriptionとして出力したい文字を編集画面の「抜粋」に入力します。

両方の機能によって2つのmeta descriptionが出力されます。これはSEO的に良い状態ではありません。

BizVektorのメタディスクリプションを無効にするには、次のコードを子テーマのfunctions.phpにコピーペーストします。

/* メタディスクリプションの出力を停止 */
function my_remove_filter() {
    remove_filter( 'wp_head', 'biz_vektor_setHeadDescription', 5);
}
add_action( 'after_setup_theme', 'my_remove_filter', 90);

これにより、BizVektorのメタディスクリプション出力機能が無効になり、All in One SEO Packのmeta descriptionのみが出力されるようになります。

Googleアナリティクス設定はどちらか一方のみ設定

All in One SEO Pack、BizVektor共にGoogleアナリティクスでアクセス解析を有効にするためのトラッキングIDを入力できます。

ただし、両方に入力するとアクセス数が間違って2回カウントされ、アクセスが急増したように見えてしまうので注意してください。

対策は簡単で、どちらかのトラッキングIDを削除すれば大丈夫です。アクセス解析用のタグが1つだけ出力されるようになります。

投稿 BizVektorとAll in One SEO Packの共存問題【2018年版】は西沢直木のIT講座に最初に表示されました。

「MENU」を「メニュー」に変更する

まずは、スマホメニューの「MENU」を任意の文字に変更します。

BizVektorのスマホメニューの「MENU」はheader.phpの84行目あたり（BizVektoバージョン1.11.5の場合）に書かれています。

<h3 …略…><span>MENU</span></h3>

この「MENU」を好きな文字に変更すれば完了です。できれば子テーマを使うことをおすすめします。

「MENU」が好きな文字（例：メニュー）に変更されます。

メニュー開閉時のアイコンを変更する

続いてメニューを開閉するときのアイコンです。

上記のアイコンは画像ですが、アイコン用の画像を準備するのが面倒なのでアイコンフォントを使って変更してみます。

それには、次のようなCSSを子テーマのstyle.cssまたは「外観」-「カスタマイズ」-「追加CSS」メニューなどに入力します。

/* 「MENU」のアイコンを消す */
#gMenu.itemOpen .assistive-text span,
#gMenu.itemClose .assistive-text span {
    background: none;
    padding-left: 0px;
}

/* 開閉アイコン共通設定 */
#gMenu .assistive-text span:before {
    font-family: 'FontAwesome';
    margin-right: 5px;
    font-size: 18px;
}
/* 開くときのアイコン */
#gMenu.itemClose .assistive-text span:before {
    content: '\f078';
}

/* 閉じるときのアイコン */
#gMenu.itemOpen .assistive-text span:before {
    content: '\f077';
}

4行目の「background: none;」で既存のアイコン画像を無効にしています。代わりに指定するアイコンが16行目（）と21行目（）です。

これにより、メニュー開閉時のアイコンが変更されます。

アイコンの選び方

アイコンは以下のページから選べます。

Font Awesome Icons

使いたいアイコンを見つけて、そのページを開きます。

Unicode（ここでは「f0ab」）をコピーします。

コピーしたコードを上記のCSSの16行目や21行目と入れ替えます。

「￥」（バックスラッシュ：スラッシュの逆のような記号）を消さないように注意してください。

スマホメニュー開閉時のアイコンが設定されます。

あとは試行錯誤です。よくわからなければ個別サポートにご相談ください。

WordPress個別サポート

投稿 BizVektorのスマホメニューの「MENU」やアイコンを変更する方法は西沢直木のIT講座に最初に表示されました。