2019.4.5 - CHUBRIDGE様のWEBサイトを公開しました

【WordPressカスタマイズ】ヘッダー画像をドーンと画面いっぱいに目立つ感じで、しかも背景で写真が切り替わるようにカスタマイズ

パソコン画面WordPress

今回はWordPressのカスタマイズについての記事です。

使用するテーマはこのサイトでも使用しているCocoonです。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

現在作成中の案件でトップページに画像をドーンと目立つ形で載せたい。という希望を頂きましたので、そちらの希望に沿うカスタマイズ方法を探しました。

ついでに自動的に画像が切り替わる機能もつけちゃいます。

スポンサーリンク

実装イメージ

japan-guide.comさんのサイトをイメージして作っていきます。

japan-guide.comのトップイメージ
実装イメージ

使用するもの

画像を自動的に切り替えるために bxslider というjQueryを使用します。

公式サイトはこちら

では早速実装していきます。

実装前の状態

テストページを用意しました。

実装前の状態
実装前の状態

head-insert.phpに追記

まずはhead-insert.phpに以下のコードを追記します。

<div class="header-cover">
    <div class="bg-slider">
        <div class="bg-content">
            <h1 class="bg-slider-title">My Blog</h1>
            <a href="./">THIS IS MY BLOG!</a>
        </div>
    </div>
</div>

footer-insert.phpに追記

公式サイトからダウンロードしたbgswitcher.jsを子テーマのルートフォルダに追加します。

bgswitcher.jsの追加
bgswitcher.jsの追加

スクリプトを読み込むためにfooter-insert.phpに以下のコードを追記します。

<script src="<?php echo get_stylesheet_directory_uri(); ?>/bgswitcher.js"></script>

javascript.jsに追記

次にjavascript.jsに以下のコードを追記します。

jQuery( document ).ready( function($) {
    $( '.bg-slider' ).bgSwitcher({
        images: ['画像URL',
                 '画像URL',
                 '画像URL'],
        // 切り替える背景画像を指定
        interval: 3000, // 背景画像を切り替える間隔を指定
    });
});

画像URLの部分はお好みのURLを記入してください。

実装後

この時点で以下のようになります。

これでは一体何の画像なのか分からないので見栄えを整えます。

実装後
実装後

見栄えを整えます

見栄えを整えるためにstyle.cssに以下を追記します。

#header-container {
    position: absolute;
    width: 100%;
    top: 0;
    background: transparent;
}

.header-container-in.hlt-top-menu .navi {
    background: transparent;
}

.site-name-text-link,
.navi-in a {
    color: #fff;
}

.bg-content {
    text-align: center;
}

.bg-content a {
    color: #fff;
    text-decoration: none;
}

.bg-slider {
    width: 100vw;
    height: 500px;
    background-position:center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-slider__title{
    color: #fff;
    font-size: 48px;
    line-height: 1.5;
    letter-spacing: 1px;
}

これで以下のようになります。

ドーンと画像が全面に表示され、インパクト大です。

綺麗な風景写真や目立たせたい商材などを持ってこればかなり目立たせることができると思います。

それにレスポンシブ対応で、スマホからも問題なく見れるはずです。

おまけ

さらにおまけ機能として、スクロール時に背景画像を固定するいわゆるパララックス効果を付けます。

やり方はとても簡単。style.cssに以下を追加。

.header-cover> div{
    background-attachment: fixed;
}

これでさらにオシャレ感がアップ。

ただしこの効果はパソコンのブラウザから見たときに有効です。iPhoneや一部のスマホでは対応しておりませんのでご了承ください。

コメント

タイトルとURLをコピーしました