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

Chromeの最新版が出たのですが、面白かったのでちょっと紹介します。β版ですが、普通に使えるようで、速さが、かなり快適になっています。 また、音声入力が非常に優秀でした。
←将来的には音声コマンドで動くようになるそうです。マイクがあるパソコンの方はご自宅で、ぜひ試してみてください。句読点は無理ですが、なかなか正確に入力されます。 入力が苦手な人もこれからドンドンパソコンを使って様々な表現活動をするようになることを予感させます。翻訳機能などを組み合わせ、革命的に便利なツールになるでしょう。

LibreOffice4.0が出ました!   日本語版も出ていますのでインストールしてください。 ものすごく本家のホームページが凝った作りだったので御覧ください。
LibreOfficeオンラインもそのうちだとは思いますがまだ出てないようです。

前回、IEとChromeで見え方が違うということで、エクステンションにIE Tab Multi などを入れて表示を確認することを紹介しました。それだけではなく Macでも見え方が違います。 
自分の作ったホームページがマックではどう見えるのか知りたいときに、マックを持ってない時には…Adobeが提供するAdobe BrowserLabが便利です。 無料ですがAdobe IDを作る必要があります。今後のこともあるのでこの機会にAdobeに登録して、作ったブログがマックでどのように見えるのかをチェックしてみます。
ちなみに、無料のサービスでモバイル機器でも同期できる Adobe Edge Inspect というものがありますが、私は繋がりませんでした。 あると便利なもののようですが、無理しなくても自分のパソコンをサーバーに仮想させる簡単な方法をディベロッパー講座で教えますので、それでやれば大丈夫です。

Body font の問題を考えてみます

上のプレビューで見ると全体的に使われているフォントがマックとIEで微妙に違うことがわかります。こういう問題を解決するのをCSSハック(HACK)と言います。 

body のフォントファミリーの指定は…

body { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", sans-serif; "}

このように↑指定するのが、わりと最近の流行りのサイトで文字が今風になるようですが、この方のように完璧を期したいという方は…

/* 通常指定 */
body { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", sans-serif; }

/* Safari・Chrome用指定 (マックの人が使ってる)*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; }
}

ブラウザのボディフォントの問題はそれが違うと全体的な印象がすべて違って見えるため、大変奥が深いのですが、そんなに最初から張り切ることはできませんのでおいおい研究していかれたらいいと思います。
ちなみに本来はこちらのJavaScriptで分岐するのが本筋です。これについては次回に教えます。

ただBloggerの場合 和文フォントを指定することができないためなんらかの指定をしておいた方がきれいです。(別になくても読めますけどね!)


文字の種類が違って見えることより問題が大きいのは、スペースのサイズが違うことがあるということです。
 トップの画像の位置がIE8は開きすぎていてしまりがないと思います。これをハックする方法を考えます。
/*トップのタイトル画像の下の空間をつめました */ .widget-content img{margin-bottom:-35px;} /* IE 8 and below */ .widget-content img{margin-bottom:-49px\9;margin-top:-30px\9;}

↑ このようにブログのデザインひとつとってみても、ブラウザごとにいろいろ不具合が出るのを調整することでより完璧なものになります。 だいたいまだ多い IE9 と IE8 で見ておくといいと思います。 IE tab とマルチタブをそれぞれ違うIEのバージョンで入れておくと便利でしょう。 便利なツール IE テスター(無料)

今日は後半は こちらのブログのカスタマイズ内容をご紹介して、皆様で自分のブログをこだわりの作品にしていただきたいと思います。 背景画像は透明化で作り、あえて下書きのままのページにアップして表示させております。
/* 影をつける */
h3{text-shadow:
2px 2px 3px #000080;} /* ボディ指定 */ /* 通常指定 */ body { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", sans-serif; } /* Safari・Chrome用指定 */ @media screen and (-webkit-min-device-pixel-ratio:0) { body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; } } /*トップのタイトル画像の下の空間をつめました */ .widget-content img{margin-bottom:-35px;} /* IE 8 and below */ .widget-content img{margin-bottom:-49px\9;margin-top:-30px\9;}
/* あえてブログの説明を消している */ div.descriptionwrapper{visibility: hidden;height:0px;} /* メニューの背景画像 */ .widget-content li{background-image:url(http://1.bp.blogspot.com/-_GLPrqyfAPo/URA1N9ub-pI/AAAAAAAACw4/QmSuCfSu168/s1600/back.png);}
/* トップのコメント */ .topmessage{
text-align:center;letter-spacing:3px;background-image:url(http://1.bp.blogspot.com/-_GLPrqyfAPo/URA1N9ub-pI/AAAAAAAACw4/QmSuCfSu168/s1600/back.png);} .topmessage h1{font-size:10pt;font-weight:normal;} #PageList1{margin-bottom:-30px;background-image:url(http://1.bp.blogspot.com/-_GLPrqyfAPo/URA1N9ub-pI/AAAAAAAACw4/QmSuCfSu168/s1600/back.png);} /* トップ全体に透明の背景画像 */ .tabs-outer{background-image:url(http://1.bp.blogspot.com/-_GLPrqyfAPo/URA1N9ub-pI/AAAAAAAACw4/QmSuCfSu168/s1600/back.png);} .tabs-outer{margin-bottom:-50px\9;} /* トップのタイトルの空間をつめました */ .header-outer{margin-top:-14px;} h1.title{letter-spacing:3px;padding-left:7px;} .footer-outer{background-image:url(http://1.bp.blogspot.com/-_GLPrqyfAPo/URA1N9ub-pI/AAAAAAAACw4/QmSuCfSu168/s1600/back.png);}

尚、時間があまる人は、こちらの記事を見て、トップページにだけ画像を表示させるハックをほどこしてみましょう。