retina非対応
retina対応
上の二枚の違いがわかるか否かはご利用の環境に依存すると思います。
iMacRetina5Kで見ると「こんなに違うのかぁ！！((((；ﾟДﾟ)))))))」となると思います。(=ﾟωﾟ)ﾉ
Windowsパソコンで見ると・・・試していないけど違いはわからない可能性大。(ー’`ー ; )
retina対応とは？
©︎すしぱく
これは・・・対Appleユーザだけにしか関係ないのかな？(･ ･?)
Appleデバイスの多くは搭載しているディスプレイを「retinaディスプレイ」と呼んでいます。
「retina=網膜」です。人間の目が識別できるより解像度が高いと主張しています。
代表的なデバイスは
- iPhone
- iPad
- MacBookの一部
- iMacRetina5K
でしょうか。Macは上位機種だけで普及価格帯の物は非対応だったと思います。（2017年01月現在。画面が大きいのでコスト的に厳しいのでしょう。）
この高精細な画面で従来のブログを閲覧すると・・・文字も画像も小さすぎて見難い・・・ハズ。
そこで、retina対応のデバイスではコンテンツを作成者指定の倍の大きさで表示しています。その分フォント等を高精細にして。
画像も対象です。
しかし、ここで問題が発生します。(=ﾟωﾟ)ﾉ
「フォントはベクター形式なので倍の解像度で表示すれば良いけど・・・画像はコンテンツ作成者が配置したファイルの解像度より高精細にはできない。」
800pxの画像ファイルは800pxより高精細には表示できないのです。Webで一般的なjpegやpngはラスター形式ですから。
画像に関しては、コンテンツ作成者がretina対応デバイスで表示される事を想定して倍の解像度のファイルを用意しておく必要があります。800pxで表示される想定なら1600pxのファイルが必要です。
このコンテンツ作成者の作業を便宜上「retina対応」と呼んでいます。(=ﾟωﾟ)ﾉ
レスポンシブデザインだと簡単
©︎すしぱく モデル：河村友歌
従来のブログだと倍の解像度の画像ファイルを配置するだけでは表示が崩れたと思います。
1600pxの画像を挿入するとwidth:1600pxで指定されて、ブラウザが1600pxの幅で表示しようとするからです。
そこで「画像を挿入した後、手作業でwidth:800pxに書き換える。」という泥臭い作業が必要になります。htmlの知識が必要です。CMSを使っている意味ないです。(ー’`ー ; )
しかぁし！！時代は変わりました。(=ﾟωﾟ)ﾉ
レスポンシブデザイン。
事実上静的なWebにしか適用できない扱いの難しいデザインパターンですが、retina対応とは相性が良いです。
レスポンシブデザインでは、デバイスのスクリーンサイズに合わせてコンテンツをブラウザがリサイズして表示します。
表示領域の横幅をCSSで800pxに指定しておけば、1600pxの画像を挿入しても800pxで表示されます。
横幅が800px無いデバイスで表示した場合は、画像が縮小されて表示されます。
レスポンシブデザインの導入は大変ですが、導入してしまえばretina対応は終わりです。
CMSから解像度倍の画像を挿入するだけでretinaディスプレイでも普通のディスプレイでも適切な解像度で表示されます。(=ﾟωﾟ)ﾉ
問題はサーバのストレージ
©︎すしぱく
「レスポンシブデザインを導入して解像度倍の画像を使えば解決。」
技術的にはそうなのですが・・・現実的な問題が残っています。
画像ファイルの解像度が倍って事は・・・単純計算だとファイルサイズは4倍です。
サーバのストレージ容量が厳しいです。(ー’`ー ; )
無料のブログサービスを使っている人はあっという間にパンクするでしょう。
有料サーバを借りてブログ運営している人も、心配になって将来の予測値を電卓弾いて確認する事になるでしょう。
そこでflickrの登場です。(=ﾟωﾟ)ﾉ
米Yahoo!に買収されたインターネット写真公開サイトです。
買収されたり、米Yahoo!の官僚的な体制を嫌ってスタートアップメンバーが辞めてしまったりと紆余曲折を経たサービスですが、現在では画像公開ストレージとして一級品のサービスに仕上がっています。（2017年01月現在）
- 1TBまで無料で使用可
- 画像埋め込み用コードを取得できる
- 外部ソフトからAPIを経由して画像を取得できる
ﾌﾑﾌﾑ…(*ﾟｰﾟ)(*｡_｡)ﾅﾙﾎﾄﾞ…
「外部サービスを使うという事は、そのサービスが何らかの理由で廃止されるとブログも表示できなくなる。」というリスクを抱える事になりますが・・・お財布との相談でしょう。
アカウントの作成方法や画像のアップロード方法はこの記事では触れません。「flickr」をキーワードにググっても良いですし・・・英語のサイトだという点を除けば簡単に扱えるサービスなのでまずは触ってみるのが一番近道でしょう。百聞は一見に如かず。
この記事ではブログに画像を挿入する方法についてのみ紹介します。
flickrにアップロードした画像をブログに挿入する方法
汎用的な方法
flickr画面右下の共有ボタンを押下
挿入したい画像の画面の右下に共有ボタンがあります。これをクリックしてください。
画像共有画面に遷移します。
「Embed」タブを開いて埋め込みコードをコピー
「Embed」タブを開いて埋め込みコードをコピーし、ブログに貼るだけです。赤枠で囲ってある場所がポイントです。
ブログに貼り付けるとこの様に表示されます。
WordPressの場合
FlickrPressというプラグインを使って記事エディターから直接挿入できます。
プラグインの設定が少し大変です。説明してくださっているサイトがたくさんありますのでググってください。キーワードに「FlickrPress」「wp-flickr-press」「設定」あたりを指定してみてください。
FlickrPressという名称のプラグインですが、WordPressには「wp-flickr-press」という名称で登録されています。ここハマりポイントです。(=ﾟωﾟ)ﾉ
以下に画像挿入手順を示します。
設定画面で予め画像サイズを指定
WordPressの管理画面から「設定→FlickrPress」で設定画面に入れます。
導入時にこの画面でflickrとの接続設定をしたハズです。
画像サイズを指定する場所があるのでブログの横幅の倍の大きさを選んでおきます。
このブログは横幅800pxなので1600pxを指定しています。
記事エディターでFlickrPressボタンを押下
FlickrPressをインストールすると赤枠で囲ったボタンが記事エディターに追加されているハズです。設定を済ませてあれば使えるハズです。（インストールしただけでは使えません。）
記事エディターで画像を挿入したい場所にカーソルを置いて、このボタンを押下してください。
「flickrメディアを追加画面」で画像を選択して「一括挿入」ボタンを押下
一つしか画像を選択していない場合も「一括挿入」ボタンです。
違和感がある？すぐ慣れます。(=ﾟωﾟ)ﾉ
この様に画像が挿入されます。
導入は大変だが運用は楽
大変なのは導入時の設定だけです。
- レスポンシブデザイン（無料のブログサービスだと対応していない所もあり？）
- flickrを使った運用手順の決定
この二つをクリアすればretina対応完了です。(=ﾟωﾟ)ﾉ
しかしflickrを使っても無限にストレージを使える訳ではありません。
- 高精細で見て欲しい画像
- 普通の解像度で十分な画像
は区別して、使い分けた方が良いかもしれません。
この記事では
- 写真はflickrにおいてretina対応で表示
- スクリーンショットやアイキャッチ画像はブログをホストしているサーバに置いてretina非対応
と使い分けています。