もらったタミフルも今日まで、ということで、リハビリもかねて起きてることにしました。
でも、こういう日に限って眠いんだよなぁ。
昨日パソコンにかじりついていたせいだろうな。
連れはオカリナの本番その他もろもろで朝からでかけていました。
で、ちょっと遅くなってからマックダナーで昼。
なんか、今日はやたら混んでいたなぁ。なんかあったんだろうか?
パソをいじりながら、大量にジャスミン茶を飲んでいました。それこそがぶがぶと。お茶が熱かろうが、あるとどんどん飲んでしまうので、次から次へと注ぎなおしてると、がんがん飲むことになってしまうのでした。まぁ、ちょっとカフェインが補給できたからいいか?
で、結構遅くなった時点ではたと。
お茶飲みすぎて腹が減らないし。
というか、なんか口にするのもいやだ。
それでも、しばらくしてから、家にあったパスナックを2本ほど食べて、それで薬を飲んだのでした。
ふう。
昨日に引き続きサイトの更新作業。
結局、background-imageについてはあきらめました。
多分、色々と読み込むときのタイミングとか、ブラウザでの処理の仕方とかの問題なんだろうな。一応、本では対応されていることになっているのですが、それがうまくいかないというのは仕様の他に原因があるに違いない。
それから、延々とWEB Fontをいじってました。
当初、Googleのを使おうと思ったのですけど、Googleって予告なしにサービスを停止する可能性があるので、フォントを手元に置いておきたかったんですよね。
ギリシャ文字とキリル文字については、それぞれ別のCharis SILというFreeのFontを落としてきました。ライセンスはOFL (Open Font License)で、ライセンスのFAQにもWEBフォントとしての使用について問題ないことが書いてありました。ttfフォントです。
アラビア文字については、Amiri Fontという、これまたOFLのフォントを落としてききました。こちらはいくつかのフォーマットのフォントが同梱されていたのですが、woffフォントを使うことにしました。
CSSでフォントを設定するためには以下のようにします。
/*cyrilyc font*/
@font-face {
font-family: CharisSIL-R;
src: url(../fonts/CharisSIL-R.ttf);
}
.cyr {
font-family: 'CharisSIL-R', sans-serif;
}
そして、使いたいテキストをspanかなにかで囲ってやって、classに上の.cyrを指定してやればOKです。(.cyrというのは適当に決めたclass名なので、適当に変えてみてくださいませ。)
なにせ、Windowsに普通に入っているキリル文字とかギリシャ文字は全角文字になっているので、かなり見栄えが悪いんですよね。それを上記の方法でくくってやるとかなり見栄えが変わります。
処理は遅くなるんですけどね。
様子を見て、よさそうだったら、この日記で時々使うそれらのフォントについてもWEB Fontにしようかなぁ。
でも、やっぱり遅くなるんだろうなぁ。
その時点でタイトルヘッダー部分しか実装できてなかったので、後半の整理もしました。
H2タグとH3タグが乱れ状態になっていたのを、H1タグとH2タグに整理して、プロパティーはCSSで制御するように変更。
HRタグとか入っていたところも、borderで制御するようにできるだけ変更。
参考書を元に、あとでスマフォ対応にできるように全体の幅も固定。(これはあとで戻すかもしれないなぁ。)
まぁ、大体見られるようになったんじゃないかなぁ。
サイトの名称についての説明と未完の本の情報と、それからリンクのページもいじりました。
リンクのページは悪夢でした。
自分で作っておきながら、かなり見難いコーディングになっていたものですから。
ばっさりと構成を見直しました。
これで表示上もすっきりしたんじゃないかな。
ローカルでのテストは大丈夫っぽかったので、みんなアップロード。
鬼門はやっぱりスマフォでの表示。
前回いじったときは、結局JavaScriptでスマフォやタブレットを判別して別のindexに飛ばすということにしたのですが、今回はhtml側の制御で表示幅を見てCSSを切り替えるという方法を試してみたんです。
ところが、ちゃんと表示されないんですよね。
どうにも、ヘッダー部分にあるタイトル画像が悪さしてるようで。
CSSの設定で不可視にしようとしたんですけど、どうやってもできないんです。
結局、色々と試した結果、これもCSSやらWEB FontやらJavaScriptやらの読み込むタイミングのせいで、表示幅の制御がうまくいかずおかしなことになるのではないかと推測して、これまた放置。
JavaScriptで切り替える方式に戻しました。ただこちらもCSSをいじっているので、表示はおかしくなりますけど。
結局、どっちにしろスマフォ系では普通のアンダーラインが入ったリンクとかは使いづらいということらしいので、デザインを根本的に見直さないといけないだろうから、まぁ当面はこのまま放置しておきましょう。
となると、あと残っている大きな課題はやっぱりメルフォだなぁ。
今度はいつ時間を取れるようになるかなぁ。
まぁ、それはともかく、トップページをかなりいじってありますので、良かったらのぞいてみてください。
一応、FirefoxとIE 9では表示を確認してますが、他でどうなるかわかってないもので。
IE 8で互換表示できるようにするためのjQueryも入れてあるので、XPでも一応は見えるようになってる、はず、なんですけどね。