HTMLコードおよびJavaScriptコードを追加する

Google サイトでは HTML コードや JavaScript のコードを Google サイトのページに埋め込むことができます。 HTML コードを追加する場合は同時に CSS も記述することができます。ここでは Google サイトでページに HTML コードおよび JavaScript コードを追加する方法について解説します。

(2022 年 05 月 01 日公開 / 2022 年 05 月 01 日更新)

コードを埋め込む画面を表示する

ページの本文に HTML コードまたは JavaScript コードを埋め込むための画面を表示する方法です。ページの編集画面を表示してください。

コードを埋め込む画面を表示する(1)

画面右側にある「挿入」タブをクリックしてください。そのあとで「挿入」タブ画面の中にある「埋め込む」をクリックしてください。

コードを埋め込む画面を表示する(2)

「ウェブからの埋め込み」ダイアログが表示されるので「埋め込みコード」タブをクリックしてください。

コードを埋め込む画面を表示する(3)

コードを埋め込む画面が表示されます。

コードを埋め込む画面を表示する(4)

HTML コードの場合も JavaScript コードの場合も、この画面でコードを入力したあとページに追加します。

HTMLのコードを埋め込む

それでは HTML のコードを埋め込んでみます。埋め込み画面を表示したあと次のような HTML コードを入力しました。

<p>
y=x<sup>2</sup>
</p>

HTMLのコードを埋め込む(1)

入力が終わりましたら「次へ」をクリックしてください。

HTMLのコードを埋め込む(2)

プレビューが表示されます。意図したとおりに表示されていたら「挿入」をクリックしてください。

HTMLのコードを埋め込む(3)

HTML のコードが埋め込まれました。今回は Google サイトの標準の書式では用意されていない sup タグを使った HTML コードを記述しました。

HTMLのコードを埋め込む(4)

変更内容を反映したあとで公開されたサイトへアクセスしてみると、次のように表示されました。

HTMLのコードを埋め込む(5)

HTML+CSSのコードを埋め込む

HTML のコードを埋め込む場合はあわせて CSS のコードを記述することもできます。その場合は style 属性を使って記述してください。埋め込み画面を表示したあと次のような HTML+CSS のコードを入力しました。入力が終わりましたら「次へ」をクリックしてください。

<div style="padding:10px;border:2px solid #0000ff">
<span style="font-size:20px;">目次:</span>
<ul>
<li>はじめに</li>
<li>今日のスケジュール</li>
</ul>
</div>

HTML+CSSのコードを埋め込む(1)

プレビューが表示されます。意図したとおりに表示されていたら「挿入」をクリックしてください。

HTML+CSSのコードを埋め込む(2)

HTML+CSS のコードが埋め込まれました。 style 属性を使って div 要素や span 要素にスタイルを設定しました。

HTML+CSSのコードを埋め込む(3)

変更内容を反映したあとで公開されたサイトへアクセスしてみると、次のように表示されました。

HTML+CSSのコードを埋め込む(4)

JavaScriptのコードを埋め込む

次に JavaScript のコードを埋め込んでみます。埋め込み画面を表示したあと次のような JavaScript のコードと HTML のコードを入力しました。入力が終わりましたら「次へ」をクリックしてください。

<button onClick="setTextToElement();">Push Button</button>
<div id="hello"></div>

<script>
function setTextToElement(){
  let element = document.getElementById('hello');
  element.innerText = 'Hello Google Sites';
}
</script>

JavaScriptのコードを埋め込む(1)

プレビューが表示されます。意図したとおりに表示されていたら「挿入」をクリックしてください。

JavaScriptのコードを埋め込む(2)

JavaScript と HTML のコードが埋め込まれました。 JavaScript の動作確認は編集画面では行えません。

JavaScriptのコードを埋め込む(3)

変更内容を反映したあとで公開されたサイトへアクセスしてみると、次のように表示されました。

JavaScriptのコードを埋め込む(4)

表示されたボタンをクリックすると、 JavaScript のコードが実行されて画面上にメッセージが表示されました。

JavaScriptのコードを埋め込む(5)

なおすべての JavaScript コードが実行可能なわけではないようです。例えば alert などは実行できませでした。

TwitterやYouTubeの埋め込みコードを追加する

YouTube や Twitter などは動画やツイートを Web サイトに埋め込むためのコードを取得することができます。 Google サイトでも HTML や JavaScript のコードを追加することができるのでこういった埋め込み用コードを利用することができます。

ここでは例として YouTube 、 Twitter 、 Google マップの埋め込み用コードを取得して実際に追加してみます。

YouTubeの動画を埋め込む

例えば YouTube で次の動画を埋め込んでみます。

TwitterやYouTubeの埋め込みコードを追加する(1)

動画の右下にある「共有」をクリックしてください。

TwitterやYouTubeの埋め込みコードを追加する(2)

共有方法として「埋め込む」をクリックしてください。

TwitterやYouTubeの埋め込みコードを追加する(3)

