<a title="GoogleドキュメントのCSSデザインを自由に変更" href="http://flickr.com/photos/web-marketing/2442184595/" onclick="window.open('http://flickr.com/photos/web-marketing/2442184595/'); return false;"><img alt="google-docs-css-edit-top.gif" src="http://web-marketing.zako.org/images/google-docs-css-edit-top.gif" width="250" height="250" /></a>
<p>「CSSがいじれるようになった」とは言ってもあまり目新しさも感じないようにも。。。しかしサンプルを見せられた瞬間に「これは！」と感じざるを得ませんでした。なので早速試してみました。</p>

<!--more-->
<h3 class="header-label">CSSをいじれるようになったGoogleドキュメント</h3>
<p class="picture"><img alt="google-docs-css-edit3.gif" src="http://web-marketing.zako.org/images/google-docs-css-edit3.gif" width="400" height="439" />
いろいろやってみた文書です。（WEBページで見ると文字の背景が白くなってしまいます→<a class="google" href="http://docs.google.com/Doc?id=ddc3qc54_60hrmd9kgv" onclick="window.open('http://docs.google.com/Doc?id=ddc3qc54_60hrmd9kgv'); return false;">サンプル文書</a>）</p>

<h4 class="header-label"><abbr title="カスケーディング・スタイル・シート">CSS</abbr>設定手順</h4>
<ol>
<li><a class="google" href="http://docs.google.com/#documents" onclick="window.open('http://docs.google.com/#documents'); return false;">Google Docs - Documents</a>を開く</li>
<li>Document（文書）を新規作成</li>
<li>メニューの「Edit（編集）」をクリックし、「Edit CSS（CSSを編集）」を選択<br />
<img alt="google-docs-css-edit.gif" src="http://web-marketing.zako.org/images/google-docs-css-edit.gif" width="400" height="396" /></li>
<li>CSS編集画面が開くのでCSSを書き込む<br /><img alt="google-docs-css-edit2.gif" src="http://web-marketing.zako.org/images/google-docs-css-edit2.gif" width="400" height="466" /></li>
<li>「OK」ボタンを押すとデザインが反映される</li>
</ol>
<p>Google GroupsでいくつかCSSサンプルが用意されていたのでご紹介。</p>
<h4 class="header-label">リフィルデザイン</h4>
<p class="picture"><img alt="note-book.gif" src="http://web-marketing.zako.org/images/note-book.gif" width="400" height="250" />
リフィルやルーズリーフのようなデザイン。</p>
<h4 class="header-label">リフィル用CSS</h4>
<textarea name="code" class="css">
body {
background-image: url('File?id=ad8wdwbvms_884g9vm4zwk_b');
background-repeat: repeat-y;
padding-left: 70px;
}

p {
line-height: 20px;
}
</textarea>
<h4 class="header-label">スタイリッシュヘッダー</h4>
<p class="picture"><img alt="Styled-Headers.gif" src="http://web-marketing.zako.org/images/Styled-Headers.gif" width="400" height="250" />
見出しにデザインを適用しているもの。見出しの挿入は↓のメニューからできます。
<img alt="Styled-Headers-2.gif" src="http://web-marketing.zako.org/images/Styled-Headers-2.gif" width="400" height="254" /></p>
<h4 class="header-label">スタイリッシュヘッダー用CSS</h4>
<textarea name="code" class="css">
h1 {
background: url('File?id=ad8wdwbvms_902f9z2wgd8_b') no-repeat top left;
padding-top: 26px;
padding-left: 80px;
text-transform: uppercase;
font-family: Garamond;
font-size: 22pt;
color: #003300;
border-bottom: 3px double #003300;
}
h2 {
background: url('File?id=ad8wdwbvms_905cwjztrfc_b') no-repeat top left;
padding-top: 12px;
padding-left: 32px;
font-family: Garamond;
font-size: 18pt;
color: #003300;
border-bottom: 2px solid #003300;
}
h3 {
background: url('File?id=ad8wdwbvms_906cb8g4mgj_b') no-repeat top left;
padding-top: 0px;
padding-left: 32px;
font-family: Garamond;
font-size: 14pt;
color: #003300;
border-bottom: 1px solid #003300;
}
</textarea>

