Googleサイト使い方 / パスワード認証 / 掲示板 / アンカーリンク / サイト登録 / ログインフォーム / アナリティクス / SEO / 活用法

ボタンアクション

ボタンアクション（プルダウンメニュー）

ボタンを押すと文章が表示され、再び押すと閉じるというものです。

Googleサイトで言うところの折りたたみ可能なグループと同等ですが、それをボタンで実現したものです。文字の大きさや色、行間、箇条書きスタイルの指定、プルダウン速度の指定、リンクを貼ることなど、自由に設定できます。使い方によってはおもしろいかと思います。

NO.2はボタンを画像に置き換えたものですが、Googleサイトでは普通に画像あるいは下記のように折りたたみ可能なグループからリンクを設定できますのであまり意味はないかもしれません。しかしサイト内の別ページにリンクする場合、コードによるものは別タブで、Googleの標準機能では同一タブで開きますので、使い分けても良いのかもしれません。

Googleサイト標準の「折りたたみ可能なグループ」を使った画像による展開（プルダウン）およびリンク

やり方の説明は、v をクリックして展開してください。

説明です　↓

挿入 → 「折りたたみ可能なグループ」をクリック → 画像を挿入（もしくは画像をドラッグアンドドロップ） → その画像を「折りたたみ可能なグループ」の（太字の）クリックしてテキストを編集の上枠線にドラッグ＆ドロップ（中ではありません） → これで完了です

さらに画像にリンクを設定することも出来ます。（サイト内ページリンクは同タブで開きます）

つまり画像クリックでのリンクと v クリックでの展開（プルダウン）の両方ができるわけです。

上の画像ではTOPページへのリンクを設定しています。

以下のコードは下にあります

NO.1

NO.2

画像クリックでメニュー開閉

NO.3

NO.4

NO.5

NO.6（昼夜ページ切替ボタン）

NO.7（Googleアプリ風メニュー）

リンクは「ホーム」のみ

以下のコードを「埋め込む＜＞」➡「埋め込みコード」に貼り付け、挿入すればOKです。

他のサイトにリンクさせる場合はピンクの部分にリンク先のURLを貼り付けます。

Googleドライブのフォルダにアクセスする場合は、Googleドライブ内のフォルダを「右クリック➡共有➡リンクをコピー」で取得したURLをピンクの部分に（右クリック）で貼り付けてください。

紫の部分にはGoogleフォトで取得した画像のURLを貼り付けます。

文章のみを表示させたい場合には、<li><a href〜</a></li>の部分を削除し、赤の部分に文章を打ち込みます。

<li>〜</li>内の文章を改行する際は<br>をいれます。

なお、<li>〜</li>は何行あっても構いません。

青の箇所はお好きな名前に、オレンジの箇所でボタン幅の調整や文字色、その他の変更をしてください。

NO.1コード

<button>プルダウン　▽</button>

</div>

<ul>

<li class="text">是非ごらんください</li>

<li><a href="https://sites.google.com/view/mininota/" >サイト mininota</a></li>

<li>ここに文章を打ち込んでください。</li>

<li class="text2">ここに文章を打ち込んでください。</li>

</ul>

</div>

<style>

.btn-box button {

width: 280px;

height: 50px;

padding: 8px;

font-size: 20px;

color: white;

background-color:royalblue;

border: none;

border-radius: 3px;

user-select: none;

cursor: pointer;

}

.btn-box button:hover {

opacity: 0.7; /*　マウスオーバーした時のボタン色のぼかし具合　*/

}

.list {

visibility: hidden;

opacity: 0;

transition: all 2.0s; /*　プルダウンの速度　*/

}

.list ul {

font-size: 16px; /*　<li>〜</li>の文字サイズ　*/

margin: 18px 0px; /*　ボタンと文章の距離上、　左スペース　*/

line-height: 30px; /*　行間　*/

padding: 0;

list-style: none;　/*　inside で箇条書きスタイルに　*/

}

.list.appear {

visibility: visible;

opacity: 1;

}

a {

color: blue;　/*　リンクの文字色　*/

}

.text {

color: red; /*　<li class="text">〜</li>内の文字色　*/

font-size: 12px; /*　文字サイズ　*/

line-height: 25px; /*　行間　*/

list-style: none;

}

.text2 {

color: orange; /*　<li class="text2">〜</li>内の文字色　*/

font-size: 16px; /*　文字サイズ　*/

line-height: 30px; /*　行間　*/

list-style: inside;

}

</style>

const btn = document.querySelector('.btn-box button');

btn.addEventListener('click', () => {

const list = document.querySelector('.list');

list.classList.toggle('appear');

if (btn.textContent == "プルダウン　▽") {

btn.textContent = "△";

} else {

btn.textContent = "プルダウン　▽";

}

});

