件のコメント他のブログサービスではレスポンシブイメージがサポートされたという話も聞きますが、Bloggerはどっしり構えて昔のまま。GoogleはBloggerに力が入っていないので、多分このままサポートされないでしょう。いうわけで自力で試してみましたが、難しさが身にしみました。大変な理由を以下に書いてみます。Safariなどのブラウザごとに少しずつ表示のされ方が異なります。Chromeなどはリロードを何度か繰り返すと、異なるサイズのイメージが選ばれたりします。非モバイル系で目立つようで、むしろモバイルの方が状況が良さそうに思えます。sizes属性のHTMLを生成するツールを自作する必要があります。前者は特別に一つの記事だけというならありですが、常時やりたい時にはツールを作るしかないでしょう。後者については、それほど複雑ではないので、プログラミングをかじったことがある方なら難しくないと思いますが、ブログの文章を書くだけでレスポンシブイメージにしたい、という方には道がありません。他のテンプレートへの変更が困難になるここまでの2つは越えられない山ではありません。最後の難物がこの「テンプレート」というブログのシステム。話が少々細かくなるので端折って書くと、完全にレスポンシブイメージにしようとすると、特定のテンプレートにロックインされてしまい、他のテンプレートへの乗り換えが非常に難しくなります。以下に説明とゆる〜い回避策を書きます。sizes属性でのレスポンシブイメージ(サイズ変更だけ)の記述は、例えば以下のようになります。/>問題は、sizesとして画面幅に応じて変わる表示幅(赤字の部分)の記述が必要なこと。ブログの場合テンプレートがそれを決めているので、一般人にはなかなかうかがい知ることができません。テンプレートのソースを見たり、画面幅を変えていった時の変化から知ることはできますが、それを記事のコードに埋め込むということは、そのテンプレートに依存したHTMLソースになってしまうということ。テンプレートを変えるときには記事すべてを修正することになり、現実的にほぼ不可能になってしまいます。(これまたツールを書けば対応できそうですが。)回避方法これを回避するには、大雑把でよければ以下の方法があります。ビューポート幅の100%)として画像を選ぶようにします(sizes="100vw")。これは、srcsetとsizesは、複数の画像のサイズと表示幅をヒントとしてブラウザに教える仕組みであって、画像の表示幅を直接指示する仕組みではないことを利用しています。(それはstyleの役目。ブラウザの挙動がまだ怪しいこともあり、レスポンシブの場合でも、写真のサイズを揃えて並べたい時などは積極的に使うべき。)おおよそこれでいいのはなぜ?ネットワーク帯域にシビアなモバイルでは、ブログは1カラム表示になるのが一般的ですから、テンプレートが指定する表示幅はほぼブラウザの画面幅と同じです。したがって選ばれる画像も同じあるいは大差ないものになるので、データ転送量への影響はほぼないと言えます。問題は2カラム以上あるいは多数のサムネイル表示の場合。小さい画像でいいのに画面幅いっぱいを前提とした画像を指定することになります。それらのレイアウトはモバイルではなくPCで表示される場合がほとんどで、ネットワーク帯域は十分なことが多いでしょうから、多少大きな画像が選ばれたとしても問題にならないケースが多いと推測されます。うん、いちおうモバイル重視ですね。sizes="100cw"のように、ビューポート幅単位(vw)ではなくクライアント領域幅単位(cw:こんなのはありません)での指定ができれば、テンプレート非依存にできそうです。速攻で画像をWebサーバーに要求してしまうため、これは成立しません。残念!2016年2月時点では、上記のような面倒さと、ブラウザのサポートにやや不安があることから、以前ご紹介したようにjavascriptで実現する方が良さそうです。縦長の写真にimg,srcset,sizesを使う場合の記述方法ところで、レスポンシブイメージの説明はいつも横長(ランドスケープ)の写真がサンプルに使われます。新しいimgでは、srcset,sizesが加わるので、なかなか混乱します。一つずつ整理しながらみていきましょう。styleの3つです。このうち、srcsetとsizeがイメージの選択に関わるもの、styleが表示そのものに関わるものですので、明確に分けて考える必要があります。しないと頭がぐちゃぐちゃになります。表示に関してはstyleが全てを握っています。どのイメージを選択したとしても、結局表示幅はstyleで決まります。縦横に限らずいろいろなアスペクト比の写真が混在する場合は、長辺のサイズを同一にするのがバランスよく見えます。ランドスケープとポートレートの写真、どちらもブログの幅いっぱい(width:100%)に表示されると、ポートレートの写真が異様に大きく見えますからね。全部スマホの縦位置で撮った写真ならここまで気を使う必要はなく、みな同じく幅100%で良いでしょうけど、一般にはそうではありません。したがって、styleに関しては、アスペクト比2:3の場合を例にとると、以下が良いでしょう。66%は比率、横/縦です(※ランドスケープの場合も考慮すると100%が上限)。66%"次に、styleで指定したサイズに最もフィットする解像度のイメージを選択するようsrcsetとsizesの記述を決めます。これもアスペクト比に設定styleでwidthを66%にしたのであれば、それが表示される幅の上限になります。sizesはビューポートに対するイメージ幅の比率ですから、上限はほぼそれに等しくなると考え、やはり66%が良いでしょう。シンプルにファイルのパスとイメージの幅を書く最後にsrcset。ここには表示に関するパラメーターは存在せず、イメージのサイズに関する情報があるのみです。したがって、ストレートにイメージのファイル名とその幅をペアにして記述していくだけです。通常の場合と同じですね。Bloggerのケースさて、これだけだと少々実践的でないので、Bloggerでイメージを扱う場合の方法と組み合わせて見てみましょう。API経由でサイズを自由に変えられます。試しましたが、オススメなのは以下の方法。■イメージのサイズは"s"で指定する。"w"や"h"も使えるが、長辺のサイズを揃える観点からは、ここは"s"にしておけば、それに続く値も固定にできてわかりやすいです。■そして、イメージのパスに続くサイズは"w"限定ですから、ここをアスペクト比に従って変えてやります。アスペクト比2:3の写真を長辺の指定200(/s200/)とするなら、対応する幅は200*2/3=132、となります。ここまでの設定を全部まとめると以下のようになります。/>冷静に考えるとまあそうかなという感じでした。※繰り返しになりますが、本記事の方法は、あくまでモバイルが1カラム表示で、表示領域幅がほぼブラウザ幅に等しいことが前提です。ご自身のテンプレートに依存しますので、ご注意ください。縦長の場合はsizesとstyleのwidthを×アスペクト比すれば、同じ効果が得られるはず、です。DMaaチューニング完了!開放型ヘッドフォンのHD6XX、自然な音場と聴き疲れしない音はとても良いのですが、どうも解像度というかクッキリ感が足りない感じ。MkIIを常用しているため、一層その感が強くなります。Sierraのアップデートが出ていたのでインストールしました。大きくなかったような気がしたのですが、再起動して30分以上かかりました。今日も雨で走れません。XDP-100RやTD-M1で音楽を聴きつつ読書の休日、晴走雨読です。ハイレゾプレーヤーXDP-100Rのメニューにデジタルフィルターが3種類あるんですが、明確な説明が見当たりません。:MassdropでHD6XXの新たな購入受付がスタート。今度は+$15で日本にも発送してくれます。興味のある方はこちらから見られます。11.2Mhzが¥1,575。:二子山に登ってきました。最近、奥秩父の岩山、(小鹿野の)二子山に行ってみたいな〜と思うようになりました。焼き芋にして美味しいさつまいもの品種はいろいろありますが、それらの関係がどうなっているのだろうと思ってインターネットで調べてみました。系統図(家系図?)がないようなので、ここ数年私が美味しかったと思うもの中心に系統図にしてみました。(※クリックで拡大します)MacでFLACとDSDを聴けるフリーソフトMacのiTunesはミュージック管理ソフトとして秀逸ですが、残念なのがFLACとDSDを管理・再生できないこと。車のガラスコーティング剤ピカピカレインプレミアムって本当に効果があるの?最近車のワックスがけが面倒になってきました。何かいい手がないかとネットを探したら、ワックスよりもコーティング剤が簡単なよう。モノによっては硬い被膜で数年間手入れいらず、という謳い文句のものまであります。BitPerfectを使っていました。