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

FC2からのRetinaディスプレイの問い合わせでの回答はこうでした。
（私なりに簡単に変換しています）

アップロードされている画像をRetinaディスプレイに対応させる手順は弊社では適切なご案内ができません、ネットで検索すると該当の検索がたくさんあるので、そちらを参考にどうぞ（抜粋）。

このような内容で、FC2事務局から返信いただきました。

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

FC2事務局様、返信ありがとうございました。

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

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

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

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

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

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

<!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">

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

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

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

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

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

 <a href="http ://あなたのID.blog.fc2.com/img/gazousmall.jpg/" target="_blank"><img src="http ://blog-imgs-***.fc2.com/*/*/*/あなたのID/画像ファイル名.jpg" alt="表示できない時の画像の説明" border="0" width="サイズ" height="サイズ" /></a>

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

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

<img src="http ://blog-imgs-***.fc2.com/*/*/*/あなたのID/smallgazou.jpg" alt="表示できない時の画像の説明" border="0" width="サイズ" height="サイズ" />

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

<imgsrc="http ://あなたのブログURL/imagefile/gazousmall.jpg"srcset="http://あなたのブログURL/imagefile/gazousmall.jpg 1x,http://あなたのブログURL/imagefile/gazoubig.jpg 2x" alt="表示できない時の画像の説明" border="0" width="サイズ" height="サイズ" />

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

これで完成です！！

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

Retina対応ディスプレイ一覧