</script>

<li class="text">〜</li>と<li class="text2">〜</li>は、必要なければ削除してください

NO.2コード

</div>

<ul>

<li class="text2">下記アイコンクリックでリンクします</li>

<li class="text">Googleサイト活用法</li>

</ul>

</div>

<style>

div {

cursor : pointer;

}

.list {

visibility: hidden;

opacity: 0;

transition: all 2.0s; /*　プルダウンの速度　*/

}

.list ul {

font-size: 16px; /*　<li>〜</li>の文字サイズ　*/

margin: 18px 0px; /*　ボタンと文章の距離上、　左スペース　*/

line-height: 30px; /*　行間　*/

padding: 0px;

list-style: none;　/*　inside で箇条書きスタイルに　*/

}

.list.appear {

visibility: visible;

opacity: 1;

}

a {

color: blue;　/*　リンクの文字色　*/

}

.text {

color: red; /*　<li class="text">〜</li>内の文字色　*/

font-size: 12px; /*　文字サイズ　*/

line-height: 25px; /*　行間　*/

list-style: none;

}

.text2 {

color: black; /*　<li class="text2">〜</li>内の文字色　*/

font-size: 16px; /*　文字サイズ　*/

line-height: 30px; /*　行間　*/

list-style: none;

}

</style>

const btn = document.querySelector('.btn-box img');

btn.addEventListener('click', () => {

const list = document.querySelector('.list');

list.classList.toggle('appear');

});

</script>

画像はGoogleフォトにアップロードしたものを使用しています

NO.3コード

<button>わたしの好きな詩</button>

</div>

風景

純銀もざいく

　　　　　　　山村暮鳥

いちめんのなのはな

かすかなるむぎぶえ

いちめんのなのはな

ひばりのおしやべり

いちめんのなのはな

やめるはひるのつき

いちめんのなのはな

</textarea>

<style>

.btn-box button {

width: 97vw;

height: 25vh;

padding: 8px;

font-size: 5vw;

color: white;

background-color: #3686c3;

border: none;

border-radius: 0px;

user-select: none;

cursor: pointer;

}

.btn-box button:hover {

opacity: 0.7; /*　マウスオーバーした時のボタン色のぼかし具合　*/

}

.list {

visibility: hidden;

opacity: 0;

transition: all 2.5s; /*　プルダウンの速度　*/

}

.list.appear {

visibility: visible;

opacity: 1;

}

.list {

color: #ffec47; /*　文字色　*/

font-size: 2.0vw; /*　文字サイズ　*/

line-height: 2.75vw; /*　行間　*/

list-style: none;

background-color: #075801;

padding-right: 3%;

padding-left: 0%;

padding-top: 14%;

padding-bottom: 0%;

writing-mode: vertical-rl; /*　vertical-lr（縦書き左から右） horizontal-tb（横書き） sideways-rl sideways-lr　*/

width: 97vw;

height: 49.4vh;

}

</style>

const btn = document.querySelector('.btn-box button');

btn.addEventListener('click', () => {

const list = document.querySelector('.list');

list.classList.toggle('appear');

if (btn.textContent == "わたしの好きな詩") {

btn.textContent = "青空のもと一面の菜の花（閉じる）";

} else {

btn.textContent = "わたしの好きな詩";

}

});

</script>

手動でコピーしてください

NO.4コード

<button>青空のもといちめんのなのはな</button>

</div>

</div>

<style>

img {

width: 100%;

height: auto;

}

.btn-box button {

width: 100%;

height: 25vh;

padding: 8px;

font-size: 5vw;

color: white;

background-color: #1690db;

border: none;

border-radius: 0px;

user-select: none;

cursor: pointer;

}

.btn-box button:hover {

opacity: 0.7; /*　マウスオーバーした時のボタン色のぼかし具合　*/

}

.list {

visibility: hidden;

opacity: 0;

transition: all 2.0s; /*　プルダウンの速度　*/

}

.list.appear {

visibility: visible;

opacity: 1;

}

</style>

const btn = document.querySelector('.btn-box button');

btn.addEventListener('click', () => {

const list = document.querySelector('.list');

list.classList.toggle('appear');

if (btn.textContent == "閉じる") {

btn.textContent = "青空のもといちめんのなのはな";

} else {

btn.textContent = "閉じる";

}

});

</script>

NO.5コード

<button>複数画像（タイトル入り）▽</button>

</div>

<table>

<td>duckling</td>

<td>puppy and kitten</td>

<td>puppy</td>

</tr>

<tr>

</tr>

<td>piglet</td>

<td>hedgehog</td>

<td>kitten</td>

<td>rabbits</td>

</tr>

