上の二枚の違いがわかるか否かはご利用の環境に依存すると思います。iMacRetina5Kで見ると「こんなに違うのかぁ!!((((;゚Д゚)))))))」となると思います。(=゚ω゚)ノWindowsパソコンで見ると・・・試していないけど違いはわからない可能性大。・?)Appleデバイスの多くは搭載しているディスプレイを「retinaディスプレイ」と呼んでいます。「retina=網膜」です。人間の目が識別できるより解像度が高いと主張しています。代表的なデバイスはiPhoneiPadMacBookの一部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!の官僚的な体制を嫌ってスタートアップメンバーが辞めてしまったりと紆余曲折を経たサービスですが、現在では画像公開ストレージとして一級品のサービスに仕上がっています。画像埋め込み用コードを取得できる外部ソフトからAPIを経由して画像を取得できるフムフム...(*゚ー゚)(*。)ナルホド...「外部サービスを使うという事は、そのサービスが何らかの理由で廃止されるとブログも表示できなくなる。」というリスクを抱える事になりますが・・・お財布との相談でしょう。アカウントの作成方法や画像のアップロード方法はこの記事では触れません。「flickr」をキーワードにググっても良いですし・・・英語のサイトだという点を除けば簡単に扱えるサービスなのでまずは触ってみるのが一番近道でしょう。この記事ではブログに画像を挿入する方法についてのみ紹介します。挿入したい画像の画面の右下に共有ボタンがあります。これをクリックしてください。画像共有画面に遷移します。「Embed」タブを開いて埋め込みコードをコピーし、ブログに貼るだけです。赤枠で囲ってある場所がポイントです。ブログに貼り付けるとこの様に表示されます。WordPressの場合FlickrPressというプラグインを使って記事エディターから直接挿入できます。プラグインの設定が少し大変です。説明してくださっているサイトがたくさんありますのでググってください。キーワードに「FlickrPress」「wp-flickr-press」「設定」あたりを指定してみてください。FlickrPressという名称のプラグインですが、WordPressには「wp-flickr-press」という名称で登録されています。ここハマりポイントです。(=゚ω゚)ノ以下に画像挿入手順を示します。設定画面で予め画像サイズを指定WordPressの管理画面から「設定→FlickrPress」で設定画面に入れます。導入時にこの画面でflickrとの接続設定をしたハズです。画像サイズを指定する場所があるのでブログの横幅の倍の大きさを選んでおきます。このブログは横幅800pxなので1600pxを指定しています。記事エディターでFlickrPressボタンを押下FlickrPressをインストールすると赤枠で囲ったボタンが記事エディターに追加されているハズです。設定を済ませてあれば使えるハズです。(インストールしただけでは使えません。)記事エディターで画像を挿入したい場所にカーソルを置いて、このボタンを押下してください。一つしか画像を選択していない場合も「一括挿入」ボタンです。違和感がある?すぐ慣れます。(=゚ω゚)ノこの様に画像が挿入されます。大変なのは導入時の設定だけです。レスポンシブデザイン(無料のブログサービスだと対応していない所もあり?)flickrを使った運用手順の決定この二つをクリアすればretina対応完了です。(=゚ω゚)ノしかしflickrを使っても無限にストレージを使える訳ではありません。普通の解像度で十分な画像は区別して、使い分けた方が良いかもしれません。この記事では写真はflickrにおいてretina対応で表示スクリーンショットやアイキャッチ画像はブログをホストしているサーバに置いてretina非対応と使い分けています。ついてある時はフォトグラファー、またある時はブロガー。blog関連記事コメントする際はまず運営ポリシーをご確認ください。コメントデータの処理方法の詳細はこちらをご覧ください。広告サイト内検索Profileある時はフォトグラファー、またある時はブロガー。S100ポートフォリオ作品はPinterestにまとめてあります。カメラマンやってます。blogを購読する方法お問い合わせ。