第12回 2月10日(日曜日)
障害者向け ウェブデザインセミナー

今日は皆が作ったブログを見て発表してもらいましょう。

なかなかの力作ぞろいでございます!
これまでの2回の講座で教えたあえてトップのタイトルをサブタイトルのように仮想して上に見せて画像を配置してタイトルのように見せるという技は、長々とした文章にした場合はタイトルが長くなるので加工した方がいい場合もあります。


日曜日でもございますので、世界のオシャレなgoogle blogger サイトを研究してしまいましたので発表します。

どっかわからん国の人の渋すぎるサイト

マウスオーバーすると色が反転する簡単なJavaScriptを埋め込んでいます。
<center> ←<div style="width:**; margin:0 auto;"> で設定する <a href="http://lablogueria.blogspot.com/"> <div id="header" style=" margin-top:15px; border:0; width:950px; color:#f8f8ff; background-color:transparent; background-position:bottom right; background-image:url(http://img195.imageshack.us/img195/5125/poorowl185.png); background-repeat:no-repeat; padding-top:3px; font-family:Georgia,Times; font-size:112px; font-weight:bold;←反対はnormal; line-height:1.5em;  text-align:left; padding-bottom:26px; padding-top:26px;">  <div style="margin-bottom:-26px;">  <span  onmouseout="this.style.color=&quot;#f8f8ff&quot;;"  onmouseover="this.style.color=&quot;#782FF1&quot;;"  title="¡Hazlo con Estilo!" style="color: rgb(248, 248, 255);"> La Bloguería</span>  </div> </div> </a> </center>
ちょっとやってみました。下のところにhtml/Javascript を追加しました。 画像をマウスオーバーで変更するJavaScript
center という要素は覚えないでください。html5では廃止になっています。

何気に普通に見えるがものすごいカスタマイズがされた商業サイト
これの日付のあしらいが非常に上品で、これをいったいどうやって作っているのか知りたいのですが、まったくわかりませんでした。これを作ったのはこの会社のようです。このサイトなんてすごいです。

なかなか日付のところのあしらいに工夫があり好きです。情熱のスペインから
とくにこれということはありませんが、この程度の日付の背景画像の入れ方はわかると思います。

大笑いできるシンガポールの姉ちゃんのサイト 有名らしい
有名になるためにやり切ることの意気込みを感じます。クリックする度に背景画像が変更するJavaScriptが入っています。
要素の検証の使い方をもうちょっと詳しく教えます。

このようにして、人の作ったサイトを分析し、調べてさらにやってみるのが一番の勉強になります。覚えたことをツイッターやブログで書くことでさらに覚えることができ、いざという時の仕事やプレゼンに役立ちます。

Bloggerカスタマズはここから!知識ゼロで始めるブログ改造 この方いろいろやってます。
あとで自分でよくわかるように タグ(ラベル)で管理しておくと便利です。


ちょっとオススメのエクステンション ブログを読むのに集中できる!


Clearly  いいかもしれない…
入れるしかないですね。  読み上げ機能までついてます!月450円もかかりますが…う~ん!忙しい時にいいかも。 でも選択した部分を読み上げてくれるものもありました! ←動きませんでしたorz


ちょっとオススメのサイト もしかしたらカッコいい背景画像ができるかも!


Recursive Drawing from Toby Schachman on Vimeo.

楽しくて遊んでしまいました。
Recursive Drawing
これなら絵心のない人もそれなりのものが…
参考文献

google カレンダーの使い方
埋め込み方です