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

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

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

(2022 年 04 月 28 日公開 / 2022 年 04 月 28 日更新)

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

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

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

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

https://photos.google.com/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

画像のサイズを変更する(2)

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

画像のサイズを変更する(3)

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

画像のサイズを変更する(4)

-- --

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

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

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