BLOG

Google siteにコードを埋め込む〜elfsightとmake.comで外注費ゼロのカスタマイズ術

サイトに機能を足したいとき、外注の費用のことが先に頭に浮かびます。

公開日:2025年4月14日 / 発信の道具

Q. Google siteにコードを埋め込む方法は?

Google siteはHTMLコードとJavaScriptコードをページに埋め込む機能を標準搭載しています。HTMLコードと同時にCSSも記述できます。

埋め込み手順はツールバーの「挿入」→「〈 〉埋め込む」を選択→URLまたはコードを入力するだけです。

→ 参考:https://www.howtonote.jp/google-sites/contents/index23.html#section1

コードが書けない場合は、ChatGPT(または旧Bard)に「Google siteに埋め込める〇〇のHTMLコードを作って」と依頼するだけでコードが生成されます。

→ AI活用の参考事例:https://note.com/rrenzokutai/n/n0c867cfa7ea4

コードを自作しなくていい2大ツール

elfsight(プラグイン型)

elfsightはウィジェット(プラグイン)を提供するサービスで、コードを作成する必要がありません。elfsightサイトでウィジェットを選択して設定するとコードが発行され、そのコードをGoogle siteにコピーして貼り付けるだけで機能が追加されます。

→ Google Sites向けプラグイン一覧:https://elfsight.com/ja/google-sites-plugins/

70種類以上のウィジェットがあり、毎月200回のページビューまで無料で試せます。

make.com(自動化シナリオ型)

make.comはA→B→Cとシステムを自動化する「シナリオ」を作成するツールです。例えば「フォームから申込みが来たら、スプレッドシートに追記してメールを送信する」といった自動化をコードなしで設計できます。

日本語表示はありませんが、「Japan」でサインアップするとEuro圏に振り分けられます。特に問題なく使用できます。

→ https://www.make.com/en

注意:埋め込みを拒否するURLがある

最近、自サービスのコンテンツをiframe埋め込みで表示されることを拒否する企業が増えています。埋め込もうとしたURLが表示されない場合は、その企業が埋め込みを意図的に制限している可能性があります。その場合はボタンリンクで外部へ誘導する方法に切り替えてください。

こうしたい、と思いついた形を、その日のうちに試せるようになります。見積もりを待つあいだに熱が冷める前に、手を動かして確かめる。人に頼まないと動かせない状態から、自分で動かせる状態へ。カスタマイズを覚えるというのは、思いつきを腐らせない体制を持つことです。

※本記事はYAEKOFUコンテンツを元に作成しています。
道具は、決めてしまえば手から離れます。残るのは、自分の名前で何をどこまでやるか——その一本の線です。スラトレ®キャリアラボの90分の面談は、その線をご自身の言葉で引くための時間です。90分のキャリア相談を見る