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のバージョンを確認してみる。
まだ、あきらめるつもりはない。

 

 

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

 

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

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

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

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

 

 

 

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

 

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

 

 

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

 

 

 

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

これで完成です！！

 

 

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

Retina対応ディスプレイ一覧

• iPhone4以降
• iPad（第３世代以降iPad Airを含む）
• iPad mini2以降
• MacBook Pro（2012年6月以降）
• iMac Retina 5Kディスプレイモデル
• Android（フルHD解像度のフラッグシップモデル）
• Windows8.1と4Kディスプレイ

 

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

 

管理人亘が推奨しているretina.jsの対応は無理でした。
しかしながら、img要素srcset属性のタグで対応することができます。
ファイルのURLをファイルアップロードで確認して変更することで対応できます。

 

1. 画像ファイルを２種類（大小）用意します。
2. 画像ファイルを２種類（大小）をファイルアップロードします。
3. 画像ファイル（小）で記事に挿入します。
4. 画像ファイル（大）のURLをファイルアップロードで確認してコピーします。
5. 3の挿入した画像ファイルのhtmlにsrcsetを追加します。

 

あなたのFC2ブログも今回の作業でRetinaディスプレイに対応できました。

不明な点はお問い合わせください 😀

 

 ※参考
FC2に各種公式プラグインや共有プラグインがありますが、Retinaに関するプラグインはありませんでした（2015年1月現在）。

 

FC２ブログとは、、、

FC2（エフシーツー）は、アメリカ合衆国ネバダ州ラスベガスに本社を置く、Webサービスおよびホスティングサービスを展開する企業。日本を中心に事業展開を行なっている。社名のFC2は「ファンタスティック・クピ・クピ」の略であるとしている。出典Wikipedia