はてなブログさんはまだブログを作成していなかったので検証からはじめました。
【retina.js】をアップロードしてみる
公式サイトRetina.jsからzipファイルをダウンロードして、ファイルマネージャーでretina.jsファイルをアップロードする。
はてなブログのアップロードは写真画像のみ。
Retina.jsのアップロードはできません。
【img要素srcset属性を試してみる】
htmlのバージョンを確認してみるが、そもそもテンプレートの編集が存在しない。
タグを入力して試してみるしかなさそうだ。
画像ファイルを２種類用意します。
例：gazousmall.jpg サイズ100x100pixelとgazoubig.jpg サイズ200x200pixel
ふたつのファイルをファイルアップロードしてください。
小さい画像（gazousmall.jpg）を追加してみると、
<img class="hatena-fotolife" title="f:id:あなたのID" src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/あなたのID/gazousmall.jpg" alt="" /a>
このように表示されます。
ここにsrcset属性を追加します。
<img class="hatena-fotolife" title="f:id:あなたのID" src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/あなたのID/gazousmall.jpg" alt="" /a>↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<img class="hatena-fotolife" title="f:id:あなたのID" src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/あなたのID/gazousmall.jpg" srcset="http://cdn-ak.f.st-hatena.com/images/fotolife/t/あなたのID/gazousmall.jpg 1x,http://cdn-ak.f.st-hatena.com/images/fotolife/t/あなたのID/gazoubig.jpg 2x" alt="" />書き換えました。
それでは保存します。
画像チェックをしてみます。
Retina対応ディスプレイ一覧
- iPhone4以降
- iPad（第３世代以降iPad Airを含む）
- iPad mini2以降
- MacBook Pro（2012年6月以降）
- iMac Retina 5Kディスプレイモデル
- Android（フルHD解像度のフラッグシップモデル）
- Windows8.1と4Kディスプレイ
Retinaディスプレイ用の画像が表示されません。
どうしてでしょうか？
記事の管理画面にはいって編集画面で確認します。
書き換えて保存した記述と保存後の記述が違っています。
これはどういうこと？
もう一度書き換えて保存してみます。
結果は同じ。
保存後の記述が書き直されています。
img srcsetには対応しないのですね。
はてなブログはRetinaディスプレイに対応できるのか？のまとめ
retina.jsにもimg srcsetにも対応しない事が判明しました。
これ以上の深追いはしません 🙁
はてなブログとは、、、
株式会社はてなが提供するブログサービス。株式会社はてなは、主にナレッジコミュニティサービス「人力検索はてな」やブログホスティングサービス「はてなダイアリー」、ソーシャルブックマークサービス「はてなブックマーク」などの開発・運営を日本で行なっている企業である。出典Wikipedia
別サイトでワードプレス講座開催中。
