WordPressで簡単にボタンを作る方法【HTMLコード例付き】

目次

1. はじめに
2. ボタンを作る方法は2種類
3. HTMLだけで作る基本的なボタン
4. CSSを使ってデザインを調整する
5. リンク付きボタンのコード例
6. レスポンシブ対応の工夫
7. まとめ

1. はじめに

WordPressの「ボタン」ブロックも便利ですが、もっと自由にデザインしたいときは カスタムHTML ブロックにコードを書いて、自作するのがおすすめです。

2. ボタンを作る方法は2種類

• ブロックエディタの「ボタン」を使う（簡単だけど自由度が低い）
• HTML＋CSSで自作する（自由度が高い）

3. HTMLだけで作る基本的なボタン

<a href="#" class="my-btn">クリック</a>
  

4. CSSを使ってデザインを調整する

<style>
.my-btn {
  display: inline-block;
  padding: 14px 28px;
  background-color: #0073aa;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}
.my-btn:hover {
  background-color: #005177;
}
</style>
  

5. リンク付きボタンの完成コード

<style>
.my-btn {
  display: inline-block;
  padding: 14px 28px;
  background-color: #0073aa;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s;
  font-size: clamp(14px, 2.5vw, 18px);
}
.my-btn:hover {
  background-color: #005177;
}
</style>

<a href="https://example.com" class="my-btn">詳しくはこちら</a>
  

6. レスポンシブ対応の工夫

上記コードでは font-size: clamp(14px, 2.5vw, 18px); を使っています。 これにより、スマホ・タブレット・PC どの画面サイズでも文字が自動調整され、見やすい大きさで表示されます。

7. まとめ

WordPressでボタンを作るなら、HTML＋CSSを使えば自由にデザインできます。 今回紹介したコードを「カスタムHTMLブロック」に貼り付けるだけで、すぐにおしゃれなレスポンシブ対応ボタンが作れます。