<h4 class="header-label">引用スタイル</h4>
<p class="picture"><img alt="Styled-Quotes.gif" src="http://web-marketing.zako.org/images/Styled-Quotes.gif" width="400" height="250" />
ブログでもこのようなスタイルを良く見かけますよね。引用タグの挿入は↓のメニューから
<img alt="Styled-Quotes-2.gif" src="http://web-marketing.zako.org/images/Styled-Quotes-2.gif" width="400" height="334" /></p>
<h4 class="header-label">引用スタイル用CSS</h4>
<textarea name="code" class="css">
blockquote {
border: 3px double #AAAAAA;
font-family: Garamond;
padding: 15px 15px 15px 100px;
margin: 0 80px;
background-image: url('File?id=ad8wdwbvms_887fk6jk2hh_b');
background-repeat: no-repeat;
}
</textarea>

<h4 class="header-label">リストアイコン</h4>
<p class="picture"><img alt="Styled-Bullets.gif" src="http://web-marketing.zako.org/images/Styled-Bullets.gif" width="400" height="114" />
リストアイコンを変更することができます。いずれかひとつを選択して使うみたいです。</p>
<h4 class="header-label">リストアイコン用CSS</h4>
<p>いずれかひとつしか適用されません。どうして使いたい場合はclass属性をつけてHTML編集する必要がありそうです。</p>
<textarea name="code" class="css" cols="60" rows="5" id="code">
/* hearts */
ul li {
list-style-image: url('File?id=ad8wdwbvms_872c3mz8xdt_b');
}
/* leaves */
ul li {
list-style-image: url('File?id=ad8wdwbvms_873dqzfb4fj_b');
}
/* stars */
ul li {
list-style-image: url('File?id=ad8wdwbvms_874hn5b66fm_b');
}
</textarea>

<h4 class="header-label">背景画像</h4>
<p class="picture"><img alt="Adding-an-image-o.gif" src="http://web-marketing.zako.org/images/Adding-an-image-o.gif" width="400" height="252" />
自作の画像をアップロードして背景画像にもできます。手順は以下の通り。</p>
<h4 class="header-label">背景画像設定手順</h4>
<ol>
<li>まず背景画像をアップロードするためにドキュメントを開き、「挿入」から「画像」を選択<br />
<img alt="Adding-an-image.gif" src="http://web-marketing.zako.org/images/Adding-an-image.gif" width="400" height="248" /></li>
<li>画像を参照してアップロード<br /><img alt="Adding-an-image2.gif" src="http://web-marketing.zako.org/images/Adding-an-image2.gif" width="400" height="422" /></li>
<li>次に画像のURLを取得するために「編集」から「HTMLを編集」を選択<br /><img alt="Adding-an-image3.gif" src="http://web-marketing.zako.org/images/Adding-an-image3.gif" width="400" height="358" /></li>
<li>HTMLから画像のアドレスを探してコピー、下記のようなコードを探してください。<br />
<textarea name="code" class="css" cols="60" rows="5" id="code">
 <!--これはサンプルです。-->
</textarea>
<img alt="Adding-an-image4.gif" src="http://web-marketing.zako.org/images/Adding-an-image4.gif" width="400" height="108" /></li>
<li>「CSS」の編集で下記CSSの”取得した画像アドレス”の部分を先ほど取得したアドレスに置き換えて貼り付ける<br />
<textarea name="code" class="css" cols="60" rows="5" id="code">
body {
background-image: url('取得した画像アドレス');
}
</textarea>
</li>
<li>貼り付けると↓のようになるので「OK」ボタンを押して完了
<img alt="Adding-an-image5.gif" src="http://web-marketing.zako.org/images/Adding-an-image5.gif" width="400" height="128" /></li>
</ol>

<p>これはいろいろおもしろい。<a href="http://web-marketing.zako.org/google/google-embed-powerpoint-presentations.html">プレゼンテーションのようにサイトへ埋め込めるようになればさらに</a>楽しめそうですね。</p>
<p>興味のある方は<a class="google" href="http://docs.google.com/#documents" onclick="window.open('http://docs.google.com/#documents'); return false;">Google Docs - Documents</a>へどうぞ。</p>
<p>Via：<a class="web-site-link" href="http://googlesystem.blogspot.com/2008/04/new-in-google-docs-insert-videos-edit.html" onclick="window.open('http://googlesystem.blogspot.com/2008/04/new-in-google-docs-insert-videos-edit.html'); return false;">New in Google Docs: Insert Videos, Edit CSS</a></p>
<script class="javascript" src="http://web-marketing.zako.org/js/shCore.js"></script>
<script class="javascript" src="http://web-marketing.zako.org/js/shBrushXml.js"></script>
<script class="javascript" src="http://web-marketing.zako.org/js/shBrushCss.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>