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

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

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

• 
• 組織のマインドマップツールをマインドマイスターにすべき理由
• 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!!

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

いろいろやってみた文書です。（WEBページで見ると文字の背景が白くなってしまいます→サンプル文書）

CSS設定手順

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

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

リフィルデザイン

リフィルやルーズリーフのようなデザイン。

リフィル用CSS

スタイリッシュヘッダー

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

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

引用スタイル

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

引用スタイル用CSS

リストアイコン

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

リストアイコン用CSS

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

背景画像

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

背景画像設定手順

1. まず背景画像をアップロードするためにドキュメントを開き、「挿入」から「画像」を選択
   
2. 画像を参照してアップロード
   
3. 次に画像のURLを取得するために「編集」から「HTMLを編集」を選択
   
4. HTMLから画像のアドレスを探してコピー、下記のようなコードを探してください。
   <!--これはサンプルです。-->
5. 「CSS」の編集で下記CSSの”取得した画像アドレス”の部分を先ほど取得したアドレスに置き換えて貼り付ける
   body { background-image: url(‘取得した画像アドレス’); }
6. 貼り付けると↓のようになるので「OK」ボタンを押して完了

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

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

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