さくらのブログで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のバージョンを確認してみる。
まだ、あきらめるつもりはない。
|
1 2 3 |
<?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）を追加してみると、
|
1 |
<a href="http://あなたのID.sakura.ne.jp/sblo_files/画像ファイル名.jpg" target="_blank"><img src="http://あなたのID.sakura.ne.jp/sblo_files/画像ファイル名.jpg" alt="表示できない時の画像表示.jpg" width="サイズ" height="サイズ" border="0" /></a> |
このように表示されます。
ここにsrcset属性を追加します。
|
1 |
<img src="http ://あなたのID.sakura.ne.jp/sblo_files/gazousmall.jpg" alt="表示できない時の画像の説明" border="0" width="サイズ" height="サイズ" /> |
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
|
1 |
<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対応ディスプレイ一覧
- iPhone4以降
- iPad（第３世代以降iPad Airを含む）
- iPad mini2以降
- MacBook Pro（2012年6月以降）
- iMac Retina 5Kディスプレイモデル
- Android（フルHD解像度のフラッグシップモデル）
- Windows8.1と4Kディスプレイ
さくらのブログはRetinaディスプレイに対応できるのか？のまとめ
管理人亘が推奨しているretina.jsの対応は無理でした。
しかしながら、img要素srcset属性のタグで対応することができます。
ファイルのURLをファイルアップロードで確認して変更することで対応できます。
- 画像ファイルを２種類（大小）用意します。
- 画像ファイルを２種類（大小）をファイルアップロードします。
- 画像ファイル（小）で記事に挿入します。
- 画像ファイル（大）のURLをファイルアップロードで確認してコピーします。
- 3の挿入した画像ファイルのhtmlにsrcsetを追加します。
あなたのさくらのブログも今回の作業でRetinaディスプレイに対応できました。
不明な点はお問い合わせください 😀
※参考
さくらのブログはさくらインターネットのレンタルサーバー利用者がつかえるブログです。
無料ブログと違い画像ファイルをftpでアップロードすることが可能です。
さくらのブログとは、、、
SeesaaブログのASPサービスである。同社では自社のブログエンジンをASPとして販売している。So-net、オリコン、さくらインターネットなどのブログで導入実績があり、管理画面や一部のシステムでSeesaaのシステムが使われている。出典Wikipedia
