デスクワークを超絶快適にするおすすめギアたち

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

 

目次

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

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

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

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

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

てじらぼ は『SWELL』を使っているよ!!

\ 国産、時短SEOに強い、豊富なデザイン /

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

じょじお

基本的な作業手順は、ブログパーツ作ってそれをヘッダーウィジェットから呼び出すだけです。

ぽこがみさま

簡単だね!!

ヘッダーにボタンを追加する方法!

  1. ブログパーツでボタンを作成します。
  2. ヘッダーのウィジェットにブログパーツを追加します。
  3. ヘッダーの追従設定をします。
  4. (オプション)ボタンをキラッと光るボタンにする方法。
  5. (オプション)マウスオーバーのエフェクトを追加する方法。

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

じょじお

まずは「ブログパーツ」としてボタンを作っていきます。

STEP
ブログパーツを新規作成します。

WordPressの管理画面にログインし、①ブログパーツをクリックし②新規追加をクリックします。

STEP
ボタンを追加します。

SWELLをお使いの場合、ボタンブロックには下記の2種類あります。一番大きな違いは下記です。アフィリエイトリンクを直接ボタンにしたい場合はSWELLボタンが良いかと思います。ここではWordPress標準ボタンを使って解説します。

2つのボタンブロックの違い

  • ボタン(WordPress標準)
    • アフィリエイトのテキスト広告タグを使えない。
  • SWELLボタン
    • アフィリエイトのテキスト広告タグを使える。
    • クリック率の計測ができる。
    • 光るボタンがかんたんに作れる。
    • マウスオーバー時のエフェクトがある。

2つのボタンを追加する場合、SWELLボタンだとデザインが崩れてしまいました(下図参照)。このため、わたしはWordPress標準のボタンにしました。SWELLボタンは1個だけの配置ならデザイン崩れは起きませんでした。

デザインが崩れてしまったボタン
STEP
ボタンのスタイルを設定します。

▲ボタンにテキストを入力します。わたしは「サインイン」と入力しました。

テキストを入力したらスタイルをお好みに合わせて設定しましょう。わたしは下記の設定を行いました。

ボタンの設定値の例

  • スタイル:輪郭
  • 幅の設定:オフ
  • サイズ:0.75em
  • 色:白
  • 文字:黒
  • 角丸:4px
STEP
ボタンにリンクを追加します。

▲ボタンを選択して表示されるメニューの中の①リンク挿入ボタンをクリックします。②表示されたボックスに、ボタンをクリックしたときのリンク先URLを入力します。

▲①お好みに合わせて「新しいタブで開く」オプションをオンにします。②「このリンクを追加するには・・・」をクリックします。(エンターキーでもOK)

「新しいタブで開く」オプションについて

新しいタブで開く」オプションを有効にすると、現在開いているページを開いたまま別タブでページを開きます。このためユーザーがページから離脱してしまう可能性を下げることができます。

STEP
(必要であれば)2個目のボタンを追加します。

ボタンを複数追加する場合は、ボタンブロックの右下の「ボタンを追加」ボタンをクリックしてもう一個ボタンを作りましょう。

▲わたしはこんな感じにしました。

ボタンデザインのアイデア!

複数のボタンを設置する際は、色・形・アイコンを使って情報の優先度をつけるようにする良いですよ!今回の例では「新規ユーザー獲得」をこのサイトでのゴールと想定しているので「新規登録」ボタンの方を目立つ色にしています。

STEP
ブログパーツを保存します。

▲①ブログパーツに分り易い名前を付けます。②右上の公開ボタンをクリックします。

以上で、ボタンのブログパーツの完成です。

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

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

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

ボタン内アイコンの追加方法

  • SWELLボタン
    • グーテンベルグエディタの右側にあるアイコンの設定から行います。
  • WordPress標準ボタン
    • ボタン内テキストにショートコードを埋め込みます。

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

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

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

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

じょじお

続いてブログパーツを呼び出す設定です!

STEP
作成したブログパーツの呼び出しコードをコピーします。

作成したブログパーツは呼び出しコードを使って記事やウィジェットから呼び出すことができます。先ほど作成したブログパーツの呼び出しコードを確認しコピーしておきましょう。

STEP
WordPressのカスタマイズ画面を開きます。

▲WordPressのダッシュボードから「カスタマイズ」をクリックします。

STEP
ヘッダー内部に「カスタムHTML」ウィジェットを追加します。

▲「ウィジェット」をクリックします。

▲「ヘッダー内部」をクリックします。

▲「ウィジェットを追加」します。

※すでに追加済みのウィジェットがある場合はレイアウト崩れにご注意ください。

▲「カスタムHTML」を追加します。

STEP
「カスタムHTML」ウィジェットにブログパーツの呼び出しコードを記述します。

▲カスタムHTMLの「内容」に、先ほどコピーしたブログパーツの呼び出しコードをペーストします。②「公開」ボタンをクリックします。

▲完成図です。以上でボタンをヘッダーに設置することができました。

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

じょじお

ヘッダーの追従設定をオンにすることで、ユーザーのスクロール操作についてくるボタンが作成できます。

ヘッダーの追従設定方法

STEP
ヘッダーの設定を開きます。

WordPress管理画面上部のカスタマイズをクリック > ヘッダーをクリック

STEP
「ヘッダーを追従させる(PC)をオンにします。

▲「ヘッダーを追従させる(PC)」の設定をオンします。

以上でヘッダーの追従設定は完了です。

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

じょじお

WordPressの標準ボタンは装飾やアニメーションがシンプルなので、CVボタンとしてそのまま使うにはイマイチです。

ぽこがみさま

CSSを使ってカスタマイズしていきましょう!

CSSによるボタンカスタマイズの例

  • マウスホバー時のアクションを追加
  • キラッと光らせるアニメーションを追加
通常時のボタン
マウスオーバー時のボタン

CSSカスタマイズの方法

じょじお

CSSを追加は「追加CSS」から行うのが安全です!

STEP
追加CSS設定を開きます。

WordPress管理画面上部のカスタマイズをクリック > 「追加CSS」をクリック

STEP
CSSを貼り付けて、「公開」をクリックします。

▲「追加CSS」とは、WordPressテーマで用意されたCSSとは別に、ユーザーが独自に追加できるCSSです。ここにCSSを貼り付けることで細かいデザインのカスタムができます。

CSSの例は次の項で紹介します。

既に追加済みの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の子テーマのダウンロード(公式)

まとめ

じょじお

ヘッダーにボタンを追加する方法について紹介しました!

ぽこがみさま

最後までご覧くださってありがとうございました!

てじらぼ は『SWELL』を使っているよ!!

\ 国産、時短SEOに強い、豊富なデザイン /

お役に立てたらシェアお願いします!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる