アイフラッグラボ（アイフラッグ）｜サイドバーのカスタマイズ

【Googleサイト機能紹介】サイドバーのカスタマイズ

はじめに

今回は、サイドバーをカスタマイズして

さらに大改造をしていきます。

アイフラッグの社内からもサイドバーの編集については、

多くのお問い合わせをいただいているので、サポートの実例をふまえて紹介します

サイドバーの編集について、もっとも問い合わせが多いのが、

『利用できるアイテムを増やしたい』という内容です。

実際利用できるのが、

サイトナビゲーションや、更新履歴、テキストなどです。

普通にメニューバーとして利用するなら問題ないのですが、

ホームページを作り込んでいくと物足りない気がします。

では、アイテムは増やせるのか？

→残念ながら増やせません。

アイテムは、基本パーツ以外は利用出来ません。

テキストボックスがHTML編集可能なので、メインページで作成したソースを持っていけるのでは？

と試してみましたが、動きません。

iframeで表示させようとしましたが、これも動きませんでした。

結果、【無理だからあきらめること】にしました。

そして代替え案の紹介です。

前置きが長くなりましたが、今回の紹介内容は、

基本機能のサイドバーは利用せずにメインコンテンツを分割してサイドバーを作成します。

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

【Googleサイト機能紹介】-メインコンテンツを分割してサイドバーを作成

①前回の【Googleサイト機能紹介】-メインコンテンツのレイアウト調整-（2013-07-18）

で紹介した方法で、レイアウトを変更します。今回は、左右にサイドバーを作成します。

編集→レイアウト→左側と右側にサイドバーを選択

こんな感じで、メインコンテンツが分割されます。

②基本のサイドバーを削除

ホームページがサイドバーだらけになってしまったので、いままで利用していたサイドバーを非表示にします。

その他→サイトのレイアウトを編集を選択

編集画面上部のサイドバーボタンを押す事で、表示非表示を切り替えられます

ここでポイント！！

基本のサイドバー幅を変更することで、メインコンテンツのサイドバー幅を変更できます。

この方法以外で、メインコンテンツの幅を変更することは出来ません。

今回は、240pxに幅を広げます。

・サイドバーの編集ボタン

・幅を変更

※反映までに少し時間がかかるので、再読み込をしてみましょう

【Googleサイト機能紹介】-メインコンテンツ内のサイドバーへナビゲーションを作成

基本機能のサイドバー同様のナビゲーションを作成します

今回は、ホームページ内のコンテンツをカテゴリで分けて表示させます。

①ページ構成をカテゴリ分けする

その他→サイトを管理→ページを選択します

作成したページが表示されるので、構成を変更します。

※ドラッグ&ドロップで変更

今回は、アイフラッグラボの支店（業務関連）と、アイフラッグラボ第二支店（情報関連）でカテゴリ分けをしてみました。

②サイドバーへ表示する

ページの編集→作成したサイドバーを選択（エリアをクリック）し、挿入をクリック

サブページリストを選択します。

プロパティが表示されるので

【タイトル】→表示されるボックスのタイトルです

今回は業務関連に変更しました。

【サブページを表示】→選択したページの次の階層が表示されます。

今回は、アイフラッグラボ支店を選択したので、先ほど階層化した下階層が表示されます。

【幅】→サイドバーの幅を超えるとレイアウトが崩れるので、空欄にします。

※空欄は、100％表示

【デザイン】→タイトルだけ色を乗せるか、ボックス全体に色を乗せるかを選択できます。

同じく、アイフラッグラボ第二支店側も情報関連として作成しました。

【Googleサイト機能紹介】-水平ナビゲーションの設定

上記方法で、ナビゲーションを設定すると、アイフラッグ支店とアイフラッグ第二支店への導線が無くなってしまいます。

回避策としては、トップページから表示させれば良いのですが、カテゴリ分けが出来ません。

そのため、本ホームページでは、水平ナビゲーションを設置して、導線を確保しています。

設定方法

その他→サイトのレイアウトを編集

編集画面上部の水平ナビゲーションボタンで表示非表示の切り替えができます。

表示状態に切り替えて、ヘッダー付近をクリックすると編集できるので、表示させたいページを追加します。

以上で、サイドバー編集の紹介を終わります。

次回は、ガジェットの追加について紹介しようと思います

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

2013-07-20

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

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

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

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

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

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