Embedded Files
Q. クラウド型WEBサイト作成サービスとしてWix・Jimdo・WordPressなどありますが、Google Sitesと比べてどうですか？
A. ここではまったく費用がかからず無料でという前提で書きます。（わたしはケチなので、ホームページごときにお金は使えません！（笑））
Jimdoはじっくりと使ったことがありませんのでなんとも言えませんが、Wixに関しては、操作自体はむずかしいものではなく、慣れてしまえば問題ないレベルです。欠点としては動作がやや重く、またバグも多いようで、ちょっといらいらすることが結構あります。しかし見栄えの良い、気の利いたサイトを作れるという点ではGoogle Sitesよりもすぐれていますし、サイトづくりも楽しくできます。
ただ有料プランをすすめるメールがしつこく、いかにも商売というのは印象が悪いですね。
そして何より、Jimdo・Wixとも無料プランでは広告が表示されるのがいただけません。（それが嫌なら有料プランにしなさいということですね）
わたしはその広告が嫌でGoogle Sitesを選択しました。「無料で広告なし」これだけで多少の機能不足には目をつぶれます！
おそらく無料で（自社サーバーが利用でき）広告がつかないWEBサイト作成サービスは、今の所Google Sitesだけだと思います。
WordPressに関しては、もっとも利用者の多いサービスだと思いますが、初心者の方には敷居が高い気がします。
何より別途サーバー契約をしなくてはならない時点で個人的にはNOです。無料のレンタルサーバー（XFREEなど）もありますが、SSL化出来ない上、当然広告が表示されますのでNOですが、サイトづくりの練習用と考えるならありだと思います。
Q. Googleサイトでブログを作成することは可能ですか？
A. もちろん可能ですが、ブログに特化しているbloggerというサービスがGoogleで提供されています。
商用利用も認められていますので、ブログ内にGoogle AdSenseやアフィリエイト広告を掲載して、お金を稼ぐことも可能です。
また、ほとんどの無料ブログ作成サービスでは、強制的に表示される広告を除外するには有料プランに切り替える必要がありますが、Bloggerには広告も表示されません。
こういった点でとても優れた無料のブログ作成サービスだと思います。 下記サイトにアクセスすれば簡単にブログの作成ができます。
Bloggerの使い方に関しては、以下のサイトに詳しく丁寧な説明があります。ご参照ください。
Q. 画像はどのくらいまで圧縮する必要がありますか？
A. GoogleはWebサイト1ページに使用するデータ容量は1.6MB（＝1638KB）以内を推奨していますので、それを基本にお考えください。
Q. 自分のホームページのページごとのデータ容量は調べられますか？
A. 自身のホームページを開いた状態で、Windowsでは「F12」、Macでは「Command + Option + I」を押すとデベロッパーツールが右に展開します。
タブを「Elements」から「Network」にし、ページを再読み込み（メニューでページを表示）するとそのページのデータ容量や通信量が調べられます）
Q. Googleフォトにアップした画像にリンク出来ないのですが、どうしてでしょうか？
以下の２点を実行してください。
リンクの共有をONにする（アルバムを開く → ケバブメニュー（︙）→ オプション → リンクの共有をON）
必ずアルバムの画像を開く（サムネイルではありません） → 右クリック → 画像アドレスをコピー でURLを取得
Q. テキストボックス同士の間隔（上下）を開けたいのですが、スペーサーを使うと最小スペースがあるため意図したより離れすぎてしまいます。なにか方法はありますか？
A. テキストボックス編集画面右の、ケバブメニュー（︙）➡ 「行間隔と段落の間隔」（左） ➡ 「カスタムの間隔 」➡ 「段落の間隔（ポイント）」の「より前」、「より後」で調整します。
段落の間隔とは、改行した時の間隔です。（初期設定では行間隔に見合った段落間隔が確保されるようになっています）
テキストボックスの最初の行あるいは最後の行でこの「より前」・「より後」をお好みのポイントにしてください。（最大ポイントは250です）
Q. 「Code フォント」とはなんですか？
A. Codeを記述したときに読みやすく配慮されたフォントですが、通常の文章に適応しても構いません。背景が薄いグレーになるのでアクセントをつけるのにいいですね。ちなみにCode フォントを適用した後、お好きなフォントに変えてください。
コードフォントを使うとこのようになります
Q. 日本語のフォントの追加はできますか？
A. 書体欄から「その他のフォント」➡「文字:すべての文字」➡「日本語」で追加できます。
明朝体を使いたい場合には、標準の「MSP 明朝」ではスマホで見た場合ゴシック体になってしまいますので、上の手順で「BIZ UDPMincho」などを選択してください。
Q. フォントは好きなのを使って構いませんか？
A. Google Sitesで初期設定のフォントは以下です。
標準テキスト：Lato / Open Sans / Bitter / Roboto
題名・見出し：Lato / Roboto / Playfair Display / Montserrat / Oswald
これ以外のフォントを指定すると読み込みに多少の時間がかかりますが、今は回線速度も速いのでそれほど気にする必要はないと思います。
このサイトのフォントはOpen Sans（テーマ「アリストテレス」の初期設定）です。
Google fonts の使い方は、こちら
Q. フォントサイズの適正値はありますか？
A. Google Sitesの初期設定では、11〜13（テーマにより異なる）となっています。
個人的には11はちょっと小さいかなと感じます。
このサイトのフォントサイズは12（初期設定）です。
Q. 行間の適正値はどのくらいですか？
A. Google Sitesの初期設定では、1.29〜1.46（テーマにより異なる）です。
このサイトの行間は1.5と少し広めにしてありますが、Q&Aは1.15の設定です。
Q. テキストの色コードを教えてください。
A. 「#1e2428」です。強調個所は「 #000000」（black）、トーンを落とす箇所は、「#4d5156」を使っています。
「#1e2428」は、Google Sitesの初期設定色と比べ、若干色が薄く、やや青みがかっています。
あいうえおかきくけこ： #000000（black）
あいうえおかきくけこ： #1e2428
あいうえおかきくけこ： #4d5156
Q. 折りたたみ可能なグループの展開元を文字ではなく画像にすることはできますか？
A. はい、可能です。
ボタンアクション に解説がありますのでご覧ください。
Q. 分割線（水平線）に色をつけることはできますか？
A. 以下のコードを<>埋め込む→「埋め込みコード」に貼り付けます。
ピンクの部分はお好みで変えて下さい。
<hr align="left"> <!-- 線の位置 center, right -->
<style>
hr {
width: 60%; /* 線の長さ */
border-width: 2px; /* 線の太さ */
border-style: solid; /* dashed,dotted,doubleなど、線種を変えられます */
border-color: blue; /* 線の色 */
}
</style>
Q. テキストボックスに枠線をつけることはできますか？
A. 以下のコードを<>埋め込む→「埋め込みコード」に貼り付けます。
ピンクの部分はお好みで変えて下さい。
オレンジの部分に文章を打ち込みます。
「デザイン テキストボックス」は こちら をご覧ください。
<p>
Sample Sample Sample<br> <!-- <br>は改行 -->
Sample Sample Sample<br>
Sample Sample Sample
</p>
<style>
p {
color: #1e2428; /* 文字色 */
font-size: 16px; /* 文字の大きさ */
font-weight: 400; /* 文字の太さ 100～900 */
text-align: left; /* 文字の配置 center, right から選択 */
line-height: 1.5em; /* 行間 */
letter-spacing: 0.8px; /* 文字間隔 */
background-color: #e0ffff; /* 背景色 */
border: solid 1px blue; /* 枠の太さと色 */
border-radius: 3px; /* 枠の角の丸み */
padding: 15px; /* 枠と文章の間隔 */
}
</style>
Q. ページの追加にある「新しいページ」と「新規メニュー」の違いはなんですか？
A. 新規メニューの場合も、新しいページの場合もメニューリストに登録されるという意味では全く同じです。
新しいページの場合はそれ自体がページですので、あたり前ですが一枚のページとして内容をつくることができます。しかし新規メニューの場合はそれ自体ページではありませんので、そこにサブページを追加し階層化しなければ意味がありません。つまり階層化しなければメニューに表示されているだけです。
結論を言えば、メニューを階層化する場合は「新規メニュー」、階層化しない場合は、「新しいページ」です。
では、「新規メニューからサブページを追加し階層化する」のと、「新しいページからサブページを追加し階層化する」のでは何が異なるのでしょう。
これは、階層化されたメニューにマウスカーソルを合わせるとプルダウンメニューが出ますが、新規メニューで階層化した場合には、「もとの親メニューをクリックしてもプルダウンメニューが表示される」のに対し、新しいページから階層化した場合は、「親ページそのものが表示されます」。
パソコンで階層化されている親メニューをクリックする人は少ないと思いますが、マウスのないスマホの場合は親メニューをタップして階層メニューを表示させるため、ページから階層化した場合、プルダウンの階層メニューでなく親ページそのものが表示されてしまいます。（あらためて親ページ自体にもメニューを追加しなければなりませんし、利便性ももよくありません）
よって先に申し上げた通り、「メニューを階層化する場合は新規メニュー」、「階層化しない場合は、新しいページ」です。
ただし、新しいページで階層化する場合、親ページと子ページの全てにメニューを作り、子ページを「ナビゲーションに表示しない」とするやり方はあります。➡このサイトのLogin-formはこのやり方を使ったものです。
また、新規メニューの場合、そのメニューをホーム（トップページ）には指定できません。（指定できるのはページのみです）
したがって、あくまでホーム（トップページ）から各ページにリンクさせたいという場合には、子ページをすべて「ナビゲーションに表示しない」とした上で、ホーム（トップページ）内にメニューを作り、リンクさせることになります。
Q. サーチコンソールのページインデックスで、https://sites.google.com/view/※※※※※※/ホーム/
のページが「重複しています。ユーザーにより、正規ページとして選択されていません」と出てくるのですが、どう対処したら良いでしょうか？
A. これはGoogleサイトでホームページを作成した方共通の悩みだと思います。
以下その理由をご説明いたします。
GoogleサイトのURLに関しては、sites.google.com/view/まではGoogleにより決定されています。
ユーザーが決定できるのは、ディレクトリ名 view/ の後の２つ目の（サブ）ディレクトリ名の部分です。
つまり sites.google.com/view/※※※※※※/ の※の部分です。
ここでは説明を分かりやすくするため sites.google.com/view/※※※※※※/ までをルートディレクトリと定義します。
さて、Googleサイトでホームページを作成すると初期状態で「ホーム」というページ（ファイル名）が用意されます。
これがいわゆるトップページに当たるものですが、トップページに関しては、ファイル名を指定しなくてもルートディレクトリ部分まででトップページが表示されるようになっています。
つまり
https://sites.google.com/view/※※※※※※/
と
https://sites.google.com/view/※※※※※※/ホーム/
は同じトップページが表示されるということです。
よってサーチコンソールのページインデックスで後者が前者と重複していると出てくるわけです。
しかしこれは本来おかしな話で、Googleサイトが「ホーム」というページを初期設定にしている以上、明らかに
https://sites.google.com/view/※※※※※※/ホーム/
の /ホーム/ までをGoogleサイト側がルートディレクトリとして認識させなければならない、あるいはサーチコンソール側でページの重複エラーを出さない設定とするべきだと思います。
以上の事から、現状、サーチコンソールのページインデックスで「重複しています。ユーザーにより、正規ページとして選択されていません」の重複エラーを回避することは、独自ドメインのURLでも不可能と思いますので、完全に無視していただいて結構です。
これによりSEO対策上不利になることもありませんので、ご安心ください。
Q. ソーシャルリンクをGoogleドライブにアップしたファイルや画像のダウンロードの対象にしたいのですが、リンクアイコンをダウンロードなどのボタンやアイコンに変更できますか？
A. 以下のコードを<>埋め込む→「埋め込みコード」に貼り付けます。
ピンクの部分はお好みで変えて下さい。
**********の箇所にはGoogleドライブで取得したダウンロード対象ファイルのURLを入力します
リンクに入力するURLは「Googleドライブ内のダウンロード対象のファイルをクリック」→「共有アイコンをクリック（右側）」→「リンクをコピー（左下）」で取得できます。
ボタンのコード ▽
<p>ファイル ****** を</p> <!-- 必要なければ行を削除して下さい -->
<button id="js-download-btn" class="download-btn">ダウンロード</button> <!-- ボタンのタイトル -->
<style>
p {
color: gray; /* 文字色 */
font-size: 14px;
}
.download-btn {
width: 180px;
height: 40px;
color: white; /* 文字色 */
font-size: 16px;
font-weight: 400; /* 文字の太さ 100〜900 */
background-color: dodgerblue;
border: 1px solid blue; /* ボタンの枠線 */
}
.download-btn:hover { /* ボタンにマウスカーソルを重ねた時の挙動 */
color: cyan;
background-color: royalblue;
border: 1px solid red;
transition: 1.0s: /* 変化するまでの時間（秒） */
}
</style>
<script>
document.getElementById('js-download-btn').addEventListener('click', function() {
var fileUrl = '**********'; // ダウンロードするファイルのURL
var fileName = 'sample.pdf'; // ダウンロードする際のファイル名（必要なければ行を削除して下さい）
var a = document.createElement('a');
a.style.display = 'none';
a.href = fileUrl;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
</script>
アイコンのコード ▽
アイコンはGoogleアイコン（ https://fonts.google.com/icons ）を使用しています
<p>ファイル ****** を</p> <!-- 必要なければ行を削除して下さい -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
<!-- 使うアイコンの名称を入力（２単語以上の場合は _ を入れてください） -->
<span id="js-download-btn" class="material-icons-outlined">download</span>
<style>
p {
color: gray; /* 文字色 */
font-size: 14px;
}
.material-icons-outlined {
display: block;
cursor : pointer;
font-size: 50px;
color: orange;
/* アイコンの位置調整をしないのであれば以下３行はなくても構いません */
width: 50px;
/* アイコン調整 auto auto は中央配置 */
/* アイコン調整 left (px)で調整しても right (px) で調整してもOK */
margin-left: auto;
margin-right: auto;
}
.material-icons-outlined:hover {
color: blue; /* マウスカーソルを当てたときの色 */
}
</style>
<script>
document.getElementById('js-download-btn').addEventListener('click', function() {
var fileUrl = 'https://drive.google.com/file/d/1iEJd5iohKqa-_gfcQfuRQotwKiw-1k8W/view?usp=sharing'; // ダウンロードするファイルのURL
var fileName = 'sample.pdf'; // ダウンロードする際のファイル名（必要なければ行を削除して下さい）
var a = document.createElement('a');
a.style.display = 'none';
a.href = fileUrl;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
</script>
⇒
⇒
Q. 文字のタブ揃えをすることはできますか？
A. 以下のコードを<>埋め込む→「埋め込みコード」に貼り付けます。
ピンクの部分はお好みで変えて下さい。
オレンジの部分に文章を打ち込みます。
<table>
<tr>
<td>商品A </td>
<td align="right">19,800円</td> <!-- leftにすれば左揃え -->
</tr>
<tr>
<td>商品ABC </td>
<td align="right">980円</td>
</tr>
<tr>
<td>商品AB </td>
<td align="right">8,480円</td>
</tr>
</table>
<style>
tr {
color: blue; /* 文字色 */
font-size: 16px; /* 文字サイズ */
letter-spacing: 0.5px; /* 文字間隔 */
line-height: 1.0em; /* 行間 */
}
</style>
見本（右揃え、行間調整）
見本（左揃え、文字間隔調整）
Q. Googleサイトで音楽（BGM) を流すことはできますか？
A. Googleドライブにアップロードした音楽ファイルの再生であれば以下で出来ます。
Googleドライブのオーディオファイルを（ダブルクリックで）開く → 共有 → 一般的なアクセスリンクを知っている全員（閲覧者）→ 完了 → その他の操作（ケバブメニュー︙）→ 新しいウインドウで開く → アイテムを埋め込む（ケバブメニュー︙）→ コードをコピー → Googleサイトにコードを埋め込む → widthとheightを調整（初期：width="640" height="480"）→ 以下のプレイヤーになります。
※ widthは 420 以上で設定してください。
Q. ページのQRコードはどのように作成するのですか？
A. サイトページ画面上で右クリック ➡ 「このページのQRコードを作成」でダウンロードできます。
Google Sites
Report abuse