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

 

 

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

 

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

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

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

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

 

 

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

 

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

 

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

 

 

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

これで完成です!!

 

 

さあ、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をファイルアップロードで確認して変更することで対応できます。

 

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

 

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

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

 

 ※参考
さくらのブログはさくらインターネットのレンタルサーバー利用者がつかえるブログです。
無料ブログと違い画像ファイルをftpでアップロードすることが可能です。

 

さくらのブログとは、、、

SeesaaブログのASPサービスである。同社では自社のブログエンジンをASPとして販売している。So-net、オリコン、さくらインターネットなどのブログで導入実績があり、管理画面や一部のシステムでSeesaaのシステムが使われている。出典Wikipedia

 

更新を 続ける糧は コメントだ
あなたからのひとことをお待ちしています。

お探しの画像は見つかりましたか?
他にもこんな画像もございます。

ビジネス素材風景花

空事務用品 お金 その他