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

BizVektorのカスタマイズ

BizVektorの拡張デザインスキン「BizVektor Attract」は画面幅いっぱいに広がるヘッダー画像が特徴的です。その他、フッターなどの色を細かく設定できたり、ページタイトルに背景画像を表示できるなど、無料版のBizVektorにはない機能が組み込まれています。

BizVektor Attractの画面イメージ
BizVektor Attractの画面イメージ
普通の企業サイトにも

普通の企業サイト

ブライダル系サイトにも
ブライダル・サロン系
レストランにも

レストラン

 
なにより、パッと見てわかるようにベージュ系のデザインで幅広い業種のサイトですぐに使えそうな仕上がりです。カスタマイズせず初期設定のままでも十分に雰囲気のあるサイトが立ち上がりそうな点がおすすめポイントです。

細かい話で恐縮ですが、フッターの色をメニューで変更できるようになっているのが特におすすめです。無料版のBizVektorでは黒いフッターの色を変えるのは結構面倒でしたが、BizVektor Attractでは貴社のイメージカラーに合わせてフッターを好きな色に変更できます。

初期設定の色

初期設定のフッター

青系のフッター

青系のフッター

赤系の色

赤系のフッター

ここでは、BizVektor Attract固有の機能(「外観」-「カスタマイズ」メニュー)を中心に、カスタマイズに役立つCSSを合わせて紹介します。BizVektorでサイトを作っている方は参考にしてください。

画面いっぱいに広がるヘッダー画像

BizVektor Attractで特徴的なのが画面いっぱいに広がるヘッダー画像です。サイトの雰囲気を伝えるには十分の効果があると思います。

画面いっぱいのヘッダー画像でサイトを印象づけましょう
画面いっぱいのヘッダー画像でサイトを印象づけましょう

ヘッダー画像の推奨サイズは幅2000px、高さ680pxです。これでも十分な高さですが、さらに高さのある画像を使いたい場合は、幅2000pxの画像(例:幅2000px、高さ1500px)をアップロードしてみましょう。「切り抜かない」メニューが現れ、そのままのサイズでヘッダー画像を使うことができます。

幅2000pxの画像をアップロードすれば切り抜かないオプションも選択可能
幅2000pxの画像をアップロードすれば切り抜かないオプションも選択可能

背景画像(ページおよびサイト全体)

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

「外観」-「カスタマイズ」メニューの「Attract設定」にある「ページタイトル背景画像URL」からページタイトルの背景に画像を入れることができます。

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

この画像はサイト全体で共通ですが、どうしてもページごとに背景画像を切り替えたければ、そのページのbodyタグに付加されたクラス名を活用しましょう。以下、ページIDが8のページの背景画像を変えるCSSの例を紹介します。

/* 個別ページのタイトルの背景画像 */
.page-id-8 #pageTitBnr #pageTitInner {
    background: transparent url("http://…略….jpg") no-repeat scroll left 50%;
}

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

特定のページのみ背景画像を変える
特定のページのみ背景画像を変える

サイト全体の背景画像

「外観」-「背景」メニューからサイト全体に背景画像を入れる場合は、初期設定のベージュの背景色を透明にする必要があります。たとえば、次のようなCSSを使います。

/* 背景色を透明に(背景画像を使うため) */
#header, #gMenu, #main, #panList, #pagetop {
    background-color: transparent;
}

背景画像が使えるようになります。

背景画像が使えるようになる
背景画像が使えるようになる

ついでに、ページタイトルの背景色も透過すると次のようなイメージになります。

ページタイトルの背景色を透明に
ページタイトルの背景色を透明に

使ったCSSは次のとおりです。

/* ページタイトルの背景色を透明に */
#pageTitBnr {
    background-color: transparent;
    box-shadow: none;
}

ページタイトルの背景画像の幅を画面いっぱいに広げると次のようなイメージになります。

ページタイトルの幅を画面いっぱいに広げたイメージ
ページタイトルの幅を画面いっぱいに広げたイメージ

使ったCSSは次のとおりです。

/* ページタイトルの背景画像を幅100%に */
#pageTitBnr .innerBox {
    width: 100%;
}

ヘッダーロゴと連絡先