<tr>

</tr>

</table>

</div>

<style>

table {

border-spacing: 10px 10px; /*　テーブルの上下・左右間隔　*/

}

img {

width: 100%;

height: auto;

}

.btn-box button {

width: 240px;

height: 40px;

padding: 0px;

font-size: 16px;

color: white;

background-color: #C12872;

border: none;

border-radius: 3px;

user-select: none;

cursor: pointer;

margin-bottom: 10px;

}

.btn-box button:hover {

opacity: 0.7; /*　マウスオーバーした時のボタン色のぼかし具合　*/

}

.list {

visibility: hidden;

opacity: 0;

transition: all 2.0s; /*　プルダウンの速度　*/

}

.list.appear {

visibility: visible;

opacity: 1;

}

.text {

font-size: 1.8vw;

line-height: 10px;

color: blue;

}

</style>

const btn = document.querySelector('.btn-box button');

btn.addEventListener('click', () => {

const list = document.querySelector('.list');

list.classList.toggle('appear');

if (btn.textContent == "閉じる") {

btn.textContent = "複数画像（タイトル入り）▽";

} else {

btn.textContent = "閉じる";

}

});

</script>

NO.6コード（時間帯「昼・夜」によりリンク先のページを自動で切り替えるボタン）

<button id="timeButton"

style="

background-color:#5f6368; /* ボタンの色 */

color:white;

border:none;

border-radius:6px;

padding:12px 28px;

font-size:16px;

font-weight:500;

cursor:pointer;

transition: background-color 0.3s ease;">

</button>

</div>

const button = document.getElementById("timeButton");

const hour = new Date().getHours();

// ボタンラベルを時間帯で切り替え

if (hour >= 19 || hour < 6) {

button.textContent = "🌙 夜間ページを開く";

} else {

button.textContent = "☀️ 昼間ページを開く";

}

// クリック時に時間帯に応じたページへ遷移（新しいタブ）

button.addEventListener("click", function() {

let url;

if (hour >= 19 || hour < 6) {

url = "夜間ページのURL"; // 夜間ページ

} else {

url = "昼間ページのURL"; // 昼間ページ

}

window.open(url, "_blank");

});

// ホバー効果

button.addEventListener("mouseover", () => button.style.backgroundColor = "#3c4043");

button.addEventListener("mouseout", () => button.style.backgroundColor = "#5f6368");

</script>

NO.7コード（Googleアプリ風メニュー）

</div>

<style>

.menu-container {

position: relative;

display: flex;

justify-content: flex-end; /* 画像を右寄せ */

}

.menu-btn {

width: 150px;

cursor: pointer;

z-index: 10;

}

.menu-overlay {

position: absolute;

top: 110%; /* ボタンとリンクメニューの間隔 */

right: 0;

width: 80vw; /* 必要に応じて変更 */

background: rgba(30, 30, 30, 0.95);

border-radius: 8px;

display: none;

padding: 10px;

z-index: 9999;

box-shadow: 0 4px 20px rgba(0,0,0,0.3);

animation: fadeIn 0.3s ease;

}

.menu-grid {

display: grid;

grid-template-columns: repeat(3, 1fr); /* 列数 */

gap: 8px;

margin-top: 0; /* 上スペースなし */

}

.menu-grid a {

color: white;

background: #333;

text-align: center;

padding: 10px;

border-radius: 6px;

text-decoration: none;

transition: background 0.2s;

}

.menu-grid a:hover {

background: #666;

}

@keyframes fadeIn {

from { opacity: 0; transform: translateY(-5px); }

to { opacity: 1; transform: translateY(0); }

}

/* スマホ用調整 */

@media screen and (max-width: 600px) {

.menu-overlay {

width: 92vw; /* 画面幅の92%に広げる */

max-width: 100vw; /* 最大でも画面幅いっぱい */

right: 0; /* 右端をボタン右端に揃える */

padding: 5px;

box-sizing: border-box;

}

.menu-grid {

grid-template-columns: repeat(3, 1fr); /* スマホ列数 */

gap: 4px; /* 列間 */

}

.menu-grid a {

font-size: 10px;

padding: 6px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

</style>

const btn = document.querySelector('.menu-btn');

const menu = document.getElementById('menu');

btn.addEventListener('click', () => {

menu.style.display = (menu.style.display === 'block') ? 'none' : 'block';

});

// ページの他の場所をクリックしたら閉じる

document.addEventListener('click', (e) => {

if (!e.target.closest('.menu-container')) {

menu.style.display = 'none';

}

});

</script>

ページ先頭へ

ボタンアクション

ボタンアクション （プルダウンメニュー）

説明です ↓

ボタンアクション（プルダウンメニュー）

説明です　↓