画像をクリックしたら、好きなページにジャンプさせたい──
そんなときは、画像にURLリンク（リンク設定） を追加するだけでOKです。
以下のような見栄えのよいバナーにURLを設定すると、効果的ですね！
CSSだけでは作りにくいデザイン（柄・写真入り・イラスト）も、画像なら簡単に“ボタン化”できます。
使用例：サイトマップページにジャンプします。
ここでは、WordPressのブロックエディターを使って
「画像にURLを設定する手順」を解説します。
画像にURLを設定する手順
内部リンクでも外部リンクでも同じ手順になります。
飛び先にしたいページのURLをコピーしておくとスムーズです。
画像ブロックを挿入する
- 編集画面で、ブロック追加の「＋」をクリック。
- 検索ボックスに「画像」と入力し、表示された「画像」ブロックをクリックします。
使いたい画像を選ぶ
画像の入れ方は、普段どおりで大丈夫です。
- パソコン内の画像を使う → ［アップロード］
- すでにアップロード済みの画像を使う → ［メディアライブラリ］
から選んで、使いたい画像を挿入します。
画像にリンクを挿入する
- 画像が入ったら、その画像ブロックをクリックして選択します。
- 画像上に表示されたメニューから、「リンク」アイコン（鎖マーク） をクリックします。
リンク先URLを設定する
- 表示された入力欄に、飛び先にしたいURLをコピペします。
- 右側の 矢印アイコンをクリックすると、リンクが確定します。
矢印の隣にあるｖマークをクリックすると、「新しいタブで開く」オプションが表示されます。お好みでチェック。
画像の配置やキャプションを整える
画像ブロックを選択した状態で、もう一度上部のメニューを見てみましょう。
- 左揃え
- 中央揃え
- 右揃え
など、「配置」アイコンをクリックすると画像の配置を選べます。
「キャプションを追加」するアイコンもあり、画像の下にキャプション（説明）を入力することもできます。
できあがり例がこちら。
おわりに
キャッチーなデザインは、興味をひきますよね。
例えば、「50％オフ！Shop Now！」という言葉だけよりも、画像のほうがワクワクします。
とてもパワフルな吸引力！
より多くの情報を伝えることもできますね。
すてきな画像に見てほしいURLリンクを設定して、行動喚起につなげたいですね！
画像の形やサイズは自由なので、
ご自身のブログの雰囲気に合う「オリジナルボタン」を作ってみてください。
関連記事（URLリンク設定のまとめ）
CocoonやWordPressのボタンにURLを設定する手順もまとめています。
「普通のボタンにURLを設定したい」という方は、以下の記事も参考にしてみてください。
コメント