ボタンCSS生成

CSSで作るボタンのコードを作成するツールです。10種類のひな形から選んで、色・形・マウスを乗せたときの動きを自由に変えられます。

ブログやLP、Webサイトの「詳しく見る」「申し込む」などのボタンにお使いください。作成したコードは無料で、商用でもご利用いただけます。

ボタンを作る

1. ひな形を選ぶ

2. 文字とリンク

3. 形と大きさ

4. 色

5. マウスを乗せたときの動き

6. コードをコピーする

「まとめてコピー」はCSSを<style>タグで囲んだ形です。WordPressの「カスタムHTML」ブロックにそのまま貼れます。

WordPressでの使い方

• 1か所だけで使う：「まとめてコピー」したコードを、「カスタムHTML」ブロックに貼り付けます。
• サイト内で何度も使う：CSSは「外観」→「カスタマイズ」→「追加CSS」に1回だけ貼り、HTMLを使いたい場所の「カスタムHTML」ブロックに貼ります。文字とURLを変えれば、同じデザインのボタンを何個でも置けます。

押されやすいボタンのコツ

• まわりと違う色にする：サイトの中で目立つ色（アクセントカラー）を使うと、ボタンだと気づいてもらいやすくなります。
• 十分な大きさにする：スマホでは指で押すため、高さは44px以上が目安です。
• 具体的な文言にする：「こちら」「詳しく見る」より、「無料で試してみる」「資料をダウンロード」のように、押したら何が起きるかが分かる言葉が効果的です。
• 文字と背景のコントラストを確保する：薄い色どうしの組み合わせは読みにくくなります。コントラスト比チェックで確認できます。

広告リンクのrel=”sponsored”について

Googleは、広告やアフィリエイトなど報酬が発生するリンクに、rel=”sponsored”（またはrel=”nofollow”）を付けるよう求めています。広告のボタンを作るときは、「広告・アフィリエイトのリンク」にチェックを入れてください。

あわせて使いたいツール

• CSSグラデーション・影の生成ツール：グラデーションや影（box-shadow）のCSSを作れます。
• カラーコード変換・コントラスト比チェック：カラーコードの変換と、文字色・背景色の読みやすさをチェックできます。