「CSSがいじれるようになった」とは言ってもあまり目新しさも感じないようにも。。。しかしサンプルを見せられた瞬間に「これは!」と感じざるを得ませ

Googleドキュメントのデザインを自由に変更できるようになったので試す

2008-04-27 | Sigeo | 0 | カテゴリ Google 全般

google-docs-css-edit-top.gif

「CSSがいじれるようになった」とは言ってもあまり目新しさも感じないようにも。。。しかしサンプルを見せられた瞬間に「これは!」と感じざるを得ませんでした。なので早速試してみました。

CSSをいじれるようになったGoogleドキュメント

google-docs-css-edit3.gif いろいろやってみた文書です。(WEBページで見ると文字の背景が白くなってしまいます→サンプル文書

CSS設定手順

  1. Google Docs – Documentsを開く
  2. Document(文書)を新規作成
  3. メニューの「Edit(編集)」をクリックし、「Edit CSS(CSSを編集)」を選択
    google-docs-css-edit.gif
  4. CSS編集画面が開くのでCSSを書き込む
    google-docs-css-edit2.gif
  5. 「OK」ボタンを押すとデザインが反映される

Google GroupsでいくつかCSSサンプルが用意されていたのでご紹介。

リフィルデザイン

note-book.gif リフィルやルーズリーフのようなデザイン。

リフィル用CSS

スタイリッシュヘッダー

Styled-Headers.gif 見出しにデザインを適用しているもの。見出しの挿入は↓のメニューからできます。 Styled-Headers-2.gif

スタイリッシュヘッダー用CSS

引用スタイル

Styled-Quotes.gif ブログでもこのようなスタイルを良く見かけますよね。引用タグの挿入は↓のメニューから Styled-Quotes-2.gif

引用スタイル用CSS

リストアイコン

Styled-Bullets.gif リストアイコンを変更することができます。いずれかひとつを選択して使うみたいです。

リストアイコン用CSS

いずれかひとつしか適用されません。どうして使いたい場合はclass属性をつけてHTML編集する必要がありそうです。

背景画像

Adding-an-image-o.gif 自作の画像をアップロードして背景画像にもできます。手順は以下の通り。

背景画像設定手順

  1. まず背景画像をアップロードするためにドキュメントを開き、「挿入」から「画像」を選択
    Adding-an-image.gif
  2. 画像を参照してアップロード
    Adding-an-image2.gif
  3. 次に画像のURLを取得するために「編集」から「HTMLを編集」を選択
    Adding-an-image3.gif
  4. HTMLから画像のアドレスを探してコピー、下記のようなコードを探してください。
    Adding-an-image4.gif
  5. 「CSS」の編集で下記CSSの”取得した画像アドレス”の部分を先ほど取得したアドレスに置き換えて貼り付ける
  6. 貼り付けると↓のようになるので「OK」ボタンを押して完了 Adding-an-image5.gif

これはいろいろおもしろい。プレゼンテーションのようにサイトへ埋め込めるようになればさらに楽しめそうですね。

興味のある方はGoogle Docs – Documentsへどうぞ。

Via:New in Google Docs: Insert Videos, Edit CSS

スポンサードリンク

この記事を読んだ方は以下の記事もご覧いただいています

  • このエントリーをはてなブックマークに追加

コメントする