WordPress操作方法

ボタン

2023.12.25[更新]

「ボタン」を使うことで“リンク先”とわかりやすく伝えることができます。

文字だけでもリンクの設定はできますが、少し目立たせたい、でも画像を作るまではちょっと・・・なんて時に効果的です。

見本

使い方

1)ブロックの追加で「ボタン」選びます


(2)ボタン内に表記するテキストを入力します。


サンプルでは「お問い合わせ」と入れてみます。

リンクを設定します。

(3)リンクのアイコンを選択します。

(4-1)入力枠が出るので(上の青枠)、検索でページを探すか、URLを直接入力します。

自分のホームページ内にリンクする場合は、リンク設定はここで完了。

自分のホームページ以外、外部サイトにリンクする際は、もうひと手間必要です。

(4-2)鉛筆アイコン(↓の青いアイコン)「編集」を選択します。

(4-3)「高度」を選択して、「新しいタブで開く」にチェックを入れます。

外部リンクは別タブで開くのが一般的です。
訪問者にも違うホームページに飛んだことがわかります。
また、メリットとして自分のページは残しておいたままの方が離脱されるリスクを抑えられます。

配置を設定します。

デフォルトの左揃えのままか、「中央揃え」が無難かと思われます。

ですので、揃え位置の変更アイコンを選択し、「中央揃え」を選択します。

縦の揃えは↓の青いアイコンから選択します。(あまり使いませんが…)

背景色を変える

デフォルトでは黒色になっていますので、薄いピンクにしてみます。

(5-1)右側の設定から「スタイル」タブを選択します。

(5-2)「色」の「背景」から希望の色を指定します。
(※色の指定の仕方は「段落-ハイライト(文字色を変える)」の(3)~(4)をご参照ください)

こんな感じで背景色が変わりました。
さて、お気づきかと思いますが、ピンクに白文字・・・見づらいですね。
なので、テキストの色も変えましょう。

※ちなみにリンク色はホームページのカラーに合わせて設定済みです。

ご自身の設定した背景色と合わない可能性が高いので、背景色を指定した場合は、テキストの色も合わせて設定することをおすすめします。
当方のサイトだと基本は水色なので、そのままだと↓こんな感じに。

テキストの色を変える

(6-1)先ほど設定した背景の上にある「テキスト」から希望の色を指定します。

今回は赤にしました。
↓こんな感じに変わります。

その他にもカスタマイズできます。見てみましょう。

輪郭を付ける

デフォルトだと塗りつぶしですが、「輪郭」を選ぶと枠付きになります。

(7-1)右側の設定から「スタイル」タブの真下にある「スタイル」で「輪郭」を選択します。

背景色を設定している場合

背景色を設定しない場合(*1)

(*1)背景色は↓のように「クリア」を選択すると外すことができます

サイズを変える

「タイポグラフィ」で変更します。

ちょっと大きくなりましたね。

角を付ける(四角~角丸になります)

「枠線」に数値を入力するか、スライダーで指定します。

今回は10で少しだけ角丸にしました。

(15)完成です。
サンプルでわかりやすくする為に、ちょっと大きくし過ぎました。。。

ボタンのテキスト文字数の注意点です。
PCでイイ感じ表示されていても、スマホで見た時に崩れている場合があります。ボタンだけに限りませんが、PC・スマホ、両方で直接確認することをおすすめします(^^)