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