【SWELL】ヘッダー（ナビゲーション）にボタンを設置する方法

WordPressテーマ「SWELL」では、ヘッダーに「お問い合わせ」や「資料請求」などのCTAボタンを簡単に設置できます。

この記事では、SWELLのヘッダーにボタンを設置する方法を解説します。

ヘッダーボタンを設置するメリット

ヘッダーにボタンを設置することで、以下のようなメリットがあります。

コンバージョン率の向上：重要なアクションへの導線が常に表示される
ユーザビリティの向上：ユーザーが迷わずアクションを起こせる

設置方法は2つ

SWELLでヘッダーにボタンを設置する方法は主に2つあります。

ブログパーツ＋ウィジェットを使う方法（推奨）
カスタムHTMLウィジェット+CSSを使う方法

方法1：ブログパーツ＋ウィジェットを使う（推奨）

この方法は、ボタンをビジュアルエディタで作成できるため、初心者の方にもおすすめです。

手順1：ブログパーツを作成する

WordPressダッシュボードにログイン
「ブログパーツ」→「投稿を追加」をクリック
タイトルに「ヘッダーボタン」など分かりやすい名前を入力

手順2：ボタンブロックを追加する

エディタ内で「＋」ボタンをクリック
「SWELLボタン」ブロックを検索して追加
ボタンのテキスト（例：「お問い合わせはこちら」）を入力
ボタンをクリックしてリンク先URLを設定

手順3：ボタンのスタイルを設定する

ボタンを選択した状態で右側のサイドバーを確認
「スタイル」から好みのデザインを選択
- ノーマル
- 立体
- キラッと
- アウトライン
- MOREボタン
「ボタンサイズ」「カラー設定」「アイコン設置」でカスタマイズ（任意）

手順4：ブログパーツを公開する

右上の「公開」ボタンをクリック
ブログパーツが保存されます

手順5：ウィジェットに配置する

「外観」→「ウィジェット」をクリック
「カスタムHTML」ウィジェットを「ヘッダー内部」エリアへ追加
「内容」へ先ほど作成したブログパーツの呼び出しコードを入れる
「保存」→「完了」をクリック

呼び出しコード：
XXXは割り当てられた数字をいれてください。

[blog_parts id="XXX"]

手順6：表示を確認

サイトを表示してヘッダーにボタンが表示されているか確認してください。

ブログパーツのメリット

ビジュアルエディタで作成できる：HTMLの知識が不要
簡単に編集できる：ブログパーツを編集するだけですぐに反映
プレビューで確認できる：実際の見た目を確認しながら作成できる
再利用しやすい：他の場所でも同じボタンを使える
スマホ表示も調整しやすい：SWELLでは、スマホ開閉メニューにも設定が可能

方法2：カスタムHTMLウィジェット+CSSを使う方法

こちらは直接HTMLを記述する方法です。細かいカスタマイズがしたい方向けの方法です。
こちらのようなボタンをつくるサンプルコードを載せています。

無料相談・お問い合わせはこちら

手順1：ウィジェットエリアを開く

「外観」→「ウィジェット」をクリック
「カスタムHTML」ウィジェットを「ヘッダー内部」エリアへ追加
「内容」へHTMLコードを追加
「保存」→「完了」をクリック

以下のようなHTMLコードを貼り付けます：

<div class="blog-gradient-btn-wrapper">
    <a href="https://example.com/contact/" class="blog-gradient-btn">
        <span class="blog-gradient-btn-icon" aria-hidden="true">
            <span class="blog-gradient-btn-arrow"></span>
        </span>
        <span class="blog-gradient-btn-label">無料相談・お問い合わせはこちら</span>
    </a>
</div>

URLとテキストをカスタマイズ

href="お問い合わせページのURLなど"：リンク先のURLを指定
<span>無料相談・お問い合わせ</span>：ボタンに表示するテキスト

手順2：CSSを追加

WordPressダッシュボードにログイン
「外観」→「カスタマイズ」を選択
「追加CSS」をクリック
CSSコードを貼り付け
「公開」ボタンをクリック

CSSサンプルコード：

/* ボタンコンテナ */
.blog-gradient-btn-wrapper {
    text-align: center;
}

/* ボタン本体 */
.blog-gradient-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    border: 3px solid #ffffff;
    font-weight: bold;
    font-size: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    white-space: nowrap;
}

.blog-gradient-btn:hover {
    transform: translateY(-2px);
}

/* 矢印アイコンのコンテナ */
.blog-gradient-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* 矢印 */
.blog-gradient-btn-arrow {
    display: block;
    width: 12px;
    height: 12px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg);
    animation: blog-arrow-animation 1s ease-in-out infinite;
}

@keyframes blog-arrow-animation {

    0%,
    100% {
        transform: rotate(-45deg) translate(0, 0);
    }

    50% {
        transform: rotate(-45deg) translate(3px, 3px);
    }
}

/* ボタンテキスト */
.blog-gradient-btn-label {
    display: inline-block;
}

アニメーションボタンのカスタマイズ（別サンプル）はこちらをご参照ください。

スマホ表示の設定

スマホ用のヘッダーボタン(開閉メニュー内)も設置する

PC用とは別に、スマホ用のヘッダーボタンも設置できます。

「カスタムHTML」ウィジェットを「スマホ開閉メニュー下」エリアへ追加
同様の手順で作成したブログパーツやHTMLを追加

上手くいかないとき

ブログパーツが表示されない場合

ブログパーツを作成したのに表示されない場合は、以下を確認してください。

ブログパーツが「公開」状態になっているか
ウィジェットで正しいブログパーツを呼び出しているか
ウィジェットを「保存」したか
キャッシュをクリアしてみる

ボタンのテキストが改行されてしまうとき

こちらの記事をご参照ください。

WordPress個別サポート

自分でやってみたけれどうまくいかない
やりたいことはあるけど方法がわからない

そんなときはお気軽にご相談ください。
マンツーマンでサポートいたします。

ご相談はこちらから