【WordPress】ヘッダーに追従型ボタンを設置する方法!!

　

ヘッダーにボタンを追加したい！

▲WordPressでヘッダーにボタンを2つ追加してみましたので追加方法について紹介します。

わたしはWordPressテーマのSWELLを使っていますのでSWELLの画面をもとに解説させていただきます。他のテーマでは若干操作が異なる可能性があります。

ヘッダーにボタンを追加するメリットは？

追従ヘッダーと組み合わせることで、ユーザーの画面スクロール操作についてくるボタンを作ることができます。これによってユーザーは、どのページにいてもボタンのページに飛ぶことができます。サイト運営者のメリットとしては、クリック率アップやコンバージョン率アップが狙えるかと思います。

ヘッダーにボタンを追加する手順の概要

1．ブログパーツでボタンを作成する。

ボタンにアイコンを使う方法

ボタンにアイコンを使うことでボタンのリンク先ページのイメージをしやすくなり、クリック率が上がるかもしれません。

ボタンのアイコンの設定方法は、ボタンの種類によって異なります。

ショートコードを使ってボタンにアイコンを追加する方法

SWELLで使用可能なアイコンの一覧はSWELL公式サイトをご覧ください。使用するにはアイコンのクラス名を使って下記のように記述します。

▲ボタンで使用する際は、ボタンのラベルテキストと一緒に記述します。上図は使用例です。

2．ブログパーツを呼び出します

3．ヘッダーの追従設定をします。

ヘッダーの追従設定方法

CSSでボタンをカスタマイズしよう！

CSSカスタマイズの方法

【CSS】マウスオーバー時にボタンが動く

マウスオーバーとは、「ボタンにマウスカーソルが重なった時、あるいは重ねる行為」のことです。マウスホバーとも呼ばれます。

私は通常時を立体型ボタンにし、マウスオーバー時にボタンが押し込まれたように見えるようにしました。

/* マウスカーソルがのってない時のボタン */
.l-header__inner .wp-block-button__link,
.l-fixHeader__inner .wp-block-button__link{
    transition: background 1s; /* アニメーションの頻度（秒） */
	box-shadow: 0 4px 0 #3a0d08; /* ボタンの影の高さと色 */
}
/* マウスカーソルがのっている時のボタン */
.l-header__inner .wp-block-button__link:hover,
.l-fixHeader__inner .wp-block-button__link:hover
{
	  transform: translateY(4px); /* Y方向へボタンを移動 */
	  box-shadow: none; /* ボタンの影を非表示 */
}

【CSS】キラッと光るアニメーションを追加する

ボタンをキラキラ光らせることでユーザーの視線を引き付けて、クリック率を上げることができます。

コードは下記のサイト様から頂戴しました。元のコードのクラス名をWordPress用に変更し、line-heightを削除させていただいております。ありがとうございます。

参考サイト
【CSS】キラッと光るボタンの作り方！目立つボタンでクリック率を向上させよう | Into the Program

@keyframes shiny {
    0% {
        transform: scale(0) rotate(25deg);
        opacity: 0;
    }
    50% {
        transform: scale(1) rotate(25deg);
        opacity: 1;
    }
    100% {
        transform: scale(50) rotate(25deg);
        opacity: 0;
    }
}
.l-header__inner .wp-block-button__link,
.l-fixHeader__inner .wp-block-button__link{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #384878;
    overflow: hidden;
}
.l-header__inner .wp-block-button__link::after,
.l-fixHeader__inner .wp-block-button__link::after{
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 50px;
    height: 50px;
    background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    
    /* アニメーション */
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

SWELLボタンに上記の2つのCSSは効きません。わたしはSWELLボタンにCSSを適用させたことはないですが、SWELLボタンに上記のCSSを適用させるには、おそらくクラス名だけ変更すれば適用できるかとは思います。

子テーマを使おう！

上記の「追加CSS」設定はWordPressテーマのバージョンアップを行うと、リフレッシュされて消えてしまいます。

対策として、子テーマを使い、子テーマの「追加CSS」を設定することで設定値のリフレッシュを防ぐことができます。なるべく子テーマを使うようにしましょう！多くのテーマは子テーマが無料提供されているはずです。

SWELLも子テーマは無料で提供されています！

SWELLの子テーマのダウンロード（公式）

まとめ