BizVektorのヘッダー画像の上にリンクボタンやバナーを重ねて表示する

BizVektorのカスタマイズ

BizVektorのヘッダー画像の上に別の画像を重ねて表示する方法を紹介します。「申し込みはこちら」や「こちらからクーポンをGet」のようなボタンやバナー画像を表示するのが定番の活用例です。たとえば、こんな感じです。

BizVektorのヘッダー画像に別の画像を乗せる
BizVektorのヘッダー画像の上にバナーを表示する

BizVektorの特徴的なヘッダー画像を活かしてトップページに機能性を持たせたりユーザーの導線を作るのに役立ちます。

BizVektorならバナーを準備しなくてもボタン風リンクを簡単に表示できます。たとえば、こんな感じです。

ヘッダー画像の上に申し込みページへのリンクを表示した例
ヘッダー画像の上に申し込みページへのリンクボタンを表示した例

以下、手順を簡単に説明します。

ヘッダー画像の上に表示するボタンを作成

さっそくですが、子テーマのfunctions.phpに次のようなコードを入力すれば、ヘッダー画像の上に表示する要素を作成できます。

function my_biz_vektor_header_image_front($value) {
$temp =  <<<EOM
<div class="headButton">
<a href="#"><img src="http://….png" width="180" height="80" /></a>
</div>
EOM;

    $value2 = preg_replace('/<div class="slideFrame">/',
        '<div class="slideFrame">' . $temp, $value);

    return $value2;
}
add_filter('biz_vektor_header_image_front',
    'my_biz_vektor_header_image_front');

ハイライトした部分がヘッダー画像に重ねるパーツです。ここでは画像リンクにしていますが、ただの画像でもリンクでもバナーでも自由にカスタマイズしてください。

カスタマイズするときは「EOM;」に注意が必要です。これは行頭に置く必要があります。つまり、次のようにタブなどを入れてインデントすると画面が真っ白になります。ご注意ください。

function my_biz_vektor_header_image_front($value) {
    $temp =  <<<EOM
    <div class="headButton">
    <a href="#" class="btn btnL">お得なクーポンはこちら!</a>
    </div>
    EOM;
…略…

無事に画面が真っ白にならなかった方は、続いてCSSを記述しましょう。

追加した要素をヘッダー画像の上に表示

次のCSSを「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssに入力すると、追加したボタンやバナーがヘッダー画像の上に表示されるようになります。

/* ヘッダー画像の上にアイテムを表示 */
.headButton {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30%;
    z-index: 999;
}

/* ヘッダー画像に乗せる画像のサイズ調整 */
#topMainBnr .headButton img {
    width: auto !important;
    height: auto;
}

「left」「right」「bottom」は、ヘッダー画像からの相対的な位置指定です。数字を変更して表示結果を調整してください。省略していますが「top」を使うとヘッダー画像の上からの相対位置を指定することができます。

ここまで、functions.phpとstyle.cssを修正しました。表示結果は次のようになります。

BizVektorのヘッダー画像に別の画像を乗せる
BizVektorのヘッダー画像に別の画像を重ねて表示する
BizVektorのバージョン1.8.8のDefaultデザインスキンで検証していますが、すべてのデザインスキンでうまく動作するかどうかは不明です。うまくいく条件として、「<div class="slideFrame">」のようにslideFrameクラスのブロックが存在する必要があります。うまくいかない場合は使用中のデザインスキンで使われているclass名に修正するなど微調整してみてください。

リンクボタンを表示する場合

バナーを作成するのが面倒な場合や、単純にリンクボタンを表示したい場合は、上記で紹介したfunctions.phpに記述するコードのうち、ハイライトした部分を次のように変更します。

<a href="#" class="btn btnL">お得なクーポンはこちら!</a>

「#」は具体的なリンク先のURL(例:http://example.com/coupon)に修正してください。「お得なクーポンはこちら!」も自由に直してください。

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

ヘッダー画像の上にリンクボタンを表示
ヘッダー画像の上にリンクボタンを表示

以上です。スマホ表示には最適化していません。いろいろと試行錯誤してみてください。