画像に任意のURLへのリンクを設定する

広告

Blogger では画像をクリックすると画像が拡大表示されるようにデフォルトで設定されています。ここでは画像に対して任意の URL に対してリンクを設定し、画像をクリックしたときにリンク先へ移動するように設定する手順について解説します。

画像にリンクを設定する

記事に画像を設定した場合、画像をクリックするとライトボックス機能で画像が拡大表示されます。

画像にリンクを設定する(1)

画像にリンクを設定する(2)

画像に対して任意の URL へのリンクを設定するには、まずデフォルトで画像に対して設定されているクリックされた時の挙動をクリアした上で改めてリンクを設定することになります。

それでは実際に試してみます。記事を編集画面で表示してください。

画像にリンクを設定する(3)

リンクを設定した画像を一度クリックしてください。その後で「リンク」をクリックしてください。

画像にリンクを設定する(4)

これで 1 番目の画像に対してデフォルトで設定されていたクリックされた時の挙動がクリアされました。

画像にリンクを設定する(5)

続いて画像に対して指定した URL へのリンクを設定します。改めて画像をクリックした上で「リンク」をクリックしてください。

画像にリンクを設定する(6)

「リンクの編集」の画面が表示されます。「リンク先のURLを指定してください」の下にあるテキストボックスにリンク先の URL を入力してください。入力が終わりましたら「OK」をクリックしてください。

画像にリンクを設定する(7)

これで 1 番目の画像に対して指定した URL へのリンクが設定されました。

画像にリンクを設定する(8)

それでは記事を更新し、その後でブログへアクセスして該当の記事を表示します。そして 1 番目の画像をクリックすると、設定された URL のページへ移動します。

画像にリンクを設定する(9)

画像にリンクを設定する(10)

画像をクリックしたときの挙動をデフォルトのものに戻したい場合は、画像を一度作成した上であらためて記事に画像を挿入してください。

-- --

画像に対して任意の URL に対してリンクを設定し、画像をクリックしたときにリンク先へ移動するように設定する手順について解説しました。

( Written by Tatsuo Ikura+ )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。