閉じる

WordPressでボタンを設置する方法｜プラグイン不要のCSS追加手順を解説

広告

WordPressを使ってWebサイトを運用していると、特定のアクションを促すための「ボタン」を設置したい場面が多くあります。

リンクテキストよりも視認性が高く、クリック率（CTR）の向上に直結するボタンは、コンバージョンを獲得するための重要な要素です。

標準のブロックエディタでもボタンを作成できますが、デザインの自由度を高めるためにはCSSによるカスタマイズが欠かせません。

この記事では、プラグインを使用せずにCSSを使って、自分好みのボタンを設置する具体的な手順を詳しく解説します。

初心者の方でも、コードをコピー＆ペーストするだけで簡単に実装できる内容となっていますので、ぜひ参考にしてください。

目次 [ close ]
  1. WordPressでボタンを設置する主なメリット
  2. 標準ブロックエディタでのボタン作成手順
  3. プラグイン不要でCSSを追加する方法
  4. 基本となるボタンのHTMLとCSS構造
    1. CSSプロパティの解説
  5. 用途別：応用ボタンデザインのバリエーション
    1. 立体感のある3Dボタン
    2. グラデーションボタン
  6. ボタンの配置とレイアウトの最適化
  7. CSSボタン作成時の注意点とアクセシビリティ
  8. ボタンデザインの比較表
  9. CSSが反映されない場合のチェックリスト
  10. まとめ

WordPressでボタンを設置する主なメリット

ボタンを設置する最大のメリットは、ユーザーに対して「次に何をすべきか」を視覚的に明示できる点にあります。

テキストリンクに比べてクリックできる領域が広いため、モバイル端末のユーザーにとっても操作性が向上します。

特に、お問い合わせフォームへの誘導や資料ダウンロードなど、重要なアクションを促す場所ではボタンの使用が推奨されます。

また、サイト全体のデザインテーマに合わせたボタンを作成することで、ブランドイメージの統一感を持たせることが可能です。

プラグインを導入せずに実装すれば、サイトの表示速度を落とすことなく軽量な動作を維持できるという利点もあります。

標準ブロックエディタでのボタン作成手順

まずは、WordPressの標準機能であるブロックエディタ（Gutenberg）を使った基本的なボタン作成方法を確認しましょう。

投稿編集画面で「+」アイコンをクリックし、ブロック検索窓に「ボタン」と入力してボタンブロックを選択します。

ボタンが表示されたら、任意のテキストを入力し、ツールバーからリンク先URLを設定してください。

右側のサイドバーパネルでは、ボタンの背景色や文字色、角の丸みなどを直感的に調整することが可能です。

しかし、標準機能だけでは「影をつけたい」「マウスを乗せた時に色を滑らかに変えたい」といった細かなこだわりを実現するには限界があります。

そこで、CSSを活用したオリジナルのボタンカスタマイズが重要になってきます。

プラグイン不要でCSSを追加する方法

WordPressに独自のCSSを適用する方法はいくつかありますが、最も手軽で安全なのは「追加CSS」機能を利用する方法です。

WordPressの管理画面から「外観」を選択し、「カスタマイズ」をクリックしてください。

メニューの中にある「追加CSS」という項目を選択すると、コードを入力できるエディタが表示されます。

ここに記述した内容はサイト全体に反映され、テーマのアップデートによってリセットされる心配もありません。

また、特定のページにだけ適用したい場合は、ブロックエディタの「高度な設定」にある「追加 CSS クラス」を利用するのが効率的です。

基本となるボタンのHTMLとCSS構造

まずは、CSSで装飾するための基礎となるHTMLコードを準備しましょう。

HTMLでボタンを作成する場合、通常は<a>タグ（リンクタグ）に対してクラス名を指定します。

以下のコードを「カスタムHTML」ブロックに記述してください。

HTML
<!-- ボタンのHTML構造 -->
<a href="https://example.com" class="my-custom-button">詳しくはこちら</a>

このmy-custom-buttonというクラス名に対して、CSSでデザインを肉付けしていきます。

次に、最もシンプルで使い勝手の良いボタンデザインのCSSコードを記述します。

CSS
/* ボタンの基本デザイン */
.my-custom-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #0073aa; /* WordPressカラー */
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

/* マウスホバー時の動作 */
.my-custom-button:hover {
    background-color: #005177;
    color: #ffffff;
}

このコードを適用するだけで、プロフェッショナルな印象を与えるボタンが完成します。

CSSプロパティの解説

上記のコードで使用した主要なプロパティについて、それぞれの役割を詳しく解説します。

display: inline-block;は、要素をブロック状にしつつ、前後に改行を入れないようにするための指定です。

paddingは、ボタン内の文字と外枠の間の余白を調整し、ボタンの大きさを決定します。

