当サイトでは広告を含む記事があります。

当サイトでは広告を含む記事があります。

【WordPress】URLをボタンにする方法

Wordpress URL button how to_Natural Transition with Gradation style

WordPressの「ボタン」ブロックを使うと、URLを簡単にボタン化できます。

この記事では、その作成手順とデザイン設定を分かりやすく紹介します。

いくみ
いくみ

内部リンク・外部リンクともに同じ方法です。

WordPress標準の「ボタン」ブロックとは?

WordPressに組み込まれているボタン機能で、

  • どのテーマでも使える
  • グラデーション背景が選べる❤️
  • 角丸や色変更が簡単

という、汎用性の高いブロックです。

WordPressのURLボタンの作り方(手順)

1.ブロックの右辺にプラスサインが表示されています。クリック。

以下のようになります。

WordPress ブロックメニューの選択

2.検索ボックスに[ボタン]と入力。

白い[ボタン]アイコンがWordPressのボタンです。クリック。

WordPressのボタンブロックアイコン

3.ボタンのテキストを入力する(いつでも修正可。)

WordPressのボタンにテキストを追加

4.安全ピンのような形の[リンク]アイコンをクリック。

入力欄にリンク先のURLをコピペし、矢印アイコンをクリック。

WordPressのボタンにURLリンクを設定

5.右サイドバーからお好みで各種設定。

ボタンサイズ:[ブロック]タブ>花の形の[設定]アイコンタブをクリックすると、ボタンの幅を選択設定できます。

WordPressのURLボタンにボタンサイズを設定

スタイルと色設定

[ブロック]タブ>丸い形の[スタイル]アイコンタブで、次の設定ができます。

  • スタイル: 塗りつぶし / アウトライン
  • 色: テキスト色・背景色(グラデーションも可)
  • 枠線: 幅・色・丸み(角丸)
WordPressボタンのスタイル設定
いくみ
いくみ

もう少しスクロールすると、枠線の色や幅、丸みの強さも設定できます。

そして、[色設定]の[背景]をクリックすると、グラデーション効果を選ぶこともできます!

WordPressボタンの背景、グラデーション設定

6.ボタンの位置は、ボタンテキストをクリックして表示されるツールバーから選べます。

WordPressのURLボタンの位置設定

おわりに

ボタンを使うと、おすすめしたいページがひと目でわかるようになり、回遊率アップにもつながります。

まずは1つ、この記事の後に読んでほしいページへのボタンを作ってみてくださいね。

アイキャッチ画像は

Canvaで編集

コメント

タイトルとURLをコピーしました