Photoshop でハイパーリンクを作成するにはどうすればよいですか?

Adobe Photoshop CC のスライス ツールを使用すると、任意の画像または画像の一部をクリック可能なハイパーリンクに変換できます。この機能の問題点は、ハイパーリンクを機能させるには、画像をプレーンな JPG や PNG ではなく HTML ファイルとして保存する必要があることです。幸いなことに、これはコーディングの専門家でなくても誰でも使用できる機能です。 Photoshop が HTML コードを作成し、ウェブに適した画像形式で画像を埋め込みます。

ステップ 1

Photoshop で任意の画像を開きます。理想的には、Web ブラウザーで適切に表示されるのに十分な大きさである必要があります。ツールボックスから「スライスツール」を選択します。表示されていない場合は、切り抜きツールの右下隅、または表示されているグループ内の他のツールをクリックして押したままにし、[スライス ツール] を選択します。

ステップ 2

クリック可能にする領域にカーソルをドラッグします。画像上に 1 つのハイパーリンクを作成するには、カーソルを画像全体にドラッグします。

ステップ 3

複数のハイパーリンクが必要な場合は、スライス ツール カーソルを画像の一部だけにドラッグします。マウス ボタンを放した後、次のハイパーリンクの 2 番目のスライスを作成できます。必要に応じて、1 つの画像に多数のハイパーリンクを作成できます。

ステップ 4

Slice Tool でスライスをダブルクリックして、Slice Options ウィンドウを開きます。ハイパーリンクを作成するには、[URL] フィールドに Web ページのアドレスを入力する必要があります。他のフィールドはオプションですが、名前を使用すると、リンクを区別するのに役立ちます。ターゲット フィールドに「_blank」を追加すると、リンクが新しい Web ブラウザ タブで開くように指定されます。 Alt タグ フィールドは、非グラフィカル ブラウザーで画像が表示されない場合、または画像の読み込み中に表示されるテキストです。メッセージ テキスト フィールドは、ブラウザーがステータス バーの URL の代わりに表示するものです。

ステップ 5

リンクが完成したら、[ファイル] メニューから [Web 用に保存] を選択します。プリセットとして「PNG-24」または「JPG」を選択し、「保存」ボタンをクリックします。 [フォーマット] メニューをクリックし、[HTML と画像] を選択します。これにより、ファイル形式が HTML に変更されます。 「保存」をクリックすると、作成した画像とリンクを使用して、Photoshop が 1 つの HTML ページを作成します。画像ファイル自体は Images フォルダーに保存されます。お気に入りの FTP クライアントを使用して、HTML ファイルと Images フォルダーの両方を Web サイトの同じディレクトリにアップロードします。

ヒント

メモ帳のような基本的なテキスト エディタを使用すると、Web ページと同じように HTML ファイルのコードを編集できます。たとえば、Web サイトの画像を別のフォルダーに保存したい場合は、指定した「/images」フォルダーを任意のフォルダーに変更してから、画像をそのフォルダーに移動できます。

Web ページや電子メール内の画像にハイパーリンクを追加するのに、Photoshop は必要ありません。ほとんどの電子メール プログラムにはハイパーリンク機能が含まれており、通常は画像をメッセージに挿入した後、画像を右クリックするだけで使用できます。画像を Web サイトにアップロードする場合、次のような HTML5 コードを使用して、クリック可能な画像として任意のページに追加できます。