border-radiusの値を大きくすると角が丸くなり、50px程度に設定すると楕円形の「カプセル型ボタン」になります。

transitionは、マウスを乗せた（ホバーした）際の変化をアニメーションのように滑らかにするために必要です。

用途別：応用ボタンデザインのバリエーション

サイトの雰囲気に合わせて使い分けられる、応用的なボタンデザインを紹介します。

立体感のある3Dボタン

影をつけることで、思わず押したくなるような立体的なボタンを作成できます。

CSS
.btn-3d {
    display: inline-block;
    padding: 15px 35px;
    background-color: #f39c12;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 5px 0 #d35400; /* 下側に影をつけて厚みを出す */
    transition: all 0.1s;
}

.btn-3d:active {
    transform: translateY(3px); /* クリック時に少し下がる */
    box-shadow: 0 2px 0 #d35400;
}

このデザインは、コンバージョンを強く意識したいランディングページ（LP）などに最適です。

グラデーションボタン

2026年のWebトレンドでも引き続き人気のある、洗練されたグラデーションデザインです。

CSS
.btn-gradient {
    display: inline-block;
    padding: 15px 40px;
    background: linear-gradient(45deg, #ff512f, #dd2476);
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(221, 36, 118, 0.3);
}

グラデーションを使用する場合は、視認性を確保するために文字色を白（#ffffff）に設定するのが基本です。

ボタンの配置とレイアウトの最適化

せっかくボタンをデザインしても、配置場所が適切でなければクリックされません。

WordPressでボタンを中央寄せにするには、ボタンを囲む親要素に特定のスタイルを適用する必要があります。

例えば、以下のようなHTML構造にします。

HTML
<div class="button-container">
    <a href="#" class="my-custom-button">今すぐ登録する</a>
</div>

このコンテナに対して、以下のCSSを適用することで中央に配置できます。

CSS
.button-container {
    text-align: center;
    margin: 30px 0;
}

スマートフォンの表示も考慮し、画面幅が狭い場合にはボタンの幅を100%にする設定も有効です。

CSSボタン作成時の注意点とアクセシビリティ

デザイン性ばかりを重視しすぎると、特定のユーザーにとって使いにくいボタンになってしまう可能性があります。

まず、背景色と文字色のコントラスト比には十分に注意を払ってください。

視認性が低いと、視覚に障害がある方だけでなく、屋外の明るい場所でスマホを見ているユーザーにも不親切です。

また、ボタンのサイズも重要で、タップターゲットの最小サイズは44px以上が推奨されています。

さらに、スクリーンリーダーを利用しているユーザーのために、ボタンの内容を推測できるテキストを設定することが不可欠です。

「こちら」や「クリック」といった言葉だけでなく、「製品カタログをダウンロードする」のように具体的なアクションを記述しましょう。

ボタンデザインの比較表

それぞれのボタンデザインの特徴を以下の表にまとめました。

デザインタイプ主な特徴推奨される利用シーン
フラットデザインシンプルで清潔感があるブログの記事内リンク、フッター
3Dデザインクリックしやすさが際立つ購入ボタン、申し込みボタン
グラデーション華やかで目を引くキャンペーンページ、トップページ
アウトライン（枠線のみ）主張しすぎず控えめ「キャンセル」や「戻る」などのサブ操作

CSSが反映されない場合のチェックリスト

「追加CSSにコードを書いたのにボタンが変わらない」というトラブルはよく起こります。

その場合は、まずブラウザのキャッシュを疑ってみてください。

キャッシュが残っていると古いスタイルが表示され続けるため、シークレットモードで確認するかキャッシュをクリアしましょう。

次に、CSSの優先順位（詳細度）の問題を確認します。

テーマが元々持っているスタイルが強力な場合、独自のコードが上書きされている可能性があります。

どうしても反映されない場合は、以下のように!importantを付与して強制的に適用させる方法もありますが、多用は禁物です。

CSS
.my-custom-button {
    background-color: #ff0000 !important;
}

スペルミスやセミコロン（;）の付け忘れなど、記述ミスがないかも改めて見直しましょう。

まとめ

WordPressでクリックされるボタンを設置するには、標準のブロック機能を理解した上で、CSSによるカスタマイズを取り入れるのが最も効果的です。

プラグインを増やさずにCSSで実装することで、サイトの軽量化と自由なデザインの両立が可能になります。

まずは基本のボタンコードを試してみて、徐々に色や形、アニメーションを自分好みに調整してみてください。

ボタンは単なる装飾ではなく、ユーザーとサイト運営者をつなぐ重要なインターフェースです。

視認性やアクセシビリティにも配慮しながら、最適なボタンデザインを追求していきましょう。

この記事で紹介した手順を活用し、あなたのWordPressサイトの回遊率やコンバージョン率を向上させてください。

URLをコピーしました！