PhotoshopでJpegにハイパーリンクを追加する方法

Adobe Photoshopを使用すると、JPEG画像の任意の部分をクリック可能なWebリンクに変換することができます。Photoshopのスライスツールを使えば、クリックさせたい部分を選択することができます。このツールは、JPEGを正方形のセグメントに「スライス」し、HTMLファイルのテーブルに戻すことで機能します。 ハイパーリンクはHTMLコードの一種なので、HTMLファイルが必要です。ハイパーリンクはHTMLコードの一種なので、HTMLファイルが必要なのです。このWikiHowでは、Photoshopを使ってJPEGファイルにクリッカブルリンクを作成する方法をご紹介します。

パート1

ハイパーリンクを作成する

1. PhotoshopでJPEGを開きます。画像をPhotoshopにドラッグするか、またはコンピュータ上で画像を右クリックし、[で開く]を選択し、Adobe Photoshopを選択します。
2. ハイパーリンクにしたい画像またはテキストレイヤーを追加します。JPEG画像のどこにでもハイパーリンクを作成できるので、テキスト、アイコン、ボタンなど、閲覧者にクリックしてもらいたいものを追加します。
3. ツールバーのスライスツールをクリックします。スライスツールのアイコンはXactoナイフのようですが、デフォルトではツールバーに表示されていません。ツールバーのアイコンはクロップツールと同じで、正方形に2本の線がはみ出したような形をしています。スライスツールを開くには、サブメニューが表示されるまでクロップツールをクリックしたままにして、メニューのスライスツールをクリックします。
4. ハイパーリンクを付けたい場所を選択します。たとえば、会社名にハイパーリンクを追加したい場合は、会社名の周りをクリックしたままマウスをドラッグして選択します。

   • 同じ大きな画像に複数のハイパーリンクを作成する場合は、最初の領域を選択し終えたら、次の領域を選択します。画像の複数の領域に同じ（または異なる）URLを設定できます。
5. スライスした領域を右クリックし、[スライスオプションを編集] を選択します。選択したスライスの編集オプションが開きます。
6. スライスに名前を付けます。この名前は、画像をスライスに変換すると、このスライスに適用されます。
7. URLとその他の詳細を入力します。視聴者が選択した領域をクリックすると、「URL」フィールドに入力したURLに移動します。これは、完全なURL（例：https://www.wikiHow.com）または相対URL（例：/index.html）にすることができます。

   • URLを新しいブラウザ・ウィンドウで開きたい場合は、「Target」フィールドに「_blank」と入力してください。
   • 目の不自由な訪問者のために、Alt Tagフィールドにリンクを説明するテキストを追加します。
8. OKをクリックし、他のスライスについても繰り返します。画像の他の部分にハイパーリンクを作成したい場合は、次のスライスを右クリックし、「スライスオプションを編集」を選択して、設定を入力します。

パート2

画像とコードの保存

1. ファイルメニューをクリックし、エクスポートを選択します。画像をエクスポートするためのオプションが表示されます。
2. Save for Web (Legacy)を選択します。これにより、Web用に保存パネルが開きます。
3. 画像のタイプとしてJPEGを選択します。デフォルトのタイプはGIFで、右上のメニューにすでに表示されています。これをJPEGに変更して、画像形式を同じにします。
4. 保存...ボタンをクリックします。ウィンドウの一番下にあります。最適化保存ウィンドウが開きます。
5. 形式としてHTMLと画像を選択します。これによりPhotoshopは、画像とともにハイパーリンクのコードを含むHTMLファイルを保存します。

   • ハイパーリンク画像を保存する際、実際には複数のファイルを保存することになります：ハイパーリンクコードを含むHTMLファイルと、"images "というサブフォルダです。images "フォルダには、複数のファイルに分割された元の写真が保存されます。
   • Photoshopが生成するHTMLコードは、画像が複数に分割されていることに誰も気づかないように、画像をつなぎ合わせることを知っているのでご安心ください。
6. 保存場所を選択します。ファイルを既存のフォルダに保存することもできますが、実際には1つのHTMLファイルと画像のサブフォルダを保存していることを忘れないでください。ハイパーリンク写真 "などと名づけた方が、ファイルを誤って互いに移動させてしまわないので簡単かもしれません。
7. HTMLファイルに名前を付け、「保存」をクリックします。デフォルトでは、HTMLファイルは元のJPEGと同じ名前になります。必要に応じて変更してください。
8. HTMLファイルをダブルクリックすると、ハイパーリンク画像が表示されます。HTMLファイルは".html "で終わるファイルです。ファイルをダブルクリックすると、デフォルトのウェブブラウザ（ChromeやSafariなど）で開きます。ご覧のように、画像上に作成したハイパーリンクをクリックできるようになります。

   • .htmlをメモ帳やテキストエディットのようなテキストエディタで開くと、Photoshopが画像のパーツを含むテーブルを作成したことがわかります。
9. ハイパーリンクされた画像を自分のウェブサイトに追加します。タグの間のコードをすべてコピーして、他のHTMLファイルに追加することができます。images "フォルダも他のHTMLファイルと同じディレクトリにコピーして、画像が見えるようにしてください。

この記事は、CC BY-NC-SAの下で公開された「 How to Add a Hyperlink to a Jpeg in Photoshop 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。