画像をクリックしたときにフルサイズの画像を表示する方法

Google サイトで画像を追加した場合、デフォルトではリンクが何も設定されていませんが、あとから任意の URL へリンクを設定することができます。そこで Google フォトを利用することで、画像をクリックしたときにフルサイズの画像を表示するようにリンクを設定することができます。ここでは Google サイトで画像をクリックしたときにフルサイズの画像を表示する方法について解説します。

※ Google サイトで画像を追加する基本的な操作方法については「画像を追加する」を参照されてください。

(Last modified: 2023年07月10日)

Googleフォトに画像をアップロードする

Google サイトではページに画像を追加する場合、ローカルにある画像ファイルをアップロードする以外に Google ドライブや Google Photos にあらかじめ画像をアップロードしておき、その中から選択して追加することができます。

追加された画像をオリジナルのフルサイズで表示する場合、その元になる画像がインターネット上で公開されておりアクセスできなければなりませんが、 Google サイト自体にはオリジナルの画像を公開する機能はないので、ローカルから画像ファイルをアップロードした場合はオリジナルの画像を表示する方法がありません。そこで今回はあらかじめ Google フォトに画像をアップロードしておき、 Google サイトのページに画像を追加しつつ、画像をクリックしたら Google フォトにアップロードしてあるオリジナル画像を表示するように設定してみます。

それではまず Google フォトに画像をアップロードします。 Google サイトで利用している Google アカウントにログインした状態で下記の URL へアクセスしてください。

・https://photos.google.com/

Googe フォトに画像をアップロードします。画面右上の「アップロードを」をクリックしてください。

アップロード元として「パソコン」をクリックします。

ファイル選択ダイアログが表示されるので、アップロードする画像を選択してください。選択したファイルが Google フォトにアップロードされます。

これで Google フォトの準備は完了です。

サイトにGoogleフォトから画像を追加する

次に Google サイトのページに画像を追加します。ページの編集画面を表示してください。

画面右側の「挿入」タブを開き、「画像」をクリックしてください。

今回は Google フォトから画像を追加するので「選択」をクリックしてください。

「画像の選択」ダイアログが表示されます。「写真」タブをクリックしてください。

Google フォトにアップロードされている画像の一覧が表示されます。今回追加する画像をクリックして選択したあと、画面右下の「挿入」をクリックしてください。

ページに Google フォトにアップロード済みの画像を追加することができました。

画像にフルサイズの画像へのリンクを設定する

ページに追加した画像をクリックしたときにフルサイズの画像が表示されるようにリンクを設定します。ページの編集画面で、リンクを設定する画像をクリックしてください。

画像の上に表示されたツールバーの中の「リンクを挿入」アイコンをクリックしてください。

リンク先を入力する画面が表示されます。

Google フォトの画面でリンク先を確認します。 Google フォトの画面を表示し、今回の対象の画像をクリックしてください。

画像が表示されたら、画像の上で右クリックし、表示されたメニューの中から「画像アドレスをコピー」をクリックしてください。(画像を表示しているページの URL をコピーしても使えませんのでご注意ください)。

Google サイトのページに戻り、リンク先を入力する箇所に先ほどコピーした URL をそのまま貼りつけてください。貼りつけが終わったら「適用」をクリックしてください。

画像へのリンクの設定が完了しました。

それでは確認してみます。画面右上の「公開」をクリックして、ページに対する変更内容を反映させてください。そのあとで Google アカウントにログインしていない状態で先ほど作成したサイトへアクセスしてみます。

ページに表示されている画像をクリックしてください。画像のオリジナルであるフルサイズの画像が新しいタブで表示されました。

-- --

Google サイトで画像をクリックしたときにフルサイズの画像を表示する方法について解説しました。