さくらのブログでRetinaディスプレイは対応できるのか？

さくらのブログサポートチームからのRetinaディスプレイの問い合わせでの回答はこうでした。（私なりに簡単に変換しています）

<body>へのタグの入力ですとHTML編集でできます。HTMLやCSSの個別のブログカスタマイズはサポートの対象外となります（抜粋）。

このような内容で、さくらのブログサポートチームから返信いただきました。

要するに、明確な回答はありませんでした。
ならば、自分で検証あるのみです。

さくらのブログサポートチーム様、返信ありがとうございました。

【retina.js】をアップロードしてみる

公式サイトRetina.jsからzipファイルをダウンロードして、ファイルアップロードでretina.jsファイルをアップロードする。

次にテンプレートの設定>htmlの編集で</body>の直前に
<script type=”text/javascript” src=”/scripts/retina.js”></script>
を書き込むのだが、アップロードされるフォルダーがはっきりしない。

それならと、画像ファイルのURLから探ってみる。
でも、画像ファイルの保存先は判明するが、対応できないようだ。
それもそうか、納得してretina.jsはあきらめる。

【img要素srcset属性を試してみる】

htmlのバージョンを確認してみる。
まだ、あきらめるつもりはない。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

なるほど、XHTML1.0で書いている。
img要素srcset属性が動くかもしれない？
（XHTML1.0にはのっていなかった）

画像ファイルを２種類用意します。

例：gazousmall.jpg サイズ100x100pixelとgazoubig.jpg サイズ200x200pixel

ふたつのファイルをファイルアップロードしてください。

小さい画像（gazousmall.jpg）を追加してみると、

<a href="http://あなたのID.sakura.ne.jp/sblo_files/画像ファイル名.jpg" target="_blank"><img src="https://あなたのID.sakura.ne.jp/sblo_files/画像ファイル名.jpg" alt="表示できない時の画像表示.jpg" width="サイズ" height="サイズ" border="0" /></a>

このように表示されます。

ここにsrcset属性を追加します。

<img src="http ://あなたのID.sakura.ne.jp/sblo_files/gazousmall.jpg" alt="表示できない時の画像の説明" border="0" width="サイズ" height="サイズ" />

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<imgsrc="あなたのID.sakura.ne.jp/sblo_files/gazousmall.jpg"srcset="あなたのID.sakura.ne.jp/sblo_files/gazousmall.jpg 1x,http://あなたのID.sakura.ne.jp/sblo_files/gazoubig.jpg 2x" alt="表示できない時の画像の説明" border="0" width="サイズ" height="サイズ" />

最後までお疲れ様でした。

これで完成です！！

さあ、Retina対応ディスプレイで確認しましょう。

Retina対応ディスプレイ一覧