YouTube の動画の埋め込み用コードが表示されました。

TwitterやYouTubeの埋め込みコードを追加する(4)

コードをコピーしたあと、 Google サイトの編集画面の埋め込み画面でコピーしたコードを貼りつけてください。

TwitterやYouTubeの埋め込みコードを追加する(5)

TwitterやYouTubeの埋め込みコードを追加する(6)

変更内容を反映したあとで公開されたサイトへアクセスしてみると、次のように YouTue の動画が埋め込まれているのが確認できました。

TwitterやYouTubeの埋め込みコードを追加する(7)

※ Google サイトでは YouTube の動画を埋め込む別の方法も用意されています。詳しくは「YouTubeの動画を追加する」を参照されてください。

Twitterのツイートを埋め込む

例えば Twitter に投稿された次のツイートを埋め込んでみます。

TwitterやYouTubeの埋め込みコードを追加する(8)

ツイートの右上にある次のアイコンをクリックしてください。

TwitterやYouTubeの埋め込みコードを追加する(9)

「ツイートを埋め込む」をクリックしてください。

TwitterやYouTubeの埋め込みコードを追加する(10)

開いた画面の「Copy Code」をクリックしてください。ツイート埋め込み用のコードがコピーされました。

TwitterやYouTubeの埋め込みコードを追加する(11)

Google サイトの編集画面の埋め込み画面でコピーしたコードを貼りつけてください。

TwitterやYouTubeの埋め込みコードを追加する(12)

TwitterやYouTubeの埋め込みコードを追加する(13)

変更内容を反映したあとで公開されたサイトへアクセスしてみると、次のように Twitter のツイートが埋め込まれているのが確認できました。

TwitterやYouTubeの埋め込みコードを追加する(14)

Googleマップの地図を埋め込む

例えば Google マップで表示された次の地図を埋め込んでみます。

TwitterやYouTubeの埋め込みコードを追加する(15)

左上のメニューアイコンをクリックしてください。

TwitterやYouTubeの埋め込みコードを追加する(16)

「地図を共有または埋め込む」をクリックしてください。

TwitterやYouTubeの埋め込みコードを追加する(17)

「共有」ダイアログが表示されたら「地図を埋め込む」タブをクリックしてください。そのあとで「HTMLをコピー」をクリックしてください。地図を埋め込むためのコードがコピーされます。

TwitterやYouTubeの埋め込みコードを追加する(18)

Google サイトの編集画面の埋め込み画面でコピーしたコードを貼りつけてください。

TwitterやYouTubeの埋め込みコードを追加する(19)

TwitterやYouTubeの埋め込みコードを追加する(20)

変更内容を反映したあとで公開されたサイトへアクセスしてみると、次のように Google マップの地図が埋め込まれているのが確認できました。(編集画面で追加した地図のサイズを大きくしてあります)。

TwitterやYouTubeの埋め込みコードを追加する(21)

※ Google サイトでは Google マップの地図を埋め込む別の方法も用意されています。詳しくは「Googleマップの地図を追加する」を参照されてください。

埋め込んだコードを編集する

一度埋め込んだコードをあとから編集する場合は、埋め込んだコードをクリックしてください。

埋め込んだコードを編集する(1)

埋め込みの上に表示された鉛筆アイコンをクリックして下さい。

埋め込んだコードを編集する(2)

コードの入力画面が表示されます。現在入力されているコードの内容が表示されるので編集を行ってください。

埋め込んだコードを編集する(3)

編集が終わりましたら「次へ」をクリックしてください。

埋め込んだコードを編集する(4)

プレビューが表示されるので問題なければ「保存」をクリックしてください。

埋め込んだコードを編集する(5)

コードの編集内容が反映されました。

埋め込んだコードを編集する(6)

埋め込みのサイズを変更する

埋め込みはサイズを変更することができます。サイズを変更するには埋め込みをクリックしてください。

埋め込みのサイズを変更する(1)

埋め込みの左右や下に 5 つの ● が表示されます。この ● をドラッグすることでサイズを変更することができます。

埋め込みのサイズを変更する(2)

埋め込みのサイズを変更する(3)

なお Google サイトはすべてのコンテンツの横幅がグリッド上にぴったりおさまるように調整されます。埋め込みについても同様で、追加した埋め込みのサイズはグリッド上におさまるサイズに調整されます。(詳しくは「セクション内のコンテンツのサイズ変更と位置の移動」を参照されてください)。

埋め込みを削除する

追加した埋め込みを削除するには、埋め込みをクリックしてください。

埋め込みを削除する(1)

埋め込みの上に表示されているゴミ箱アイコンをクリックしてください。

埋め込みを削除する(2)

埋め込みが削除されました。

埋め込みを削除する(3)

なお埋め込みが追加されているセクションを削除することでも埋め込みを削除できます。

-- --

Google サイトでページに HTML コードおよび JavaScript コードを追加する方法について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

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