[Simplicity] ヘッダーの背景をRetina対応にする

広告:超オススメUnity Asset
  広告:超オススメUnity Asset

WordPressのテーマ「Simplicity」をちょっとずつカスタマイズしています。特別なプラグインとか使わずに、普通にヘッダーの背景をアップロードすると、高解像度で画像を用意していても、アップロード後にどうしても「切り取り」をしなければならなくて、そのまま設定すると低解像度(1070 × 120)となり、Retina対応のiOSデバイスやMacBook等で見た場合、画像がぼやけて見えてしまいます。

このブログのヘッダーにあるこの↓画像のについてです。

Head bg

なんとか強引な方法で高解像度画像と入れ替えましたので、そのMEMOです。(テーマは「Simplicity」のChildが設定されている状態として書いています。)

MUSHIKAGO APPS MEMO、Simplicityにてリニューアル

まず、コンピュータ上に「2140 × 240」のサイズの画像を用意します。これは、推奨サイズが「1070 × 120」なので、その倍のサイズの画像を用意しておきます。ファイルサイズを極力小さくしておくといいと思います。pngの場合は、https://tinypng.com とかで小さくしておきましょう。

WordPress管理者画面から、外観>カスタマイズを選んで、Simplicityの子テーマ「Simplicity child」のカスタマイズ画面を開きます。「ヘッダー画像」を開いて

01

現在のヘッダーのところにある「新規画像を追加」。(ヘッダーの高さは、このサイトの場合120にしています)

02

画像の選択で先ほど用意しておいた画像をアップロード

03

次の画面では、「選択して切り抜く」しかないので、それを選ぶ

04

アップロードした画像をトリミングできる画面になりますが、ここは仕方ないので、そのまま最大の領域で「切り抜く」

05

反映されますが、切り抜き作業をやったことで画像が低解像度の1070 × 120となってしまいます。

06

それでは、いったいどの画像が使われているのか、を調べます。現在のヘッダー欄に表示されている小さな画像のURLを調べます。イメージを新規タブで開く、とか、イメージのアドレスをコピー、とか。

07

この↓URLの場所にヘッダー背景に使われている画像が存在しています。

08

DreamweaverなどのFTP機能のあるソフトを使って、この「cropped-」がついている画像ファイルの場所に、オリジナルの「2140 × 240」のサイズの画像を上書きでアップロードしましょう。

09

 

「保存して公開」を押します。

10

つまり、なんのことはないのですが、低解像度で設定された画像の場所を調べて、その場所にオリジナルの高解像度のファイルを上書きする、という感じです。