- 公開日:
スプレッドシートで画像リンクを設定する方法
Google スプレッドシートでは挿入した画像にリンクを設定することが出来ます。
挿入した画像にリンクを設定することで、画像に関連するWebサイトにワンクリックでアクセスさせることも可能です。
この記事では、スプレッドシートで画像リンクを設定する方法を分かりやすく紹介します。
スプレッドシートで画像リンクを設定する方法
Google スプレッドシートに画像リンクを設定する場合、挿入した画像にGoogle Apps Script(GAS)で作成したスクリプトを割り当てるか、関数を利用します。
ただし、関数を利用して画像にリンクを設定した場合、画像をセル内に表示することしか出来ません。
以下より、スプレッドシートで画像リンクを設定する方法を分けて詳しく解説します。
GASを割り当てて画像リンクを設定する
挿入した画像にGASで作成したスクリプトを割り当てて画像リンクを設定します。
![「セル上に画像を挿入」を順に選択](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet1.png)
①「挿入」、②「画像」、③「セル上に画像を挿入」を順に選択します。
「セル上に画像を挿入」を選択しないと、セルの位置に関係なく画像をシート上の好きな位置へ表示することはできません。
以下のショートカットキーでも「セル上に画像を挿入」を選択できます。
OS | ショートカットキー |
---|---|
Windows | Alt+I,G,A (Google Chrome) Alt+Shift+I,G,A (その他ブラウザ) |
Mac | Option+I,G,A (Google Chrome) Option+Shift+I,G,A (その他ブラウザ) |
![「参照」ボタンをクリック](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet2.png)
「参照」ボタンをクリックします。
![画像をダブルクリック](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet3.png)
表示したい画像をダブルクリックします。
![「Apps Script」を順に選択](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet4.png)
画像が挿入されました。
①「拡張機能」、②「Apps Script」を順に選択します。
![「新しいプロジェクト」ボタンをクリック](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet5.png)
「新しいプロジェクト」ボタンをクリックします。
![名前を変更をクリック](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet6.png)
「名前を変更」をクリックします。
![プロジェクトタイトルを変更します](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet7.png)
①「プロジェクトタイトル(例:リンクを新しいタブで開く)」を入力し、②「名前を変更」ボタンをクリックします。
![スクリプトをコピーして貼り付けます](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet26.png)
下記のスクリプトをコピーして貼り付けます。
新しいタブで指定したURLにアクセスするスクリプトです。
「var url = ""」の「""」の間にリンクに設定したいURLを入力します。
function openUrl() {
var url = "https://www.google.co.jp"; // 開きたいURLを指定します
var html = HtmlService.createHtmlOutput('<html><script>'
+'window.open("'+url+'", "_blank");'
+'google.script.host.close();'
+'</script>'
+'<body>Failed to open automatically. <a href="'+url+'" target="_blank">Click here to proceed</a>.</body>'
+'</html>')
.setWidth(90).setHeight(1);
SpreadsheetApp.getUi().showModalDialog(html, "Opening ...");
}
![「プロジェクトを保存」ボタンをクリック](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet27.png)
「プロジェクトを保存」ボタンをクリックします。
![function名をコピーする](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet28.png)
1行目の関数名(例:openUrl)を選択し、コピーするためにCtrl+Cキーを押します。
![3点マークをクリック](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet11.png)
現在のシートに戻り、挿入した画像を選択して右上の3点マークをクリックします。
![「スクリプトを割り当て」を選択](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet12.png)
「スクリプトを割り当て」を選択します。
![function名を貼り付けて確定する](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet13.png)
① Ctrl+Vキーを押して関数名をペーストし②「確定」ボタンをクリックします。
これで図形にスクリプトが割り当てられました。
![挿入した画像をクリック](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet14.png)
挿入した画像をクリックします。
![リンクにアクセスできる](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet15.png)
新しいタブが開かれ、リンクにアクセスすることが出来ました。
関数を利用して画像リンクを設定する
関数を利用して画像リンクを設定する場合、画像を表示したいセルに、HYPERLINK関数とIMAGE関数を組み合わせた数式を入力します。
HYPERLINK関数とは現在のシートから数式に入力したURLへジャンプする関数で、IMAGE関数は代替テキストと共にソースの場所からセルに画像を挿入する関数です。
![画像を表示したいセルを選択](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet18.png)
表示する画像サイズにセルの大きさを変更しておきます。
画像を表示したいセルを選択します。
![「=HYPERLINK( 」と入力](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet19.png)
「=HYPERLINK( 」と入力します。
![「"リンク先URL(例:www.google.co.jp)"」と入力](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet20.png)
続けて「"リンク先URL(例:www.google.co.jp)",」と入力します。
リンク先はGoogleのホームとしています。
![「IMAGE(」と入力](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet21.png)
続けて「IMAGE(」と入力します。
![「"画像URL",」と入力](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet29.png)
続けて「"画像URL",」と入力します。
表示したい画像をサーバーにアップしておきます。
![「3))」と入力してEnterを押す](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet30-1.png)
続けて「3))」と入力してEnterキーを押します。
この引数で入力する数字は以下の通りです。
モードの数字 | 内容 |
---|---|
1 | アスペクト比を維持しながらセル内に収まるように画像のサイズを変更(デフォルト) |
2 | アスペクト比を無視してセル内に収まるように画像を引き伸ばすか縮める |
3 | 画像を元のサイズのままにする(画像がトリミングされることがある) |
4 | カスタムサイズに変更 |
画像に合わせてセルのサイズを変更するモードはありません。
![表示されたリンクをクリック](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet32.png)
セル内に画像が表示されました。
セルを選択して、表示されたリンクをクリックします。
![リンクにアクセスすることが出来る](https://g-tips.jp/wp-content/uploads/how-to-set-image-links-in-spreadsheet25.png)
新しいタブが開かれ、リンクにアクセスすることが出来ました。