ワードプレスのボタンデザイン完全ガイド｜コピペで使えるおしゃれなCSS例付き
はじめに
ワードプレスでブログやサイトを運営していると、「お問い合わせはこちら」「資料をダウンロード」「商品ページを見る」など、読者にクリックしてほしい場面が何度も出てきます。そのときに重要になるのが、ボタンデザインです。
ただのテキストリンクでもリンク先へ誘導することはできますが、ボタンとして目立たせることで、読者は「ここを押せばいい」と直感的に理解しやすくなります。特にスマホ閲覧が多いサイトでは、押しやすく見やすいボタンを用意することが、クリック率や成約率の改善につながります。
この記事では、ワードプレスのボタンデザインの基本から、コピペで使えるおしゃれなCSS例、WordPressへの反映方法、用途別の作り方、トラブル対処法までまとめて解説します。
「ボタンブロックは使っているけれど、デザインがいまいち」
「CSSでおしゃれなボタンを作りたい」
「アフィリエイトやCTA用のクリックされやすいボタンを作りたい」
このような方は、ぜひ参考にしてください。
1. ワードプレスのボタンデザインでできること
ワードプレスのボタンデザインを整えると、単に見た目がおしゃれになるだけではありません。読者の行動を促し、サイト内の回遊やお問い合わせ、購入、資料請求などの成果につなげやすくなります。
ボタンは、記事内で読者に次のアクションを示すための重要なパーツです。デザインや文言、配置を少し変えるだけでも、クリックされやすさは大きく変わります。
1-1. ボタンデザインがクリック率・回遊率・成約率に影響する理由
ボタンは、読者に「次に何をすればよいか」を伝える役割があります。
たとえば、記事の最後に「お問い合わせはこちら」というテキストリンクだけを置くよりも、目立つ色のボタンで表示したほうが、読者は行動しやすくなります。
ボタンデザインがクリック率に影響する主な理由は、次のとおりです。
クリックできる場所だと一目で分かる
ページ内で視線を集めやすい
スマホでもタップしやすい
読者に次の行動を明確に示せる
CTAとして成約につなげやすい
特に、資料請求・お問い合わせ・商品購入・無料相談・メルマガ登録などの導線では、ボタンの見た目が成果に直結します。
ワードプレスのボタンデザインは、サイト全体の印象だけでなく、ユーザー行動にも関わる重要な要素です。
1-2. テキストリンク・画像バナー・CSSボタンの違い
リンクを目立たせる方法には、主に「テキストリンク」「画像バナー」「CSSボタン」があります。
テキストリンクは、文章中に自然に入れやすいのが特徴です。内部リンクや補足リンクに向いていますが、CTAとしては目立ちにくい場合があります。
画像バナーは、デザイン性が高く、視覚的に訴求しやすいのがメリットです。ただし、画像を作成する手間がかかり、表示速度にも影響することがあります。また、文字を画像内に入れすぎると、SEOやアクセシビリティの面で不利になる場合もあります。
CSSボタンは、HTMLとCSSで作るボタンです。テキストをそのまま使えるため検索エンジンや読み上げ機能にも伝わりやすく、色やサイズ、影、アニメーションなどを自由に調整できます。
ワードプレスでボタンデザインをカスタマイズするなら、まずはCSSボタンを使うのがおすすめです。
1-3. WordPressでボタンを作る主な方法
WordPressでボタンを作る方法には、いくつかあります。
代表的なのは、ブロックエディターの「ボタン」ブロックを使う方法です。CSSの知識がなくても、リンク先URLや色、配置などを管理画面から設定できます。
また、カスタムHTMLブロックにHTMLコードを入れて、CSSでデザインする方法もあります。より自由なボタンデザインを作りたい場合に便利です。
テーマによっては、独自のボタン装飾機能が用意されていることもあります。Cocoon、SWELL、JIN、SANGO、AFFINGERなどのWordPressテーマでは、ボタン用の装飾やスタイルが標準で使える場合があります。
プラグインを使ってボタンを作る方法もありますが、シンプルなボタンであれば、まずは標準ブロックとCSSだけで十分です。
1-4. 初心者は「ボタンブロック＋CSS」から始めるのがおすすめ
初心者におすすめなのは、WordPress標準の「ボタン」ブロックでボタンを作り、必要に応じてCSSでデザインを追加する方法です。
この方法なら、HTMLを直接書かなくてもボタンを設置できます。リンク先や文字の変更はブロックエディター上で行い、見た目だけをCSSで調整できます。
たとえば、ボタンブロックに独自のCSSクラスを設定し、追加CSSにデザイン用のコードを貼り付ければ、簡単におしゃれなボタンを作れます。
最初から複雑なカスタマイズをしようとすると、CSSが反映されなかったり、スマホ表示が崩れたりすることがあります。まずは基本のボタンを作り、少しずつ色・余白・角丸・影・ホバー効果を追加していきましょう。
2. WordPressでボタンを作る基本手順
ここでは、WordPressのブロックエディターを使って、基本的なボタンを作る手順を解説します。CSSを使う前に、まずは標準機能でボタンを作れるようにしておきましょう。
2-1. ブロックエディターの「ボタン」ブロックで作成する方法
WordPressでボタンを作る基本手順は次のとおりです。
投稿または固定ページの編集画面を開く
ボタンを設置したい場所で「＋」をクリック
ブロック検索で「ボタン」と入力
「ボタン」ブロックを選択
ボタン内に表示したい文字を入力する
たとえば、次のような文言を入れます。
お問い合わせはこちら
無料で資料をダウンロード
公式サイトを見る
詳細ページへ進む
今すぐ申し込む
ボタンの文言は、読者がクリック後の内容を想像できる具体的なものにするのがポイントです。
「こちら」だけではなく、「料金プランを見る」「無料相談を予約する」のように、クリック後に何ができるのかを明確にしましょう。
2-2. ボタンのリンク先URLを設定する方法
ボタンを作成したら、リンク先URLを設定します。
ボタンブロックをクリックすると、リンクアイコンが表示されます。そこにリンク先のURLを入力して保存すれば、ボタンとして機能します。
内部リンクの場合は、記事タイトルやページ名を入力すると、WordPress内のページを検索して選択できます。
外部サイトへリンクする場合は、URLを直接入力します。アフィリエイトリンクや公式サイトへのリンクを設定する場合も、この欄にURLを入れます。
外部リンクの場合は、必要に応じて「新しいタブで開く」を設定しましょう。ただし、すべてのリンクを新しいタブで開く必要はありません。読者の動線に合わせて判断することが大切です。
2-3. ボタンの色・背景色・文字色を変更する方法
ボタンブロックでは、管理画面から背景色や文字色を変更できます。
ボタンを選択した状態で、右側の設定パネルを開きます。そこから「スタイル」や「色」の設定を使うと、背景色やテキスト色を変更できます。
ボタンの配色を決めるときは、次の点を意識しましょう。
背景色と文字色のコントラストを高くする
サイト全体のメインカラーに合わせる
重要なCTAボタンは目立つ色にする
複数の色を使いすぎない
読みにくい薄い文字色を避ける
たとえば、白背景のサイトなら、濃い青・緑・オレンジなどのボタンは目立ちやすくなります。反対に、背景とボタンの色が近いと、ボタンが埋もれてクリックされにくくなります。
2-4. ボタンの配置を中央・左寄せ・右寄せにする方法
ボタンブロックは、配置も変更できます。
ボタンを選択すると、ツールバーに配置の設定が表示されます。そこから、左寄せ・中央寄せ・右寄せを選べます。
一般的には、記事内のCTAボタンは中央寄せにすることが多いです。中央に配置すると視線に入りやすく、スマホでも自然にタップしやすくなります。
一方で、文章中の補足リンクや関連記事へのボタンは、左寄せでも違和感がありません。LPやセールスページでは、セクションごとに中央配置の大きなボタンを置くと、行動導線が分かりやすくなります。
2-5. 複数ボタンを横並びにする方法
WordPressのボタンブロックでは、複数のボタンを横並びにできます。
たとえば、次のような使い方ができます。
「資料請求」と「お問い合わせ」を並べる
「無料プラン」と「有料プラン」を比較する
「公式サイト」と「レビュー記事」を並べる
「前の記事」と「次の記事」を並べる
ボタンブロックの中に複数のボタンを追加すると、横並びで表示されます。配置や間隔はテーマによって異なりますが、CSSを使えば余白や横幅も調整できます。
スマホでは横並びのボタンが窮屈になることがあるため、画面幅が狭いときは縦並びにするCSSを設定しておくと安心です。
3. コピペで使えるおしゃれなWordPressボタンCSSデザイン
ここからは、ワードプレスで使えるボタンデザインのCSS例を紹介します。ボタンブロックにCSSクラスを設定し、追加CSSにコードを貼り付けることで利用できます。
基本的には、ボタンブロックの「追加CSSクラス」に指定したクラス名と、CSS側のクラス名を合わせれば反映されます。
たとえば、ボタンブロックに btn-basic というクラスを設定した場合、CSSでは次のように書きます。
CSS.btn-basic a {
display: inline-block;
}
WordPressのボタンブロックでは、実際のリンク部分が a タグになっているため、.クラス名 a の形で指定すると反映されやすくなります。
3-1. シンプルで使いやすい基本ボタン
まずは、どんなサイトにも合わせやすい基本ボタンです。派手すぎず、記事内リンクやCTAにも使いやすいデザインです。
CSS.btn-basic a {
display: inline-block;
padding: 14px 32px;
background: #2563eb;
color: #fff;
font-weight: 700;
text-decoration: none;
border-radius: 6px;
transition: 0.3s;
}
.btn-basic a:hover {
opacity: 0.85;
}
ボタンブロックの追加CSSクラスには、次のように入力します。
btn-basic
青色は信頼感や安心感を出しやすいため、ビジネス系サイト、サービス紹介、資料請求ボタンなどに向いています。
3-2. 角丸のおしゃれなボタン
やわらかい印象にしたい場合は、角丸を大きめにしたボタンがおすすめです。女性向けサイト、サロン、カフェ、ライフスタイル系ブログなどにも合います。
CSS.btn-rounded a {
display: inline-block;
padding: 14px 34px;
background: #f97316;
color: #fff;
font-weight: 700;
text-decoration: none;
border-radius: 999px;
transition: 0.3s;
}
.btn-rounded a:hover {
opacity: 0.85;
}
追加CSSクラスには、次のように入力します。
btn-rounded
border-radius: 999px; を指定すると、横長の丸みが強いボタンになります。親しみやすい印象を出したいときに便利です。
3-3. 立体感のある影付きボタン
ボタンに影を付けると、画面から少し浮き上がって見えます。クリックできる要素だと伝わりやすく、CTAボタンにも向いています。
CSS.btn-shadow a {
display: inline-block;
padding: 15px 34px;
background: #16a34a;
color: #fff;
font-weight: 700;
text-decoration: none;
border-radius: 8px;
box-shadow: 0 5px 0 #0f7a35;
transition: 0.2s;
}
.btn-shadow a:hover {
transform: translateY(3px);
box-shadow: 0 2px 0 #0f7a35;
}
追加CSSクラスには、次のように入力します。
btn-shadow
ホバー時に少し下へ動くため、押し込まれるような印象になります。申込みボタンや購入ボタンなど、行動を促したい場面に使いやすいデザインです。
3-4. ホバーで色が変わるボタン
マウスを乗せたときに色が変わるボタンです。PCユーザーに対して、クリックできることを分かりやすく伝えられます。
CSS.btn-hover a {
display: inline-block;
padding: 14px 32px;
background: #111827;
color: #fff;
font-weight: 700;
text-decoration: none;
border-radius: 6px;
transition: 0.3s;
}
.btn-hover a:hover {
background: #ef4444;
}
追加CSSクラスには、次のように入力します。
btn-hover
通常時は落ち着いた黒系、ホバー時は赤系に変化します。ホバー効果は便利ですが、変化が激しすぎるとチカチカした印象になるため、サイトの雰囲気に合わせて調整しましょう。
3-5. グラデーション背景のボタン
おしゃれで目を引くボタンにしたい場合は、グラデーション背景が効果的です。LPやキャンペーンページ、セールスページのCTAに向いています。
CSS.btn-gradient a {
display: inline-block;
padding: 15px 36px;
background: linear-gradient(135deg, #06b6d4, #3b82f6);
color: #fff;
font-weight: 700;
text-decoration: none;
border-radius: 8px;
box-shadow: 0 8px 18px rgba(59, 130, 246, 0.25);
transition: 0.3s;
}
.btn-gradient a:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(59, 130, 246, 0.35);
}
追加CSSクラスには、次のように入力します。
btn-gradient
グラデーションは目立ちやすい反面、使いすぎるとサイト全体が派手になります。最もクリックしてほしいボタンに限定して使うのがおすすめです。
3-6. 枠線だけのアウトラインボタン
アウトラインボタンは、背景色を付けずに枠線だけで見せるボタンです。主張を抑えたいリンクや、サブCTAに向いています。
CSS.btn-outline a {
display: inline-block;
padding: 13px 32px;
background: transparent;
color: #2563eb;
font-weight: 700;
text-decoration: none;
border: 2px solid #2563eb;
border-radius: 6px;
transition: 0.3s;
}
.btn-outline a:hover {
background: #2563eb;
color: #fff;
}
追加CSSクラスには、次のように入力します。
btn-outline
メインボタンと並べるときにも便利です。たとえば、「無料相談する」を塗りつぶしボタンにし、「サービス詳細を見る」をアウトラインボタンにすると、優先順位が分かりやすくなります。
3-7. 矢印アイコン付きCTAボタン
矢印を付けると、次のページへ進む印象を自然に出せます。CTAボタンや詳細ページへのリンクにおすすめです。
CSS.btn-arrow a {
display: inline-block;
position: relative;
padding: 15px 46px 15px 32px;
background: #dc2626;
color: #fff;
font-weight: 700;
text-decoration: none;
border-radius: 8px;
transition: 0.3s;
}
.btn-arrow a::after {
content: "→";
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
transition: 0.3s;
}
.btn-arrow a:hover::after {
right: 18px;
}
.btn-arrow a:hover {
opacity: 0.9;
}
追加CSSクラスには、次のように入力します。
btn-arrow
矢印が少し動くことで、クリックを促す動きが出ます。動きは控えめなので、記事内でも使いやすいデザインです。
3-8. 光るアニメーションボタン
光が流れるようなアニメーションを付けたボタンです。特に目立たせたいCTAに向いています。
CSS.btn-shine a {
display: inline-block;
position: relative;
overflow: hidden;
padding: 15px 38px;
background: #f59e0b;
color: #fff;
font-weight: 700;
text-decoration: none;
border-radius: 8px;
}
.btn-shine a::before {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.45) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg);
animation: shine 2.5s infinite;
}
@keyframes shine {
0% {
left: -75%;
}
100% {
left: 125%;
}
}
追加CSSクラスには、次のように入力します。
btn-shine
光るアニメーションは目を引きますが、複数箇所に使うと落ち着かない印象になります。1ページに1〜2個程度に絞ると効果的です。
3-9. ふわっと浮き上がるホバーボタン
マウスを乗せると、ふわっと浮き上がるボタンです。自然な動きで、おしゃれな印象を与えられます。
CSS.btn-float a {
display: inline-block;
padding: 14px 34px;
background: #7c3aed;
color: #fff;
font-weight: 700;
text-decoration: none;
border-radius: 8px;
box-shadow: 0 6px 14px rgba(124, 58, 237, 0.25);
transition: 0.3s;
}
.btn-float a:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(124, 58, 237, 0.35);
}
追加CSSクラスには、次のように入力します。
btn-float
サービス紹介ページ、ポートフォリオ、デザイン系ブログなど、少し洗練された印象にしたいサイトに向いています。
3-10. スマホでも押しやすい大きめボタン
スマホユーザーが多いサイトでは、ボタンの押しやすさが重要です。横幅を広めにし、文字も読みやすくします。
CSS.btn-large a {
display: inline-block;
width: 100%;
max-width: 420px;
padding: 18px 24px;
background: #ea580c;
color: #fff;
font-size: 18px;
font-weight: 700;
text-align: center;
text-decoration: none;
border-radius: 10px;
box-shadow: 0 6px 0 #c2410c;
transition: 0.2s;
}
.btn-large a:hover {
transform: translateY(3px);
box-shadow: 0 3px 0 #c2410c;
}
追加CSSクラスには、次のように入力します。
btn-large
資料請求、無料相談、購入、予約など、スマホからのアクションを増やしたい場合におすすめです。
4. CSSボタンをWordPressに反映する方法
CSSボタンを使うには、WordPressにCSSコードを追加し、ボタンブロック側に対応するクラス名を設定します。ここでは、代表的な反映方法を解説します。
4-1. 追加CSSにコードを貼り付ける方法
最も簡単なのは、WordPressの「追加CSS」にコードを貼り付ける方法です。
手順は次のとおりです。
WordPress管理画面を開く
「外観」から「カスタマイズ」を選択
「追加CSS」を開く
使いたいボタンCSSを貼り付ける
「公開」をクリックする
追加CSSは、テーマファイルを直接編集しなくてもCSSを追加できるため、初心者にも使いやすい方法です。
ただし、テーマを変更すると追加CSSの見え方が変わる場合があります。重要なCSSはバックアップを取っておきましょう。
4-2. ボタンブロックにCSSクラスを設定する方法
CSSを貼り付けただけでは、対象のボタンに反映されないことがあります。ボタンブロックにCSSクラスを設定する必要があります。
手順は次のとおりです。
投稿または固定ページの編集画面を開く
デザインを適用したいボタンをクリック
右側の設定パネルを開く
「高度な設定」を開く
「追加CSSクラス」にクラス名を入力する
たとえば、CSSで .btn-gradient a と書いている場合、追加CSSクラスには次のように入力します。
btn-gradient
先頭のドットは不要です。CSSでは .btn-gradient と書きますが、WordPressの追加CSSクラス欄には btn-gradient と入力します。
4-3. カスタムHTMLブロックでボタンを作る方法
ボタンブロックではなく、カスタムHTMLブロックでボタンを作ることもできます。
HTMLは次のように記述します。
HTML<a href="https://example.com" class="custom-btn">お問い合わせはこちら</a>
CSSは次のように記述します。
CSS.custom-btn {
display: inline-block;
padding: 14px 32px;
background: #2563eb;
color: #fff;
font-weight: 700;
text-decoration: none;
border-radius: 6px;
transition: 0.3s;
}
.custom-btn:hover {
opacity: 0.85;
}
カスタムHTMLブロックを使うと、ボタンブロックよりも自由にHTMLを書けます。ただし、初心者の場合はリンク先やタグの閉じ忘れに注意しましょう。
4-4. 子テーマのstyle.cssに追加する方法
本格的にサイトを運営する場合は、子テーマの style.css にCSSを追加する方法もあります。
子テーマを使うメリットは、親テーマがアップデートされてもカスタマイズ内容を残しやすいことです。
ただし、テーマファイルを編集する場合は、ミスをするとサイト表示が崩れる可能性があります。編集前にバックアップを取り、できればFTPやサーバーのファイルマネージャーから元に戻せる状態にしておきましょう。
初心者は、まず追加CSSから始めるのがおすすめです。慣れてきたら子テーマで管理するとよいでしょう。
4-5. CSSが反映されないときの確認ポイント
CSSを貼り付けてもボタンデザインが反映されない場合は、次の点を確認してください。
クラス名が間違っていないか
追加CSSクラス欄にドットを入れていないか
CSSのカッコが閉じているか
キャッシュが残っていないか
テーマやプラグインのCSSに上書きされていないか
ボタンブロックの構造にCSS指定が合っているか
特に多いのは、CSS側では .btn-basic a と書いているのに、ボタンブロック側の追加CSSクラスに btn-basic を入れていないケースです。
また、キャッシュ系プラグインを使っている場合、CSSを変更してもすぐに反映されないことがあります。ブラウザキャッシュやサイトキャッシュを削除して確認しましょう。
5. 用途別に選ぶボタンデザインの作り方
ボタンデザインは、用途によって向いている形が異なります。すべてのボタンを同じデザインにするのではなく、クリックしてほしい行動に合わせて調整しましょう。
5-1. 資料請求・お問い合わせ向けCTAボタン
資料請求やお問い合わせ用のCTAボタンは、ページ内でしっかり目立たせることが重要です。
おすすめの特徴は次のとおりです。
背景色ははっきりした色にする
ボタン文言を具体的にする
横幅を広めにする
余白をしっかり取る
矢印や補足文を入れる
たとえば、文言は「お問い合わせはこちら」よりも、「無料で相談してみる」「サービス資料を無料で請求する」のほうが、読者にメリットが伝わりやすくなります。
CTAボタンのCSS例は次のとおりです。
CSS.btn-cta a {
display: inline-block;
width: 100%;
max-width: 460px;
padding: 18px 28px;
background: #ef4444;
color: #fff;
font-size: 18px;
font-weight: 700;
text-align: center;
text-decoration: none;
border-radius: 10px;
box-shadow: 0 6px 0 #b91c1c;
transition: 0.2s;
}
.btn-cta a:hover {
transform: translateY(3px);
box-shadow: 0 3px 0 #b91c1c;
}
追加CSSクラスは次のとおりです。
btn-cta
5-2. アフィリエイトリンク向けボタン
アフィリエイトリンク向けのボタンでは、クリック後の行動が分かりやすい文言にすることが大切です。
たとえば、次のような文言が使いやすいです。
公式サイトで詳細を見る
最新価格をチェックする
無料体験を申し込む
口コミを見てみる
キャンペーンを確認する
アフィリエイトボタンでは、過度に煽る表現よりも、読者が安心してクリックできる文言を選びましょう。
デザインは、目立ちやすいオレンジや赤系が使われることも多いですが、サイト全体の配色と合っているかも重要です。
CSS.btn-affiliate a {
display: inline-block;
width: 100%;
max-width: 440px;
padding: 17px 26px;
background: #f97316;
color: #fff;
font-size: 17px;
font-weight: 700;
text-align: center;
text-decoration: none;
border-radius: 8px;
box-shadow: 0 5px 0 #c2410c;
transition: 0.2s;
}
.btn-affiliate a:hover {
transform: translateY(3px);
box-shadow: 0 2px 0 #c2410c;
}
追加CSSクラスは次のとおりです。
btn-affiliate
5-3. ダウンロードボタン
ダウンロードボタンは、「何をダウンロードできるのか」を明確にすることが重要です。
「ダウンロード」だけでなく、「チェックリストを無料ダウンロード」「PDF資料をダウンロード」のように書くと、読者がクリックしやすくなります。
CSS.btn-download a {
display: inline-block;
position: relative;
padding: 15px 34px 15px 52px;
background: #0ea5e9;
color: #fff;
font-weight: 700;
text-decoration: none;
border-radius: 8px;
transition: 0.3s;
}
.btn-download a::before {
content: "↓";
position: absolute;
left: 26px;
top: 50%;
transform: translateY(-50%);
font-weight: 700;
}
.btn-download a:hover {
opacity: 0.85;
}
追加CSSクラスは次のとおりです。
btn-download
5-4. 外部リンク用ボタン
外部サイトへ移動するボタンでは、外部リンクであることが分かる表現を入れると親切です。
文言例は次のとおりです。
公式サイトを見る
外部サイトで確認する
メーカーサイトへ移動する
予約ページを開く
CSSで外部リンク風のアイコンを付けることもできます。
CSS.btn-external a {
display: inline-block;
position: relative;
padding: 14px 46px 14px 30px;
background: #334155;
color: #fff;
font-weight: 700;
text-decoration: none;
border-radius: 6px;
transition: 0.3s;
}
.btn-external a::after {
content: "↗";
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
}
.btn-external a:hover {
background: #0f172a;
}
追加CSSクラスは次のとおりです。
btn-external
5-5. 記事内の関連記事・内部リンク用ボタン
関連記事や内部リンク用のボタンは、CTAほど目立たせる必要はありません。自然に記事内で使える、控えめなデザインがおすすめです。
CSS.btn-internal a {
display: inline-block;
padding: 12px 26px;
background: #f1f5f9;
color: #1e293b;
font-weight: 700;
text-decoration: none;
border: 1px solid #cbd5e1;
border-radius: 6px;
transition: 0.3s;
}
.btn-internal a:hover {
background: #e2e8f0;
}
追加CSSクラスは次のとおりです。
btn-internal
内部リンク用のボタンは、サイト内の回遊率を高めるために役立ちます。記事の途中や最後に、関連性の高いページへ誘導すると効果的です。
5-6. LP・セールスページ向け目立つボタン
LPやセールスページでは、読者に行動してもらうことが目的です。そのため、ボタンは通常の記事内よりも目立つデザインにするのがおすすめです。
CSS.btn-lp a {
display: inline-block;
width: 100%;
max-width: 520px;
padding: 20px 30px;
background: linear-gradient(135deg, #f97316, #ef4444);
color: #fff;
font-size: 20px;
font-weight: 800;
text-align: center;
text-decoration: none;
border-radius: 999px;
box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
transition: 0.3s;
}
.btn-lp a:hover {
transform: translateY(-3px);
box-shadow: 0 12px 26px rgba(239, 68, 68, 0.45);
}
追加CSSクラスは次のとおりです。
btn-lp
LPでは、ファーストビュー、サービス説明後、料金表の下、よくある質問の下、ページ最下部など、読者が行動を検討するタイミングでボタンを配置しましょう。
6. ボタンデザインをおしゃれに見せるコツ
ワードプレスのボタンデザインをおしゃれに見せるには、色や形だけでなく、余白・文字・配置・サイト全体との統一感が大切です。
6-1. サイトカラーに合わせた配色を選ぶ
ボタンの色は、サイト全体の雰囲気に合わせることが大切です。
たとえば、サイトのメインカラーが青なら、CTAボタンも青系または相性のよいオレンジ系にするとまとまりやすくなります。緑を基調にしたサイトなら、濃いグリーンや黄色系のアクセントカラーも使いやすいです。
色を選ぶときは、次の3つを決めておくと便利です。
メインカラー
アクセントカラー
背景色・文字色
ボタンはアクセントカラーとして使うことが多いため、ページ内でしっかり目立つ色を選びましょう。ただし、赤・青・緑・紫などを無計画に混ぜると、統一感がなくなります。
6-2. クリックしたくなるボタン文言にする
ボタンはデザインだけでなく、文言も重要です。
「クリック」や「こちら」だけでは、読者にメリットが伝わりません。何ができるのか、クリックすると何が得られるのかを具体的に書きましょう。
悪い例は次のとおりです。
こちら
クリック
詳細
送信
改善例は次のとおりです。
無料で資料をダウンロード
料金プランを確認する
公式サイトで詳細を見る
無料相談を予約する
関連記事を読む
ボタン文言は短く、分かりやすく、行動が明確なものにするのがポイントです。
6-3. 余白・サイズ・角丸を整える
おしゃれなボタンに見せるには、余白の調整が欠かせません。
文字の周りに十分な余白がないと、窮屈で押しにくい印象になります。反対に、余白が広すぎるとボタンが大きくなりすぎて、ページ内で浮いてしまいます。
おすすめの目安は次のとおりです。
CSSpadding: 14px 32px;
border-radius: 6px;
font-weight: 700;
スマホ向けのCTAボタンなら、少し大きめにしてもよいでしょう。
CSSpadding: 18px 24px;
font-size: 18px;
border-radius: 10px;
角丸は、サイトの雰囲気に合わせて調整します。ビジネス系なら少しだけ丸く、やわらかい印象にしたい場合は大きめの角丸にすると自然です。
6-4. ホバーアニメーションを入れすぎない
ホバーアニメーションを入れると、ボタンがクリックできることを伝えやすくなります。
ただし、アニメーションを入れすぎると、落ち着きのないサイトに見えてしまいます。特に、光る・揺れる・拡大する・色が大きく変わるといった動きを同時に使うのは避けましょう。
おすすめは、次のような控えめな効果です。
CSStransition: 0.3s;
CSS.btn a:hover {
opacity: 0.85;
}
または、少し浮き上がる程度の動きです。
CSS.btn a:hover {
transform: translateY(-2px);
}
重要なCTAだけに動きを付けると、ページ内の優先順位も分かりやすくなります。
6-5. PC・スマホで見え方を確認する
ボタンデザインを設定したら、必ずPCとスマホの両方で確認しましょう。
PCではきれいに見えていても、スマホでは次のような問題が起こることがあります。
ボタンが画面からはみ出す
文字が改行されて読みにくい
横並びボタンが窮屈になる
余白が狭くて押しにくい
ボタン同士が近すぎて誤タップしやすい
スマホでは、ボタンを横幅いっぱいまたは広めに表示すると押しやすくなります。横並びボタンは、スマホでは縦並びに切り替えるのがおすすめです。
6-6. 目立たせたいボタンは1ページ内で優先順位をつける
ページ内に目立つボタンが多すぎると、読者はどれをクリックすればよいのか迷ってしまいます。
たとえば、同じページ内に赤・青・緑・オレンジの大きなボタンが並んでいると、視線が分散します。
最もクリックしてほしいボタンをメインCTAにし、それ以外は控えめなデザインにしましょう。
例として、次のように使い分けると分かりやすくなります。
メインCTA：塗りつぶしの目立つボタン
サブCTA：アウトラインボタン
内部リンク：控えめなグレー系ボタン
外部リンク：アイコン付きボタン
ボタンデザインは、ただ目立たせるだけではなく、読者の行動を整理するために使うことが大切です。
7. WordPressボタンデザインのカスタマイズ応用
基本のボタンに慣れてきたら、アイコン付きボタン、横幅いっぱいのボタン、複数列ボタン、追従ボタンなどにも挑戦してみましょう。
7-1. Font Awesomeでアイコン付きボタンを作る
Font Awesomeを使うと、ボタンにアイコンを追加できます。たとえば、ダウンロード、メール、電話、外部リンク、ショッピングカートなどのアイコンを表示できます。
Font Awesomeを読み込んだうえで、HTMLにアイコンを入れます。
HTML<a href="https://example.com" class="fa-btn">
<i class="fa-solid fa-envelope"></i> お問い合わせはこちら
</a>
CSSは次のように指定します。
CSS.fa-btn {
display: inline-block;
padding: 14px 32px;
background: #2563eb;
color: #fff;
font-weight: 700;
text-decoration: none;
border-radius: 6px;
transition: 0.3s;
}
.fa-btn i {
margin-right: 8px;
}
.fa-btn:hover {
opacity: 0.85;
}
アイコンを使うと視覚的に意味が伝わりやすくなりますが、入れすぎるとごちゃごちゃします。ボタンの目的に合うアイコンだけを選びましょう。
7-2. ボタンを横幅いっぱいに表示する
スマホやLPでは、ボタンを横幅いっぱいに表示したいことがあります。その場合は、width: 100%; を指定します。
CSS.btn-full a {
display: block;
width: 100%;
padding: 18px 24px;
background: #16a34a;
color: #fff;
font-size: 18px;
font-weight: 700;
text-align: center;
text-decoration: none;
border-radius: 8px;
transition: 0.3s;
}
.btn-full a:hover {
opacity: 0.85;
}
追加CSSクラスは次のとおりです。
btn-full
横幅いっぱいのボタンは目立ちますが、PCで大きくなりすぎる場合があります。その場合は、max-width を設定して中央寄せにしましょう。
CSS.btn-full a {
max-width: 480px;
margin: 0 auto;
}
7-3. ボタンを2列・3列で並べる
複数のボタンを2列や3列で並べたい場合は、ボタンを囲む親要素にCSSを指定します。
カスタムHTMLブロックで作る場合のHTML例です。
HTML<div class="btn-grid">
<a href="#" class="grid-btn">サービスA</a>
<a href="#" class="grid-btn">サービスB</a>
<a href="#" class="grid-btn">サービスC</a>
</div>
CSSは次のとおりです。
CSS.btn-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.grid-btn {
display: block;
padding: 14px 20px;
background: #2563eb;
color: #fff;
font-weight: 700;
text-align: center;
text-decoration: none;
border-radius: 6px;
}
.grid-btn:hover {
opacity: 0.85;
}
@media (max-width: 768px) {
.btn-grid {
grid-template-columns: 1fr;
}
}
PCでは3列、スマホでは1列に切り替わるため、表示崩れを防げます。
7-4. スマホだけボタン幅を100%にする
PCでは通常サイズ、スマホでは横幅いっぱいにしたい場合は、メディアクエリを使います。
CSS.btn-sp-full a {
display: inline-block;
padding: 14px 32px;
background: #7c3aed;
color: #fff;
font-weight: 700;
text-align: center;
text-decoration: none;
border-radius: 8px;
}
@media (max-width: 768px) {
.btn-sp-full a {
display: block;
width: 100%;
}
}
追加CSSクラスは次のとおりです。
btn-sp-full
スマホでは指でタップするため、ボタン幅を広くしたほうが操作しやすくなります。特にCTAボタンやアフィリエイトボタンでは、スマホ表示の最適化が重要です。
7-5. 固定表示の追従ボタンを作る
追従ボタンとは、画面の下部や横に固定表示されるボタンのことです。スマホで「お問い合わせ」「予約」「購入」などの導線を常に表示したい場合に使います。
HTML例は次のとおりです。
HTML<a href="https://example.com" class="fixed-btn">無料相談はこちら</a>
CSSは次のとおりです。
CSS.fixed-btn {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9999;
display: inline-block;
padding: 14px 24px;
background: #ef4444;
color: #fff;
font-weight: 700;
text-decoration: none;
border-radius: 999px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.fixed-btn:hover {
opacity: 0.85;
}
追従ボタンは目立ちますが、画面を邪魔しすぎるとユーザー体験が悪くなります。特にスマホでは、本文や他のボタンと重ならないように注意しましょう。
7-6. テーマ別にボタンCSSを調整する
WordPressテーマによって、ボタンブロックのHTML構造やCSSの優先度が異なる場合があります。そのため、同じCSSでもテーマによって反映され方が変わることがあります。
たとえば、テーマ側でボタンに強いCSSが指定されていると、自分で追加したCSSが上書きされることがあります。
その場合は、セレクタを少し具体的にします。
CSS.wp-block-button.btn-basic .wp-block-button__link {
background: #2563eb;
color: #fff;
}
WordPressのボタンブロックでは、リンク部分に .wp-block-button__link というクラスが付くことが多いため、このクラスを指定すると反映されやすくなります。
それでも反映されない場合は、ブラウザの検証ツールで、どのCSSが優先されているか確認しましょう。
8. ボタンデザインで注意すべきSEO・ユーザビリティ
ボタンデザインは、見た目だけでなくSEOやユーザビリティにも関係します。検索エンジンと読者の両方に分かりやすい設計を意識しましょう。
8-1. ボタンの文字は検索ユーザーに伝わる具体的な文言にする
ボタンの文字は、クリック後の内容が分かる具体的な文言にしましょう。
たとえば、内部リンクボタンで「こちら」とだけ書くよりも、「WordPressの初期設定を確認する」のように書いたほうが、読者にも検索エンジンにもリンク先の内容が伝わりやすくなります。
アフィリエイトボタンでも、「公式サイトを見る」「料金プランを確認する」「無料体験を申し込む」のように、行動内容を明確にしましょう。
ボタン文言は、リンク先ページの内容と一致していることが大切です。クリックを増やしたいからといって、実際の内容と違う表現を使うのは避けましょう。
8-2. クリックできることが一目で分かるデザインにする
ボタンは、読者が見た瞬間に「クリックできる」と分かるデザインにする必要があります。
背景と同化していたり、ただの見出しのように見えたりすると、クリックされにくくなります。
クリックできるボタンに見せるには、次の要素が有効です。
背景色を付ける
枠線を付ける
角丸にする
余白を確保する
ホバー効果を付ける
矢印やアイコンを付ける
ただし、ボタンに見えないほど装飾を変えすぎるのは避けましょう。読者が迷わず押せるデザインが理想です。
8-3. コントラストを確保して読みやすくする
ボタンの背景色と文字色のコントラストが低いと、文字が読みにくくなります。
たとえば、薄い黄色の背景に白文字、薄いグレーの背景に白文字などは、視認性が悪くなりやすい組み合わせです。
基本的には、次のような組み合わせがおすすめです。
濃い青背景 × 白文字
濃い緑背景 × 白文字
オレンジ背景 × 白文字
白背景 × 濃い青文字
黒背景 × 白文字
おしゃれさを優先しすぎて読みにくくなると、ボタンの役割を果たせません。まずは読みやすさを最優先にしましょう。
8-4. スマホでタップしやすいサイズにする
スマホでは、ボタンが小さすぎると押しにくくなります。特に、ボタン同士の間隔が狭いと、誤タップの原因になります。
スマホ向けのボタンでは、次の点を意識しましょう。
文字サイズを小さくしすぎない
上下の余白をしっかり取る
ボタン同士の間隔を空ける
横幅を広めにする
画面端に近づけすぎない
CTAボタンなら、スマホでは横幅いっぱいに近いデザインにすると押しやすくなります。
CSS@media (max-width: 768px) {
.btn a {
display: block;
width: 100%;
text-align: center;
}
}
スマホユーザーが多いサイトでは、PCよりもスマホ表示を優先してボタンデザインを調整しましょう。
8-5. 過度な装飾で表示速度を落とさない
ボタンを目立たせるために、画像や重いアニメーションを多用すると、ページの表示速度に影響することがあります。
特に、画像バナーを大量に使ったり、複雑なアニメーションを複数設定したりすると、読み込みや表示が重くなる場合があります。
CSSだけで作るボタンは、画像バナーよりも軽量にしやすいのがメリットです。シンプルなCSSで見た目を整え、必要な箇所だけにアニメーションを追加しましょう。
表示速度はSEOやユーザー体験にも関わるため、装飾は必要最小限にするのがおすすめです。
8-6. アクセシビリティを意識したボタン設計にする
ボタンは、誰にとっても分かりやすく使いやすい設計にすることが大切です。
アクセシビリティを意識するなら、次の点に注意しましょう。
文字色と背景色のコントラストを確保する
ボタン文言を具体的にする
小さすぎるボタンを避ける
アイコンだけのボタンにしない
キーボード操作でも分かりやすくする
リンク先の内容とボタン文言を一致させる
特に、アイコンだけのボタンは意味が伝わりにくい場合があります。できるだけテキストも一緒に表示しましょう。
また、派手に点滅するアニメーションは、人によって負担になることがあります。動きは控えめにし、読みやすさと使いやすさを優先しましょう。
9. WordPressのボタンデザインでよくあるトラブル
ワードプレスでボタンデザインをカスタマイズしていると、CSSが反映されない、中央寄せにならない、スマホで崩れるなどのトラブルが起こることがあります。ここでは、よくある原因と対処法を解説します。
9-1. ボタンの色が変わらない
ボタンの色が変わらない場合は、テーマやブロック設定のCSSが優先されている可能性があります。
まずは、CSSの指定が正しいか確認しましょう。
CSS.btn-basic a {
background: #2563eb;
color: #fff;
}
WordPressのボタンブロックで反映されない場合は、次のように指定すると改善することがあります。
CSS.wp-block-button.btn-basic .wp-block-button__link {
background: #2563eb;
color: #fff;
}
それでも変わらない場合は、ボタンブロック側で設定している色が上書きしている可能性があります。ブロックの色設定を一度リセットして確認してみましょう。
9-2. CSSを貼ってもデザインが反映されない
CSSを貼っても反映されないときは、次の項目を確認します。
追加CSSに正しく貼れているか
クラス名が一致しているか
追加CSSクラス欄にドットを入れていないか
CSSの記述ミスがないか
キャッシュを削除したか
対象のボタンにクラスを設定したか
よくある間違いは、追加CSSクラス欄に .btn-basic と入力してしまうことです。WordPressの追加CSSクラス欄には、ドットなしで入力します。
正しい入力例は次のとおりです。
btn-basic
CSS側では、ドット付きで書きます。
CSS.btn-basic a {
background: #2563eb;
}
9-3. ボタンが中央寄せにならない
ボタンが中央寄せにならない場合は、ボタン自体ではなく、親要素に text-align: center; を指定すると解決しやすくなります。
CSS.btn-center {
text-align: center;
}
.btn-center a {
display: inline-block;
padding: 14px 32px;
background: #2563eb;
color: #fff;
text-decoration: none;
border-radius: 6px;
}
追加CSSクラスは次のとおりです。
btn-center
また、ブロックエディターの配置設定で中央寄せになっているかも確認しましょう。テーマによっては、配置設定とCSSの両方が関係する場合があります。
9-4. スマホでボタンが崩れる
スマホでボタンが崩れる原因として多いのは、横幅や余白の指定です。
たとえば、固定幅で width: 500px; のように指定していると、スマホ画面からはみ出すことがあります。
スマホ対応にするなら、次のように指定しましょう。
CSS.btn-responsive a {
display: inline-block;
width: 100%;
max-width: 420px;
padding: 16px 24px;
box-sizing: border-box;
background: #2563eb;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 8px;
}
@media (max-width: 768px) {
.btn-responsive a {
max-width: 100%;
}
}
box-sizing: border-box; を入れると、paddingを含めた幅で計算されるため、はみ出しを防ぎやすくなります。
9-5. ホバー効果が動かない
ホバー効果が動かない場合は、指定しているセレクタが間違っている可能性があります。
WordPressのボタンブロックでは、ボタン本体がリンクタグになっているため、次のように a:hover を指定します。
CSS.btn-hover a:hover {
background: #ef4444;
}
また、スマホではマウスホバーがないため、PCのようなホバー効果は分かりにくい場合があります。スマホではホバーよりも、通常時の見た目やタップしやすさを重視しましょう。
アニメーションが動かない場合は、transition が指定されているかも確認します。
CSS.btn-hover a {
transition: 0.3s;
}
9-6. テーマやプラグインのCSSと競合する
WordPressでは、使用しているテーマやプラグインによって、独自のCSSが読み込まれています。そのため、自分で追加したCSSが上書きされることがあります。
対処法としては、セレクタを具体的にする方法があります。
CSS.wp-block-button.btn-custom .wp-block-button__link {
background: #2563eb;
color: #fff;
border-radius: 8px;
}
どうしても反映されない場合は、最終手段として !important を使うこともあります。
CSS.wp-block-button.btn-custom .wp-block-button__link {
background: #2563eb !important;
color: #fff !important;
}
ただし、!important を多用すると後から管理しにくくなります。まずはセレクタの見直しやキャッシュ削除を試し、必要な場合だけ使いましょう。
10. WordPressボタンデザインに関するよくある質問
最後に、ワードプレスのボタンデザインに関するよくある質問に回答します。
10-1. WordPressのボタンデザインはCSSなしでも変更できる？
はい、CSSなしでもある程度は変更できます。
WordPressのブロックエディターでは、ボタンブロックを使って背景色、文字色、配置、リンク先などを設定できます。テーマによっては、角丸やスタイルを選べる場合もあります。
ただし、影付きボタン、グラデーション、ホバーアニメーション、矢印付きボタン、スマホ用の細かい調整などを行いたい場合は、CSSを使ったほうが自由度が高くなります。
初心者は、まずボタンブロックの標準設定で作り、慣れてきたら追加CSSでカスタマイズするのがおすすめです。
10-2. ボタンデザインにおすすめのプラグインはある？
ボタンを簡単に作れるプラグインはありますが、シンプルなボタンであれば、WordPress標準のボタンブロックとCSSで十分です。
プラグインを使うと、デザインテンプレートやアイコン、装飾機能を簡単に追加できる場合があります。一方で、プラグインを増やしすぎると、管理が複雑になったり、表示速度に影響したりすることがあります。
まずは標準機能で対応し、どうしても必要な場合だけプラグインを検討しましょう。
10-3. アフィリエイトボタンはどんな色がクリックされやすい？
アフィリエイトボタンでは、オレンジ、赤、青、緑などの目立つ色がよく使われます。
ただし、「この色なら必ずクリック率が上がる」という正解はありません。サイトのデザイン、読者層、商品ジャンル、ボタンの文言、配置によって結果は変わります。
一般的には、次のように考えると選びやすくなります。
オレンジ：行動を促しやすく、購入・申込み系に使いやすい
青：信頼感があり、資料請求やサービス紹介に向いている
緑：安心感があり、無料登録や健康・教育系に使いやすい
赤：緊急性や強い訴求に向いているが、使いすぎに注意
色だけでなく、「公式サイトで詳細を見る」「無料体験を申し込む」など、クリック後のメリットが伝わる文言にすることも重要です。
10-4. コピペしたCSSはどこに貼ればいい？
初心者の場合は、WordPress管理画面の「追加CSS」に貼るのがおすすめです。
手順は次のとおりです。
WordPress管理画面にログインする
「外観」から「カスタマイズ」を開く
「追加CSS」を選択する
CSSコードを貼り付ける
「公開」をクリックする
その後、ボタンブロックの「追加CSSクラス」に、CSSで指定したクラス名を入力します。
たとえば、CSSが .btn-basic a の場合、追加CSSクラスには次のように入力します。
btn-basic
ドットは不要です。
10-5. ボタンのクリック率を上げるにはどうすればいい？
ボタンのクリック率を上げるには、デザイン・文言・配置の3つを見直しましょう。
まず、ボタンがページ内でしっかり目立っているか確認します。背景と同化していたり、文字が読みにくかったりすると、クリックされにくくなります。
次に、ボタン文言を具体的にします。「こちら」ではなく、「無料で資料をダウンロード」「公式サイトで詳細を見る」「料金プランを確認する」のように、クリック後の行動が分かる文言にしましょう。
さらに、ボタンの配置も重要です。読者が興味を持ったタイミングでボタンを置くと、クリックされやすくなります。記事の冒頭、商品紹介の直後、比較表の下、口コミの後、まとめ前などに配置すると効果的です。
クリック率を改善したい場合は、色や文言を変えてテストするのもおすすめです。小さな変更でも、読者の反応が変わることがあります。
まとめ
ワードプレスのボタンデザインは、サイトの見た目を整えるだけでなく、クリック率・回遊率・成約率にも関わる重要な要素です。
WordPressでは、ブロックエディターの「ボタン」ブロックを使えば、初心者でも簡単にボタンを作成できます。さらに、追加CSSを使えば、角丸ボタン、影付きボタン、グラデーションボタン、矢印付きCTAボタン、スマホ向けの大きめボタンなど、さまざまなデザインにカスタマイズできます。
ボタンを作るときは、次のポイントを意識しましょう。
クリックできることが一目で分かるデザインにする
ボタン文言は具体的にする
背景色と文字色のコントラストを確保する
スマホでも押しやすいサイズにする
重要なCTAボタンは目立たせる
装飾やアニメーションを入れすぎない
サイト全体のカラーと統一感を持たせる
まずはWordPressのボタンブロックで基本のボタンを作り、追加CSSにコピペしてデザインを調整してみましょう。
ボタンは小さなパーツですが、読者の行動を後押しする大切な導線です。見やすく、押しやすく、目的が伝わるボタンデザインを取り入れて、サイトの成果につなげていきましょう。