◎活用方法：バナーの設置

フリースペースを使って、シティヘブンやバニラなどの媒体のバナーを設置する際に利用できます。各媒体で発行される、バナーの貼り付けタグをそのまま入力してください。

一番よく見る、年齢認証の「ENTER」の下にバナーを並べている事例

バナーの表示サイトがおかしい場合はタグの中のサイズ指定が適してない可能性があります。サイズ指定の方法などが分からない方は、ChatGPTなどのAIツールを使ってタグを修正すると便利です。

▼ChatGPTでそのまま使えるプロンプト例（★★の部分書き換えてご利用ください）

あなたはHTMLに詳しいWebエンジニアです。

他サイトが提供しているバナー掲載用のHTMLタグを、自分のサイトに貼り付けたところ表示がおかしくなりました。
私のサイトはレスポンシブデザインです。

下記のタグを、レスポンシブサイトでも正しく表示できるように修正してください。

【発生している症状】
★★ここに症状を書きます★★
（例：スマホで横にはみ出す / 画像が大きく表示される / 中央寄せにならない など）

【重要な条件】
・CSSファイルやstyleタグは使用しない  
・HTMLタグのみで調整する  
・必要な場合のみインラインstyleは最小限で使用する  
・スマホでもPCでもレイアウトが崩れない  
・画面幅を超えてはみ出さない  
・画像は元のサイズより拡大されない  
・スマホでは画面幅に収まるように縮小される  
・初心者でもそのままコピペできるコードにする  

【元のタグ】
★★ここにタグを貼ります★★

【出力してほしい内容】
① 修正後のHTMLタグ（そのままコピペできる形）  
② 修正内容の簡単な説明

<aside> 💡

すぐるくんの管理画面「画像アップローダー」にバナー画像をアップロードして、そのバナーをフリースペースを使って貼り付けることも可能です。

</aside>

◎活用方法：テキストの設置

SEO対策の為に、「フリースペース」を使って年齢認証ページやTOPページにお店の紹介文なのどのテキストを貼ることが出来ます。

▲こんな感じでタグを使ってテキストを設置することが出来ます

すぐるくんデモサイトの年齢認証ページで使っているタグ

すぐるくんのデモサイト（ https://demo.sugurukun.net/ ）で使っているタグです。そのままコピーして★の部分を書き換えて、フリースペース「認証ページロゴ下」に貼り付けてください。

<!-- 認証テキスト -->
<div style="max-width: 700px;margin: 20px auto 0;text-align:left;font-size: 12px;padding: 30px; background-color: rgba(255, 255, 255, 0.4);">

	<h3 style="text-align:center; font-size:16px; font-weight:bold; margin: 20px auto 5px;">★見出し★</h3>

	<p style="margin: 0 0 12px;">★ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力★</p>

	<h3 style="text-align:center; font-size:16px; font-weight:bold; margin: 20px auto 5px;">★見出し★</h3>

	<p style="margin: 0 0 12px;">★ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力★</p>

	<h3 style="text-align:center; font-size:16px; font-weight:bold; margin: 20px auto 5px;">★見出し★</h3>

	<p style="margin: 0 0 12px;">★ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力★</p>

	<h3 style="text-align:center; font-size:16px; font-weight:bold; margin: 20px auto 5px;">★見出し★</h3>

	<p style="margin: 0 0 12px;">★ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力ここに本文を入力★</p>

</div>

◎媒体が発行するウィジェットの埋め込み

シティヘブンの写メ日記ウィジェットや、バニラの店長ブログウィジェットなど、媒体が用意しているウィジェットも「フリースペース」を使ってサイトに埋め込みことが出来ます。

「TOPページ右カラム」にバニラの店長ブログを埋め込んだ例