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

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

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

• 
• 針のいらないホッチキス コクヨ ハリナックスわたくし愛用中です！
• スマホで撮ってデータ化できるメモ コクヨ CamiApp（キャミアップ）

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から画像のアドレスを探してコピー、下記のようなコードを探してください。
   <img id="abc123" style="width: 100px; height: 100px;" src="File?id=abcdefg123456_987654zyxwv">
5. 「CSS」の編集で下記CSSの”取得した画像アドレス”の部分を先ほど取得したアドレスに置き換えて貼り付ける
   body { background-image: url(‘取得した画像アドレス’); }
6. 貼り付けると↓のようになるので「OK」ボタンを押して完了

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

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

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

↓WEBマーケティングブログのGoogle+ページはじめました

Tweet

おすすめの関連記事

• GoogleドキュメントでDropboxできる「InSync」複数アカウント設定可能
• Goolgeのプレゼンテーション機能をアカウントがなくても体感できる「デモ Google ドキュメント」
• メール 一斉配信をGoogleドキュメントで一度に１００件までできる「MailMerge」差し込み送信も可能
• Googleスプレッドシートのグラフ コピー機能が意外と便利
• Googleドキュメントのショートカットキー（ファイル一覧用）が新しいデザインで便利になった

• 前の記事： モバイル版アドセンスがイメージ広告に対応
• 次の記事： Googleのロゴ変更をRSSで素早くキャッチする方法
• ジャンル： CSS, Google ドキュメント

参考になる書籍