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

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

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を修正しました。表示結果は次のようになります。

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

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

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

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

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

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