Google Sitesのデザインカスタマイズにチャレンジ

　無料で、広告がでなくて、独自ドメインが使える、CMSというかブラウザだけで編集可能なWebサイト作成サービスを探してたわけです。そしたらふと思い立って、GoogleSitesがあるじゃん。とおもったわけですね。ところが、GoogleSitesには一つ問題があるのです。

ちなみにGoogleSitesはこれ→Google サイト

標準で用意されているテーマしかなくて、CSSがいじれないので、手の施しようがないわけです。これではちょっといかんなぁとおもってました。こんなの↓

少しでもマシなものをさがしたところ、標準で用意されているテーマの中には、結構デザインに凝ったものもありました（洋風でしたが）。Googleが作る場合のみいろいろCSSがいじれるのかと思ったんですが、どうもそうでは無さそうでした。

　それでちょっと見ると、なんとか工夫すればCSS無しでデザインが出来そうな感じがしたので、少しまとめてみました。

　制約が多い。ただしウェブデザインの歴史は制約との戦い（きっと）だったので、きっとなんとかなるはずです。

大きな画像が使えるのは以下の５ヶ所
- ページ全体の背景画像
- ページラッパーの背景画像
- サイトヘッダーの背景画像
- ロゴ画像
- コンテンツの背景画像
小さな画像部品は以下でも。
- コンテンツガジェットのヘッダーの背景画像
- サイドバーガジェットのヘッダーの背景画像
意外と画像がおけないところ
- サイドバーの背景画像→ページラッパーに含めるしか。
- フッターの背景画像→margin:0にしたdivを配置しその中で記述
- リスト要素→あきらめる

→５つの画像の組み合わせでなんとかデザインする。

→8pxくらいのズレが許容できるようなレイアウトにする。

　まず始めに、テーマをいじりやすいプレーンな「シンプルホワイト」を選びます。

　次に、リキッドレイアウトだと、後述の画像配置が厳しくなるので、サイトのレイアウト　メニューより、960pxにでも固定してしまいます。

　それぞれの画像は、repeat,-x,-y,no-が選べるようになっています。なので、それを意識すると結構いけちゃいます。

例）

※ただしページラッパーの幅＞ヘッダーの幅（約両端10px小さい）ので、余白を計算する必要あり。
こういうことになっちゃいます。

ださい平文テキストのサイトタイトルは、サイトの設定→全般より表示しないようにすることが可能なので、ここで消して画像でロゴを作成してアップします。このとき、ロゴに余白を取りたいときは、画像で設定しても良いですが、サイトのレイアウトからヘッダーの高さを指定可能です。

フッター・サイドバーは、比較的好きなHTMLが記述できるので（インラインCSS含む）それなりに重宝します。
しかし、iframe style script objectなどが使えないので、Twitter ウィジェットを埋め込んだり、iGoogleGadgetをのっけたりさえできません。静的コンテンツのみになります。

　今回言及していませんが、水平ナビゲーションはあまりおすすめしません。上述のように縦がずれるので、背景画像の工夫でいけないし、それ以外だとデザイン的にもかなりいじれる範囲が狭い為です。

というわけで、みんなもGoogleSitesのデザインに挑戦してみましょう！

ku-sukeのブログ