ボタンは小さなもののように見えるかもしれませんが、あなたのウェブサイトでは大きな力を発揮します。ボタンは、訪問者をあなたの望む行動へと導く最もシンプルな方法のひとつです。
製品ページへの誘導から、続きを読むやサインアップを促すまで、見栄えの良いボタンはあらゆる違いを生み出します。良いニュースは、デザインにコーディングのスキルは必要ないということです。
WordPressには組み込みのオプションがあり、ブロックプラグインの助けを少し借りることで、ボタンの見た目をさらにコントロールすることができる。
この記事では、WordPressでスタイリッシュなボタンを作成する3つの簡単な方法をご紹介します。
デフォルトのエディターから始まり、より柔軟性のあるプラグインを紹介し、最後にテーブル内にボタンを追加するボーナスメソッドを紹介する。さあ、飛び込もう。
美しいテーブルを作る
ブロックエディター付き
方法1：デフォルトのボタンブロックを使う
WordPressには、ほとんどのケースで問題なく動作するButtonsブロックが組み込まれています。ブロックエディターで小さな（+）アイコンをクリックし、"Buttons "を検索すると見つかります。
ボタンブロックが挿入されると、ボタンの中にテキストを追加するように指示されます。
ブロックを挿入すると、1つまたは複数のボタンを並べて追加できます。各ボタンは右サイドバーから直接カスタマイズできます。以下のオプションがあります：
- ボタン幅（フルまたはオート）
- テキストと背景色
- パディングとアライメント
- ボーダー半径（角丸用）
特にミニマルなデザインにこだわるのであれば、良い出発点となるだろう。⚠️しかし、ホバー効果、グラデーション、レスポンシブ・スペーシングなど、より多くのスタイリング・オプションが必要な場合は、すぐに限界に達するだろう。
🛠️ プロのアドバイス 完璧な丸みを帯びたボタンにしたいですか？ボーダー半径を 100 ピル式ボタン
方法2：Ultimate Blocksのボタンブロックを使う
CSSを書かずにもっとコントロールしたい場合、 アルティメット・ブロック は試してみるべき素晴らしいGutenbergプラグインだ。このプラグインは ボタン・ブロック カスタマイズを念頭に置いて作られている。
アルティメット・ブロックの設置は簡単だ。
-
に移動する。 プラグイン
-
プラグインの追加をクリックする
-
"Tableberg "で検索
-
Click インストールそして アクティベート
その後 アルティメット・ブロックのインストールと有効化 ボタン（アルティメットブロック）」ブロックを追加する。
アルティメット・ブロックのボタンを挿入するには、小さな（＋）アイコンをクリックし、"ボタン（改良版）"を検索する。
アルティメットブロックボタンを追加すると、その違いにすぐに気づくでしょう。以下は、ブロック設定で微調整できる内容です：
-
ボタンの正当性と方向性
-
ボタンサイズ
-
ボタン幅
-
アイコンのサポート（テキストの前または後）、およびその他のさまざまなオプション
-
アニメーション・サポート
Button Stylesセクションでは、以下のカスタマイズが可能です：
-
通常状態とホバー状態のカラーオプション
-
ボタン・ボーダー
-
ボタンのスタイリング
-
寸法設定でパディング、ブロック間隔、マージンを調整可能
-
カスタムCSSオプション
Ultimate Blocksのボタンブロックには、デフォルトのボタンブロックの機能がすべて含まれています。下記はUltimate Blocksがデザインしたカスタムデザインのボタンですが、機能的には問題ありません。
このブロックは、マーケッターやブロガー、コールトゥアクションボタンを目立たせたい人に最適です。一行もコードを書くことなく、デザインレベルの柔軟性を得ることができます。
🎯 プロのアドバイス 対照的なホバーカラーを使用することで、ユーザーがボタンとインタラクションしたときに満足のいくビジュアルレスポンスが得られます。
🧩 ボーナス: テーブル内にボタンを追加する
ボタンが必要なときがある レイアウト内価格表や機能比較のようなものです。そこで テーブルバーグ が輝く。
ベスト・ディール |
||
 |
 |
 |
Apple AirPods Pro 第2世代 |
SAMSUNG ギャラクシーバッズ2プロ |
グーグルPixel Buds Pro |
|
|
|
Tablebergでは、各テーブルセルがミニキャンバスのように機能します。つまり、専用のボタン・ブロック 細胞内右.もうプレーンテキストにこだわる必要はありません。「今すぐ購入」、「詳細を見る」、「無料お試し」などのCTAボタンを価格設定行に直接追加することができます。
Tablebergのボタン機能は、アルティメット・ブロックのボタンと同じです。
テーブル内のボタンの外観をカスタマイズしたいですか？問題ありません。枠線の半径やパディングを変更したり、アイコンを追加したりすることもできます。
🛠️ プロのアドバイス ボタンと星評価やリボンを同じ行内に組み合わせると、視覚的なインパクトが増し、コンバージョン率が向上します。
最終的な感想
WordPressで美しいボタンをデザインするのに、カスタムCSSや開発者の手を借りる必要はありません。ネイティブのButtonsブロック、Ultimate Blocksの強化版、そしてTablebergのようなツールの柔軟性を使えば、見栄えがよく、あらゆるデバイスで動作する、完全にインタラクティブなレイアウトを構築できます。
プレーンなリンクや時代遅れのショートコードはもう必要ありません。エディタ内で完全にコントロールできるようになりました。
続きを読む
