Embedded Files
▼ コード１の作例
ボタンの色やサイズ、文字色は全ボタン共通となります
▼ コード２の作例
ボタンの色やサイズ、形の変更をデザインに関係なくやってみました
◆ 画像の上に（複数の）ボタンを配置してリンクを貼る方法
以下のコード１（ボタンは全ボタン共通のアレンジ）
またはコード２（ボタンの色やサイズ、文字色、形などをボタンごとにアレンジ）
をコピーし、手直し後「埋め込む＜＞」の「埋め込みコード」に貼り付け、挿入すればOKです。
コードには、分かりやすいようリンク先のURLがすでに書いてあります。
コードをコピーし、メモ帳などに貼り付けて修正してください。
https://〜〜〜には画像のURL（アドレス）をペースト
https://〜〜〜にはリンク先のURL（ボタンを押した時のジャンプ先のアドレス）をペーストします。
Googleフォトでの操作
背景画像アドレスの取得とコードへの書き込みの手順
Googleフォトをクリック
アルバム（左）からアルバムの作成（右上）をクリック
タイトルを決め、写真を選択から写真をアップロード
その他のオプション（右上）をクリック
オプションを選択
リンクの共有をON
リンクの共有以外のものをOFF
あとは、
画像をクリックし表示 ➡ 画像を右クリックし、「画像のアドレスをコピー」➡ そのアドレスをコードのhttps://〜〜〜の部分にペースト ➡ ボタンの色や大きさの変更 ➡ https://〜〜〜にリンク先のURLを貼り付ける ➡ 「埋め込む＜＞」の「埋め込みコード」に貼り付け、挿入 ➡ 公開
※ 画像のアドレスをコピーする際は、サムネイルではなく必ずアルバムの画像を開いて行ってください
ボタンのリンク先は別タブで開きます。同一タブで開くようコードを書き換えると接続が拒否されてしまいます。解決策がありましたら、更新します。
コード１
ボタンの色、サイズ、文字色をボタンごと個別に指定しない場合のコードです。
<style>
.arg{
display: flex;
flex-wrap: wrap; /* 折り返しの指定 */
justify-content: center; /* ボタン配置の調整です。他にも space-between・ space-around・ flex-end ・flex-start など試してみてください */
align-items: center; /* ボタン配置の調整です。他にも baseline ・ flex-start ・ flex-end ・stretch など試してみてください */
flex-direction: none; /* ボタン配置の調整です。他にも column ・ column-reverse ・row ・ row-reverse など試してみてください */
background: url(https://〜〜〜)no-repeat center center / cover; /* containにするとスマホでも背景画像が全体的に表示されますが、ボタンのサイズや間隔の調整が必要になります */
width: 100%; /* 通常は100%でOKです */
height: 360px; /* 画像の高さ指定 */
}
/* 以下ボタンのデザイン */
a{
display: block;
margin: 10px; /* 画像とボタンの間隔 */
width: 120px; /* ボタンの横幅 */
box-sizing: border-box;
opacity: 0.7; /* 透明度（透け具合） */
background: green; /* ボタンの背景色(blackあるいは#000000などと指定、transparentにすると透明になります */
border: 1px solid lime; /* ボタンの枠色と太さ */
color: white; /* ボタンの文字色 */
padding: 10px; /* 文字と枠の間隔 */
text-align: center; /* ボタン内での文字の位置 */
font-size: 14px; /* ボタンの文字の大きさ */
font-weight: 500; /* ボタンの文字の太さ */
transition: 0.3s; /* ボタンがホバーする秒数 */
text-decoration: none; /* underlineとすれば、文字の下に下線が引かれます */
}
a:hover{
color: yellow; /* ホバー時の文字色 */
}
</style>
<div href="#" class="arg">
<a href="https://sites.google.com/view/mininota/">Googleサイト<br>活用法</a> <!-- <br>は改行です -->
<a href="https://sites.google.com/view/mininota/login-form">Googleサイト<br>Login-form</a>
<a href="https://sites.google.com/view/mininota/bbs">Googleサイト<br>掲示板</a>
<a href="https://www.yahoo.co.jp/">Yahoo</a>
<a href="https://chiebukuro.yahoo.co.jp/">知恵袋</a>
<a href="https://news.yahoo.co.jp/">ニュース</a>
</div>
ボタンの配置はホームページ作成の中でも厄介なものです。
考えるよりオレンジの部分をいろいろと変え、体験してください。
コード２
ボタンの色、サイズ、文字色などをボタンごとに個別に設定する場合のコードです。
赤字の部分を必要なだけ付け加えてください。
<style>
.arg{
display: flex;
flex-wrap: wrap; /* 折り返しの指定 */
justify-content: center; /* ボタン配置の調整です。他にも space-between・ space-around・ flex-end ・flex-start など試してみてください */
align-items: center; /* ボタン配置の調整です。他にも baseline ・ flex-start ・ flex-end ・stretch など試してみてください */
flex-direction: none; /* ボタン配置の調整です。他にも column ・ column-reverse ・row ・ row-reverse など試してみてください */
background:url(https://〜〜〜)no-repeat center center / cover; /* containにするとスマホでも背景画像が全体的に表示されますが、ボタンのサイズや間隔の調整が必要になります */
width: 100%; /* 通常は100%でOKです */
height: 360px; /* 画像の高さ指定 */
}
/* 以下ボタンのデザイン */
a{
display: block;
margin: 10px; /* 画像とボタンの間隔 */
width: 120px; /* ボタンの横幅 */
box-sizing: border-box;
opacity: 0.7; /* 透明度（透け具合） */
background: transparent; /* ボタンの背景色(blackあるいは#000000などと指定、transparentにすると透明になります */
border: 1px solid white; /* ボタンの枠色と太さ */
color: white; /* ボタンの文字色 */
padding: 10px; /* 文字と枠の間隔 */
text-align: center; /* ボタン内での文字の位置 */
font-size: 14px; /* ボタンの文字の大きさ */
font-weight: 500; /* ボタンの文字の太さ */
transition: 0.3s; /* ボタンがホバーする秒数 */
text-decoration: none; /* underlineとすれば、文字の下に下線が引かれます */
}
/* ボタンの色やサイズを変えたい変更箇所をa.btn~{}で用意します。今回は例として4つのボタン変更です。 */
a.btn1{
height: 80px; /* 黒字の部分は変えたい項目です */
background: green;
border-radius: 5px;
padding: 18px 0;
opacity: 0.6;
}
a.btn2{
width: 600px;
background: hotpink;
color: blue;
font-weight: bold;
opacity: 0.6;
}
a.btn3{
width: 65px;
height: 110px;
padding: 15px 0;
border: 3px solid yellow;
font-weight: 550;
opacity: 0.7;
}
a.btn4{
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid white;
padding: 30px 0;
font-size: 10px;
color: lime;
}
a:hover{
border: 1px solid yellow; /* ホバー時の枠の太さと色 */
color: yellow; /* ホバー時の文字色 */
}
/* ホバー時に変えたいボタンの変更箇所を.a.btn~:hover{}で用意します。今回は例として2つです。指定しない場合は上記a:hover{}が実行されますが必要なければa:hover{}は削除してください。 */
a.btn1:hover{
border: 1px solid cyan; /* 黒字の部分は変えたい項目です */
color: cyan;
}
a.btn2:hover{
border: 1px solid lime;
padding:
color: lime;
}
</style>
<div href="#" class="arg">
<!-- 例えば、下で class="btn1"を指定した場合、上のa.btn1{}とa.btn1:hover{}が適用されます。-->
<!-- 指定しない場合は、a{}とa:hover{}が適用されます。-->
<a href="https://sites.google.com/view/mininota/"class="btn1">Googleサイト<br>活用法</a> <!-- <br>は改行です -->
<a href="https://sites.google.com/view/mininota/login-form">Googleサイト<br>Login-form</a>
<a href="https://sites.google.com/view/mininota/bbs"class="btn2">Googleサイト掲示板</a>
<a href="https://www.yahoo.co.jp/"class="btn3">Yahoo</a>
<a href="https://news.yahoo.co.jp/"class="btn4">ニュース</a>
</div>
Google Sites
Report abuse