従来のデザインスキンではヘッダーロゴと連絡先が横並びのパターンが多かったため、ヘッダーロゴのサイズが微妙な感じだったかもしれませんが、BizVektor Attractでは電話アイコンをクリックして連絡先を開くようになっています。そのため、ロゴブロックの幅が広くなり、横長のロゴを使えるようになっています。

横長のヘッダーロゴも表示可能に
横長のヘッダーロゴも表示可能に

ヘッダーロゴを表示しない場合は次のようにサイト名が表示されます。

ヘッダーロゴを表示しない場合
ヘッダーロゴを表示しない場合

ヘッダーロゴの高さは60pxですが、CSSをカスタマイズすればもう少し高さのあるロゴも表示できるようになります。

CSSをカスタマイズすれば高さ60pxを超えるロゴも表示可能
CSSをカスタマイズすれば高さ60pxを超えるロゴも表示可能

使ったCSSは次のとおりです。

@media (min-width: 950px) {
    /* ヘッダーロゴの高さ調整 */
    #header #site-title a img {
        max-height: 250px;
    }
}

連絡先は電話アイコンをクリックすると表示されます。

クリックすると連絡先が表示される
電話アイコンをクリックすると連絡先が表示される仕組みに

電話アイコンを表示せずにヘッダーロゴとグローバルメニューをスッキリ見せたい場合は、「外観」-「テーマオプション」メニューの「連絡先」で電話番号を消せば大丈夫です。

電話番号が未入力の場合は電話アイコンは非表示に
電話番号が未入力の場合は電話アイコンは非表示に

ロゴを透過画像にすると次のようなイメージになります。

ロゴを透過画像にしたイメージ
ロゴを透過画像にしたイメージ

色の設定

BizVektor Attractのサイト全体の配色はカスタマイズしなくても十分なくらいに仕上がっていますが、カスタマイズしたい場合は「外観」-「カスタマイズ」メニューの「Attract設定」から各種パーツの色を設定することができます。

BizVektor Attractの色設定(Attract設定)
BizVektor Attractの色設定(Attract設定)

以下、それぞれの色が使われている場所を簡単にまとめておきます。

  • キーカラー(初期設定:#3f3d22) --- フッター、メニュータイトル、サイドバーのウィジェットタイトル、カテゴリーリンクのマウスオーバー時など
    フッターの色は「キーカラー」で変更可能
    フッターの色は「キーカラー」で変更可能
  • キーカラー(明)(初期設定:#AFAE8D) --- 横の罫線、カテゴリーリンク背景色、RSSボタン背景色など
    カテゴリーリンクの背景色は「キーカラー(明)」で変更可能
    カテゴリーリンクの背景色は「キーカラー(明)」で変更可能
  • キーカラー(薄)(初期設定:#e6e5c1) --- 投稿、固定ページ、トップページの「ブログ」「お知らせ」のタイトル、メニューのマウスオーバー時、ページタイトルの背景色など
    「キーカラー(薄)」の例
    「キーカラー(薄)」の例
  • メニューのボーダーカラー(初期設定:#D1D0A6) --- グローバルメニューの縦の罫線
    メニューのボーダーカラー
    メニューのボーダーカラー
  • アクセントカラー(初期設定:#c11313) --- 「お問い合わせはこちら」、フォームの送信ボタン、リンクのマウスオーバー時、「詳しくはこちら」のアイコン、トップページ投稿一覧の投稿日時など
    「お問い合わせはこちら」はアクセントカラーとアクセントカラー(明)でグラデーション
    「お問い合わせはこちら」はアクセントカラーとアクセントカラー(明)でグラデーション
  • アクセントカラー(明)(初期設定:#cd3f3f) --- アクセントカラーと合わせてボタンのグラデーションに
  • 背景色(初期設定:#fefcf2) --- 文字通りサイト全体の背景色
    背景色は幅広い業種に合うベージュ系です
    背景色は幅広い業種に合うベージュ系です

まとめ

以上、BizVektor Attractで使える機能を紹介してきました。画像でサイトを印象づけたり細かく色設定できるのもうれしいですが、初期設定で仕上がっている印象なので、カスタマイズしなくても雰囲気のあるサイトを立ち上げられそうな点もうれしいですね。