ヘッダー背景画像の作成
ヘッダー背景画像は、PCとモバイルでは、画面表示される比率やサイズが異なるので、一つの画像を共用することが難しいです。PC用とモバイル用の二枚を作成します。
まず、元となる写真やイメージをKeynoteへ取り込みます。
ヘッダー用写真をKeynoteへ取り込み
次に、Keynoteの「イメージ」→「マスク編集」を選びます。
「マスクを編集」を選択
まず、PC用の加工をします。1,024ピクセル X 150ピクセルの大きさで、トリミングします。
PC用のマスク編集 1,024pt x 150pt
次に、同じページの下段に、モバイル用の加工をします。1,024ピクセル X 500ピクセルの大きさで、トリミングします。
※すみません。下の写真は1,042pt x 500ptになっていますが、この程度の誤差であれば影響ありません。
PC用の表示と、モバイル用の表示のバランスを整えます。
モバイル用のマスク編集 1,024pt X 500pt
Keynoteでの加工は、これだけで、このページをイメージとして書き出します。
イメージを書き出す
このイメージは、PC用、モバイル用が一体になっていますので、これを元に、アップルのアプリでは「プレビュー」を使って、範囲選択→コピー→クリップボードから新規作成、にて、WordPress用に、PC用、モバイル用二枚のイメージを作成します。
Simplicity2 カスタマイズ ヘッダーの画面