ワードプレスを4k/Retinaディスプレイ対応に変更する【9つの決まり事】

ワードプレスの4K化(Retina化)について解説して行きます。

4K化する方法は、いくつかあります。
主だったものでは、「Retina.js」と言うスプリクトを使う方法と、
ワードプレスのプラグインを使う方法の2種類です。

プラグインは便利そうですが、動作が安定していないとの声もあり、
また解説が分かりづらいので、初めての方には敷居が高そうな感じです。

一方の「Retina.js」は安定していて、一度設定してしまえば楽なので、
ここでは「Retina.js」でのやり方を解説します。

 

「Retina.js」の仕組みは?

まず最初に、「Retina.js」がどうやって画像を4K化させるかを簡単に
解説します。

「Retina.js」はJavaスクリプトと言うプログラムの一種です。

この「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」はディスプレイの解像度に合わせて自動的に画像を表示
させますが、その為には2枚の画像がどうしても必要になります。

例えば、↓の150 x 150ピクセルの画像を表示させるとすると…

retinagazou1

 4K/Retina ディスプレイできれいに表示するには倍のサイズが必要に
なるので…

retinagazou2

↑の 300×300ピクセルのサイズが必要になるんですね。
こうして比べてみると、大きく感じます。

逆を言えば、150×150ピクセルの画像を300×300ピクセルに引き

伸ばして表示させようとするのですから、ぼやけて見えるのも
仕方ないですね。

  

2 つの画像のファイル名には『決まり』があります

「Retina.js」はユーザーのディスプレイを判断して、2種類の画像から
最適な解像度の画像を選んで表示させrてくれます。

ただし、この2つの画像を表示させる為に、絶対的な決まりがあります。

それはファイル名です。

「Retina.js」では、大きな方の画像の後ろに、必ず @2x をつけます。

具体的に言うと、小さい方のファイル名を plus.jpg とした場合、
Retinaディスプレイ用の画像のファイル名は plus@2x.jpg になります。

もう一度書きましょう。

150×150ピクセルのファイル名 …  plus.jpg
300x 300ピクセルのファイル名 … plus@2x.jpg

これだけでOKです。
簡単ですが、このルールを守らないと、画像が関連付けられないので
表示されません。

逆に、小さいサイズの画像に@2x を付けると動作しませんのでご注意を。

 

2つの画像は必ず同じフォルダーにアップロードします

「Retina.js」を使う場合、2つの画像は同じフォルダにアップロード
して下さい。
違うフォルダにアップロードしてしまうと、表示されません。

ワードプレス の場合、画像の保存先は http://ドメイン名/wp-content/uploads/2014/12として毎月フォルダー名が追加されています。

小さい方の画像(@2xがついていない画像)は、ワードプレスの
メディア > 新規追加でアップロードして下さい。

ただし、大きい方の画像(@2x付きの画像)は、FTP ソフトなどを
使ってアップロードする必要があります。
別々でアップロードする理由はのちほど紹介します。

 

 

html (body/body)を編集します

 それでは、実際に「Retina.js」の設定をしていきましょう。

「Retina.js」の最新情報はこちらの公式サイトに掲載されています。

公式サイト  Retina.js

 まずは「Retina.js」の最新版をダウンロードして下さい。

公式サイトでも設定の仕方が載っていますが、こちらは通常のサイト用です。
ワードプレスではかなり勝手が違いますのでご注意ください
(私もハマりました…汗)

ここでは、ワードプレスについての解説をしていきます。

 

タグをに追記しましょう

 まずは、編集する前に必ずバックアップを取ってください。

ワードプレスの場合、左サイドバーの外観 > テーマ編集でフッターを
選んでください。
ワードプレスでは、このフッターにタグを記入します。
記入する場所は、フッター(footer.php)の下から2 行目にあるの上です。

公式サイトの説明に従って、下記の一行をの直前に追記します。

※赤字の部分は保存するフォルダ名です。サイトにあわせて書き換えて
ください。

追記したファイルを更新してブログが表示されていれば完了です。

 

※参考 プリントスクリーン

サンプルテーマ:Twenty Fourteen

report2-1

 

 

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 フォルダーです。

report2-2

FFFTP でアップロードすると、こうなります。

report2-3

これでJS ファイルのアップロードは完了です。

 

