ワードプレスの4Ｋ化（Retina化）について解説して行きます。
4Ｋ化する方法は、いくつかあります。
主だったものでは、「Retina.js」と言うスプリクトを使う方法と、
ワードプレスのプラグインを使う方法の２種類です。
プラグインは便利そうですが、動作が安定していないとの声もあり、
また解説が分かりづらいので、初めての方には敷居が高そうな感じです。
一方の「Retina.js」は安定していて、一度設定してしまえば楽なので、
ここでは「Retina.js」でのやり方を解説します。
「Retina.js」の仕組みは？
まず最初に、「Retina.js」がどうやって画像を4Ｋ化させるかを簡単に
解説します。
「Retina.js」はＪａｖａスクリプトと言うプログラムの一種です。
この「Retina.js」は、通常の画像とRetina用の縦横がそれぞれ2倍の
画像を用意します。
（例：150×150ピクセルと300×300ピクセルなど）
最初は小さい方の画像を読み込みますが、この時に「Retina.js」の
プログラムがディスプレイの解像度をチェックします。
この時に、ディスプレイがRetinaディスプレイだった場合、
300×300ピクセルの画像を自動的に読み込んでくれるのです。
これで相手のディスプレイに合わせて自動的に画像を表示して
くれるんですね。
では、実際に「Retina.js」の設定を始めましょう。
4K/Retina 用の画像ファイルを用意しましょう
「Retina.js」では、画像はサイズ違いで2 種類必要です
4K/Retina ディスプレイは、従来のディスプレイに比べて縦2倍横2倍の
サイズ。
そのために、縦2倍×横2倍の画像が必要になります。
「Retina.js」はディスプレイの解像度に合わせて自動的に画像を表示
させますが、その為には２枚の画像がどうしても必要になります。
例えば、↓の150 ｘ 150ピクセルの画像を表示させるとすると…
4K/Retina ディスプレイできれいに表示するには倍のサイズが必要に
なるので…
↑の 300×300ピクセルのサイズが必要になるんですね。
こうして比べてみると、大きく感じます。
逆を言えば、150×150ピクセルの画像を300×300ピクセルに引き
伸ばして表示させようとするのですから、ぼやけて見えるのも
仕方ないですね。
2 つの画像のファイル名には『決まり』があります
「Retina.js」はユーザーのディスプレイを判断して、2種類の画像から
最適な解像度の画像を選んで表示させｒてくれます。
ただし、この2つの画像を表示させる為に、絶対的な決まりがあります。
それはファイル名です。
「Retina.js」では、大きな方の画像の後ろに、必ず @2x をつけます。
具体的に言うと、小さい方のファイル名を plus.jpg とした場合、
Retinaディスプレイ用の画像のファイル名は plus@2x.jpg になります。
もう一度書きましょう。
150×150ピクセルのファイル名 … plus.jpg
300x 300ピクセルのファイル名 … plus@2x.jpg
これだけでOKです。
簡単ですが、このルールを守らないと、画像が関連付けられないので
表示されません。
逆に、小さいサイズの画像に@2x を付けると動作しませんのでご注意を。
2つの画像は必ず同じフォルダーにアップロードします
「Retina.js」を使う場合、２つの画像は同じフォルダにアップロード
して下さい。
違うフォルダにアップロードしてしまうと、表示されません。
ワードプレス の場合、画像の保存先は http://ドメイン名/wp-content/uploads/2014/12として毎月フォルダー名が追加されています。
小さい方の画像（＠2ｘがついていない画像）は、ワードプレスの
メディア > 新規追加でアップロードして下さい。
ただし、大きい方の画像（@2x付きの画像）は、FTP ソフトなどを
使ってアップロードする必要があります。
別々でアップロードする理由はのちほど紹介します。
html （body/body）を編集します
それでは、実際に「Retina.js」の設定をしていきましょう。
「Retina.js」の最新情報はこちらの公式サイトに掲載されています。
公式サイト Retina.js
まずは「Retina.js」の最新版をダウンロードして下さい。
公式サイトでも設定の仕方が載っていますが、こちらは通常のサイト用です。
ワードプレスではかなり勝手が違いますのでご注意ください
（私もハマりました…汗）
ここでは、ワードプレスについての解説をしていきます。
タグをに追記しましょう
まずは、編集する前に必ずバックアップを取ってください。
ワードプレスの場合、左サイドバーの外観 > テーマ編集でフッターを
選んでください。
ワードプレスでは、このフッターにタグを記入します。
記入する場所は、フッター（footer.php）の下から2 行目にあるの上です。
公式サイトの説明に従って、下記の一行をの直前に追記します。
※赤字の部分は保存するフォルダ名です。サイトにあわせて書き換えて
ください。
追記したファイルを更新してブログが表示されていれば完了です。
※参考 プリントスクリーン
サンプルテーマ：Twenty Fourteen
retina.js ファイルをアップロードします
ワードプレスのフッターにタグを記入したら、今度は「Retina.js」を
サーバーにアップロードします。
「Retina.js」のスクリプトは、こちらの公式サイトからダウンロード
して下さい。
公式サイト Retina.js
ZIP ファイルをダウンロードします
公式サイトRetina.js のDownload zip から最新のスクリプトファイルを
ダウンロードしてくだ【retina-1.3.0.zip】がダウンロードされます。
（2014 年11 月現在）
解凍したjsファイルをアップロードします
解凍した、下記の2つのファイル（ rerina.js とretina.min.js）を、
FTPソフトを使ってあなたのサーバーにアップロードします。
アップロード先は、あなたのドメイン名/wp-admin/js フォルダーです。
FFFTP でアップロードすると、こうなります。
これでJS ファイルのアップロードは完了です。
アップロード方法は使い分けが必要です
この「Retina.js」をワードプレスで使う場合、画像のアップロード方法が
特殊です。
普通の画像の様に 「メディア →＞新規追加」のみではうまくいきません。
『決まり』が3 つありますので、間違えないように慎重してください。
これは私とパートナーが物凄～く悩みに悩んだポイントです。
上手くいかないけど、どこにも詳しく解説しているサイトがなく、
これだけでかなりの時間を費やしました。
今回もサンプルとして
150 ｘ 150ｐｘのファイル名 …pius.jpg ←通常用
300 x 300px のファイル名 …plus@2x.jpg ←Retina用
の2つの画像ファイルで説明します。
セットの画像ファイルは、同じフォルダーにアップロードします
「Retina.js」では、2 つの画像ファイルは同じフォルダーにアップロード
する必要があります。
ワードプレス の画像の保存先（ メディア > 新規追加）は、
http://ドメイン名/wp-content/uploads/年/月です。
毎月自動的に新しくフォルダーが作成されていきますので、作業する
年/月のフォルダーへアップロードして下さい。
例えばこの記事を書いた2014年12月の時点なら、
http://ドメイン名/wp-content/uploads/2014/12のフォルダーへ
アップロードします。
【plus.jpg】はワードプレス の メディア＞新規追加 でアップロードします
小さい方の画像は、いつも通りワードプレスの メディア＞新規追加で
アップロードして下さい。
↑の部分にドラッグするだけでアップロード出来ます。
【plus@2x.jpg】はftpソフトでアップロードします
私達が一番ハマったのが、ファイル名に＠2ｘがついたの画像の
アップロードでした。
実は、ワードプレスでファイル名に「＠」がついている画像を
アップロードすると、勝手にファイル名を変えてしまうと言う問題が…
どうやらワードプレスはファイル名に＠がついたモノは却下される
らしいです。
これでは、画像をセットで使えず、Retina用画像が表示されません。
その為、面倒ではありますが、ワードプレスの場合は、FTPソフトを
使ってアップロードして下さい。
便利なのはFFFTPと言うフリーのソフトです。
窓の社なんかで無料でダウンロードできます。
FFFTPの初期設定の仕方はこちらで解説しています。
（参考）FFFTP でアップロードした画面
Mac ユーザーならFireZilla が多いのではないでしょうか？
（私は愛用しています）
検証 @2x ファイルをワードプレス のメディア > 新規追加でアップロードすると？
先ほども書きましたが、 ファイル名に@2xがついた画像を、
ワードプレスの「メディア＞新規追加でアップロードした場合、
どうなったかをご紹介します。
150 ｘ 150ｐｘのファイル名 … retinagazou.jpg
300 x 300px のファイル名 …retinagazou@2x.jpg
をそれぞれアップロードしてみました。
150 ｘ 150ｐｘのファイル名 …retinagazou.jpg
こちらは問題ありません。
では、300 ｘ 300ｐｘのファイル名 retinagazou@2x.jpg の場合は…
お分かりになりましたか？
【retinagazou@2x.jpg】はファイル名が変更されてしまっています。
タイトル名は変更されていないのですが、ファイル名は何だか
訳の分からない長ったらしい名前になっています。
これではretina.js のスクリプトが画像を呼び出しても、名前が違う
ので対応出来ません。
したがって、Retina ディスプレイに対応出来ません。
私が使っている他のワードプレス のテーマ3つで試しても結果は
一緒でした。
実は私たち、これのお陰でか～な～り時間をロスしました。
お陰でこうしてここで記事が書けるのですが…
最初は全く理由が分からず、これに気付くまでに１週間くらい
かかりました。
参考 WordPress4.0.1 で検証
まとめ
最後に、4K/Retina 対応画像が表示される仕組みと『決まり』の
一覧を作成しましたので、ご活用ください。
4K/Retina対応画像が表示される仕組み
いくつかRetina用の切り替え方法はありますが、今回はスクリプト
（Retina.js）で説明します。
上段の従来のディスプレイの画像サイズは150x150px
下段のRetina対応ディスプレイ用の画像サイズは300x300pxとします。
例えばあなたがサイトを見に行きます。
表示されるサイズは150x150pxが用意されています。
そのサイトを訪問すると、スクリプト（retina.js）があなたの
使っているディスプレイを判別します。
Retina対応ディスプレイと判断されると下段の画像サイズの
300x300pxに入れ替えます。
その結果、あなたにディスプレイに合った大きい方の画像サイズを
呼び出すので、きれいにくっきりと表示されるワケです。
上段の場合：従来のディスプレイでサイトを訪問。
スクリプト（Retina.js）が従来のディスプレイと判断して、
150x150pxを表示してまず（画像の入れ替えは行いません）
下段の場合：Retina対応ディスプレイでサイトを訪問。
スクリプト（Retina.js）がRetina対応ディスプレイ判断して、
300x300pxを表示します（画像の入れ替えを行います）
図で簡単に説明すると、下記の様な感じです。
一覧【９つの決まり事】
決まりごとの一覧をまとめました。
1. 必要な画像ファイルは２つ。
2. 画像ファイルのサイズは縦2倍×横2倍。
3. 大きい画像ファイル(Retina用)の後ろには @2x をつける。
4. の直前にretina.jsのスクリプトを追記する。
5. Retina.js ファイルを解凍して、ドメイン名 /wp-admin/js フォルダーにアップロードする。
6. 画像ファイルのアップロード先は同じフォルダーにする。
7. 通常サイズ（@2x なし）の画像は、ワードプレスでアップロードする。
8. 大きいサイズ（@2x あり）の画像は、ftpソフトでアップロードする。
9. 画像関係のプラグインや機能をつかう時は、予期せぬ影響を受けることがあるので、細心の注意をはらうこと（ファイルを書き変える前はバックアップは必須）
以上の9つのことを守っていただけば、あなたのワードプレスが
Retinaディスプレイ対応となります。
別サイトでワードプレス講座開催中。
