読者です 読者をやめる 読者になる 読者になる

ku-sukeのブログ

Just another hatena blog

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

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

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

ダサイ。

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

ところが、意外といじれる。

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

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

基本戦略

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

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

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

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

各部の名称・変更可能な点

最初にやること

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

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

大きな画像の組み合わせ方。

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

例)

  • 背景画像・・・グラデーションで、縦500px横8pxを横リピート
  • ページラッパー・・・コンテンツ720+余白10+サイドバー230で、縦リピート
  • ヘッダー背景画像・・・ページラッパーの上端になるような角丸上部画像※

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

ロゴ周りの処理

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

フッターとサイドバーの処理

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

水平ナビゲーションについて

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



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