アップロード方法は使い分けが必要です

この「Retina.js」をワードプレスで使う場合、画像のアップロード方法が
特殊です。

普通の画像の様に 「メディア →>新規追加」のみではうまくいきません。

『決まり』が3 つありますので、間違えないように慎重してください。

これは私とパートナーが物凄~く悩みに悩んだポイントです。
上手くいかないけど、どこにも詳しく解説しているサイトがなく、
これだけでかなりの時間を費やしました。

今回もサンプルとして

150 x 150pxのファイル名 …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】はワードプレス の メディア>新規追加 でアップロードします

 小さい方の画像は、いつも通りワードプレスの メディア>新規追加で
アップロードして下さい。

report2-4

↑の部分にドラッグするだけでアップロード出来ます。

 

plus@2x.jpg】はftpソフトでアップロードします

私達が一番ハマったのが、ファイル名に@2xがついたの画像の
アップロードでした。

実は、ワードプレスでファイル名に「@」がついている画像を
アップロードすると、勝手にファイル名を変えてしまうと言う問題が…

どうやらワードプレスはファイル名に@がついたモノは却下される
らしいです。
これでは、画像をセットで使えず、Retina用画像が表示されません。

その為、面倒ではありますが、ワードプレスの場合は、FTPソフトを
使ってアップロードして下さい。

便利なのはFFFTPと言うフリーのソフトです。
窓の社なんかで無料でダウンロードできます。
FFFTPの初期設定の仕方はこちらで解説しています。

 →FFFTPソフトの初期設定の仕方

(参考)FFFTP でアップロードした画面

report2-5

Mac ユーザーならFireZilla が多いのではないでしょうか?
(私は愛用しています)

report2-6

 

 

 

検証 @2x ファイルをワードプレス のメディア > 新規追加でアップロードすると?

 先ほども書きましたが、 ファイル名に@2xがついた画像を、
ワードプレスの「メディア>新規追加でアップロードした場合、
どうなったかをご紹介します。

150 x 150pxのファイル名 … retinagazou.jpg

300 x 300px のファイル名 …retinagazou@2x.jpg

をそれぞれアップロードしてみました。

 

150 x 150pxのファイル名 …retinagazou.jpg

report2-7

こちらは問題ありません。

 

では、300 x 300pxのファイル名 retinagazou@2x.jpg の場合は…

report2-8

お分かりになりましたか?

【retinagazou@2x.jpg】はファイル名が変更されてしまっています。
タイトル名は変更されていないのですが、ファイル名は何だか
訳の分からない長ったらしい名前になっています。

これではretina.js のスクリプトが画像を呼び出しても、名前が違う
ので対応出来ません。
したがって、Retina ディスプレイに対応出来ません。

私が使っている他のワードプレス のテーマ3つで試しても結果は
一緒でした。

実は私たち、これのお陰でか~な~り時間をロスしました。
お陰でこうしてここで記事が書けるのですが…
最初は全く理由が分からず、これに気付くまでに1週間くらい
かかりました。

参考 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を表示します(画像の入れ替えを行います)

図で簡単に説明すると、下記の様な感じです。

retinajsmatome

 

 

一覧【9つの決まり事】

 

決まりごとの一覧をまとめました。

1. 必要な画像ファイルは2つ。

2. 画像ファイルのサイズは縦2倍×横2倍。

3. 大きい画像ファイル(Retina用)の後ろには @2x をつける。

4. の直前にretina.jsのスクリプトを追記する。

5. Retina.js ファイルを解凍して、ドメイン名 /wp-admin/js フォルダーにアップロードする。

6. 画像ファイルのアップロード先は同じフォルダーにする。

7. 通常サイズ(@2x なし)の画像は、ワードプレスでアップロードする。

8. 大きいサイズ(@2x あり)の画像は、ftpソフトでアップロードする。

9. 画像関係のプラグインや機能をつかう時は、予期せぬ影響を受けることがあるので、細心の注意をはらうこと(ファイルを書き変える前はバックアップは必須)

以上の9つのことを守っていただけば、あなたのワードプレスが
Retinaディスプレイ対応となります。

『追加記事 ワードプレスでRetina.jsを設定する【3つの注意点】』も
あわせてお読みください。

 

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

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

ビジネス素材風景花

空事務用品 お金 その他