少し寝たら頭すっきりしたので忘れないうちに更新。

スマホ替えて以来更新してなかったけど、やーっと忍者ブログ公式アプリをインスコしたので、フリック入力の訓練も兼ねてぽちぽち更新しています。

これに伴いスマホ向けのテンプレートもようやっといじった。やろうやろうと思ってはいたのに取りかかるまでが長かったよ。先日体調不良でひるま寝てて暇だったのがきっかけで着手できた。あれがなかったらまだ放置してたと思う。

で先日、久しぶりにスマホからここを確認したら、かつてプラグインエリアにつっこんだCSSが息をしていなかった。ソースみにいったらなんかまた仕様がかわってたっぽい...。うろ覚えだけどOGPの設置の仕方も以前と違うような？なので新しく書き直したけどこれがまたすぐに反映されず。でも反映までのタイムラグが大きかったのは最初の一度だけで、あとは比較的快適にいじらせてもらえた。なにしろ今回は全てスマホ上で作業したので、忍者側のシステムが安定しててくれなかったら途中で放り出してたかも知れない。そのくらい面倒くさかった。

できあがったのがこちらです。
左がafter 右がbefore（忍者さんが用意してくれてるテンプレ）




　
ほんとうは各ボックスにbox-shadowつけたかったんだけど、しばらくいじってないうちに忘れてしまってて調べるのも面倒だったのと、そもそもborderの1pxも「スマホで見るとこんなに太いのかカッコ悪い」と思い始まったら、細部をいじる気がなくなってしまった。今回 font-weight:100; としてしまったので尚更 border が存在感を増して見えるのかも。参ったなぁ。なんでも細けりゃいいってもんじゃないけど、次さわるときは試しに 0.5px って指定できるのか確認してみよう。あと未だによくわかってない em って単位についても調べることだなー。



Chromeでbackgroundが粗粗な件

スマホにいれてるChromeからページを読んだときの背景画像のことなんですが。

box要素に設定したものは大丈夫なのに、なぜかbodyに敷いたものは表示がおかしい。背景が一番よくみえる最下部のキャプチャとって比較してみた↓

左が我がAndroidにプリインストールされてるSamsungのブラウザ、右がChromeでの表示です。これだとちっちゃくて見辛いかな。



なぜかポリゴンはまだちゃんと見えてるので（でもよく見ると粗い）現在のテンプレートにはこれを採用してる。ポリゴン以外はあまりに酷すぎる。もとの模様にかかわらずどうやら縦縞になるらしいw

しかしなんでかな。やはり表示速度をあげるためなのだろうか。それぞれ小さい画像なのでno-repeatは試していないけど、fixedは外してみたりもしたが結果は変わらなかった。

ちなみに自分のスマホにプリインストールされてるブラウザは『Samsung Internet for Android』ってやつのたぶん最新版で、もちろんBlink。Chromeのほうもバージョン的にBlinkのはずだし、レンダリングエンジンは関係ないのかな。

あと何か他にも書き留めたいことがあったんだけど、すっかり忘れたな...思い出したらにしよう。

---

追記：

Chromeで背景が粗い件で、ふと気づいた。
比較的まとも（↑のサムネだとわからないがすこーしだけ粗い）に表示されているポリゴンはjpgで、ほか３つはpngだた。うーん。でもヘッダーとフッターのdivに設定しているやつもpngだけど、ちゃんとしてる。これはチビの描いた絵をカメラで撮って、自分で色調変更と透過を施したものなんですが。何が違うというのだ。


あとで暇ができたら、gifでも試してみよう（恐いもの見たさ）。あとサイズも比べてみよう。

ちなみに書こうとして忘れてたこと、web font を設定したこと。まあ、後で。