アイフラッグラボ（アイフラッグ）｜【Googleサイト機能紹介】Googleサイトでホームページのデザインをカスタマイズ

【Googleサイト機能紹介】Googleサイトでホームページのデザインをカスタマイズ

はじめに

今回は、基本機能でサイトデザインを変更する方法を紹介します

サイト作成のコンテンツでは、シンプルな構成で作成しましたが、

カスタマイズすることで、様々な雰囲気のホームページが作成できます。

今回紹介するサイトがデザイン的に優れているかは別として、

編集方法の参考になればと思います。

アイフラッグサポート担当：MA

【Googleサイト機能紹介】-テーマを変更する-（2013-07-17）

Googleサイトには、テーマという様々なテンプレートが用意されていて、

ホームページの雰囲気を簡単に変更することができます。

以下テーマの変更方法

①ページ右上その他ボタンから、【サイトの管理】を選択

②左側メニューの【テーマ、色、フォント】を選択

③基本のテーマ欄から、好みのテーマを選択し、保存ボタンを押します

パステルを選んでみました！

あまり変わらないですね。笑

アイフラッグサポート担当：MA

2013-07-17

【Googleサイト機能紹介】-タイトルヘッダーを変更する-（2013-07-17）

テーマを変えただけだとあまりインパクトが無かったので、

ヘッダー部分を編集してみます。

・ヘッダー部分にロゴや、画像を挿入する。

①ページ右上その他ボタンから、【サイトの管理】を選択

②左側メニューの【テーマ、色、フォント】を選択

③サイト見出しの背景で表示させたい画像を選択します。

・色をテーマのままにすると左に余白が出来てしまうので、無しまたは、色を選択します。

・オプションで、繰り返しの有無や、配置を設定します。

こんな感じです

少し狭く感じるので、高さを変更します

④ページ右上その他ボタンから、【サイトのレイアウトを編集】を選択

編集画面で、ヘッダー部分をクリック

高さを90ピクセルにしてみました

アイフラッグサポート担当：MA

2013-07-17

【Googleサイト機能紹介】-サイドバーを編集する-（2013-07-17）

サイドバーが少しさびしいので、編集してみます。

①ページ右上その他ボタンから、【サイトのレイアウトを編集】を選択

※まず最初に、デフォルトのナビゲーションは、編集項目が少ないので削除します。

②新規追加方法

Sidebarの＋をクリックします

ナビゲーションを追加してみましょう

③作成されたナビゲーションをクリックすると編集できます

④テキストを追加する

・ナビゲーションの追加と同様にテキストを追加します

・追加したテキストをクリックすると編集が可能です

こんな感じです

ホームページっぽくなりましたね！！

アイフラッグサポート担当：MA

2013-07-17

【Googleサイト機能紹介】-オリジナルのフッターを編集する-（2013-07-17）

Google独自のフッターは編集できませんが、

オリジナルのフッターを作成することができます

①ページ右上その他ボタンから、【サイトのレイアウトを編集】を選択

②画面上部のカスタムフッターをクリックしてオンにします

画面下のカスタムフッターを編集をクリックすると編集画面になります

今回はメール問い合わせ先を作成してみます。

基本機能にメール送信ボタンが無いので、HTMLを編集します

こんな感じで編集できます。

完成!!

アイフラッグサポート担当：MA

2013-07-17

◆【GoogleApps機能紹介】Googleサイト概要説明

◆【Googleサイト機能紹介】-Googleサイトを利用してホームページを作成しよう-(2013-07-12)

◆【Googleサイト機能紹介】-デザインを変更する（基本編）-(2013-07-17)

◆【Googleサイト機能紹介】-ページテンプレートを活用してトップページを大改造！！-（2013-07-18)

◆【Googleサイト機能紹介】-サイドバーのカスタマイズ-(2013-07-20)

更新担当：アイフラッグ社内サポートチーム