【Snow Monkey】ヘッダー右上に電話番号・お問い合わせボタンを設置するカスタマイズ方法

2026年2月3日

ハシビィくん

Snow Monkeyでコーポレートサイトでよく見る右上にボタンみたいなものを表示させたいっす。

カピーさん

簡単に実装することができるから、サクッと紹介していくぞ。

ヘッダーの右上にボタンを追加する

STEP

外観→カスタマイズをクリック

WordPressのダッシュボード（管理画面）から操作。

STEP

デザイン→ヘッダーをクリック

ヘッダーレイアウトを「1行」に変更。

グローバルナビゲーションの配置は「左」以外を設定。

STEP

ヘッダーコンテンツにボタンリンクコードを記述

「ヘッダーコンテンツ」に下記コードを修正した上で貼り付け。

<div>
    <a href="設定したいリンク先URL" class="header-button">表示させたいボタンテキスト</a>
</div>

「設定したいリンク先URL」には遷移させたいリンク先を入力。

「表示させたいボタンテキスト」はヘッダーに表示されるテキストですので、「お問い合わせ」などが一般的です。

STEP

「公開」をクリック

ここまで進めたら「公開」をクリック。

STEP

ボタンデザインのCSSを記述

次にボタンデザインのCSSを入力します。あくまでサンプルコードですので、ご自由に。

/* =========================
   ボタンの色設定（ここだけ変更OK）
   ========================= */

/* 通常時の色 */
.header-button {
  background-color: #000000; /* 背景色 */
  color: #ffffff;            /* 文字色 */
}

/* マウスを乗せた時の色 */
.header-button:hover {
  background-color: #ffffff; /* 背景色 */
  color: #000000;            /* 文字色 */
  border-color: #000000;     /* 枠線の色 */
}

/* =========================
   ボタンの基本デザイン
   ========================= */
.header-button {
  display: inline-block;
  padding: 10px 15px;        /* 上下 / 左右の余白 */
  font-size: 16px;           /* 文字サイズ */
  text-align: center;
  text-decoration: none;
  border-radius: 5px;        /* 角の丸み */
  margin-left: 22px;         /* メニューとの間隔 */
  border: 1px solid transparent; /* ホバー時のズレ防止 */
  transition: 0.2s;          /* 色変化をなめらかに */
}

/* =========================
   レスポンシブ対応（スマホ）
   ========================= */
@media (max-width: 768px) {
  .header-button {
    font-size: 14px;         /* 文字を少し小さく */
    padding: 8px 12px;       /* ボタンをコンパクトに */
    margin-left: 10px;       /* 余白を縮める */
  }
}

またSnow Monkeyのカスタマイズによっては、ズレることがあるので別パターンも。

/* =========================
   ボタンの色設定（ここだけ変更OK）
   ========================= */

/* 通常時の色 */
.header-button {
  background-color: #000000; /* 背景色 */
  color: #ffffff;            /* 文字色 */
}

/* マウスを乗せた時の色 */
.header-button:hover {
  background-color: #ffffff; /* 背景色 */
  color: #000000;            /* 文字色 */
  border-color: #000000;     /* 枠線の色 */
}

/* =========================
   ボタンの基本デザイン
   ========================= */
.header-button {
  display: inline-block;
  padding: 10px 15px;        /* 上下 / 左右の余白 */
  font-size: 16px;           /* 文字サイズ */
  text-align: center;
  text-decoration: none;
  border-radius: 5px;        /* 角の丸み */
  margin-left: 22px;         /* メニューとの間隔 */
  border: 1px solid transparent; /* ホバー時のズレ防止 */
  transition: 0.2s;          /* 色変化をなめらかに */
}

/* =========================
   レスポンシブ対応（スマホ）
   ========================= */
@media (max-width: 768px) {
  .header-button {
    font-size: 14px;         /* 文字を少し小さく */
    padding: 8px 12px;       /* ボタンをコンパクトに */
    margin-left: 10px;       /* 余白を縮める */
  }
}

以上で作業は完了になります。

まとめ：【Snow Monkey】ヘッダー右上に電話番号・お問い合わせボタンを設置するカスタマイズ方法

Snow Monkeyテーマでは、標準機能だけではヘッダー右上に電話番号やお問い合わせボタンを設置しづらい場面がありますが、CSSを少し追加するだけでシンプルにカスタマイズできます。
今回紹介した方法は、テーマの構造を大きく変更せず、コピペで導入できる点が特徴です。
また、スマホ表示にも最低限対応しているため、初心者の方でも安心して実装できます。

ヘッダーに電話番号やお問い合わせボタンを設置することで、ユーザーがすぐに行動できる導線を作ることができ、サイトの利便性やお問い合わせ率の向上にもつながります。

【Snow Monkey】ヘッダー右上に電話番号・お問い合わせボタンを設置するカスタマイズ方法

色やデザインを変更したい場合は、CSS内の「色設定」部分のみを編集する
それ以外のコードは触らないことで、レイアウト崩れを防げます。
スマホ時の表示・非表示の切り替えはテーマ側の仕様に依存する
ハンバーガーメニュー内に移動したい場合などは、Snow Monkeyの設定や追加カスタマイズが必要です。
ヘッダーに要素を増やしすぎると、画面幅によっては崩れる場合がある
電話番号とボタンを併用する場合は、表示内容をシンプルに保つことをおすすめします。