STINGER7のヘッダー画像を最適化（サイズ指定トリミングツール紹介）
2019/08/09
この記事を書いている時点では、まだヘッダー画像を設定していないため、殺風景な状態の当ブログですが、今回はそのブログの顔となるヘッダー画像の設定方法についてご紹介したいと思います。
上はヘッダー画像設定前のトップ画面です。
寂しいですね・・・。
さて、設定方法と言いましても然程難しい作業でもないので、改めてご説明する程のものでもないのですが、ここではヘッダーに使用する画像の最適化も含めてご紹介をしたいと思います。
当ブログで使用しているテーマ［STINGER7］では、ヘッダー用の画像サイズとして1,060×400のピクセルを推奨しています。
ということで、切り出すサイズを指定してトリミングできるツールを探してみました。
尚、トリミングツールについては、ヘッダー画像を設定する際にしか使わないため、わざわざソフトのインストールまではしたくないと考え、ブラウザ上で使用できるものを探してみました。
しかし、いざ探してみるとなかなかないものでして・・・
でも、少し時間は掛かりましたが、丁度良い物が見つかりました。
便利なオンライン画像編集ツール「iLoveIMG」でサイズを指定してトリミング
見つけたのは［iLoveIMG］というオンラインツールです♪
サイトに入ると５つのメニューが表示されているので［画像の切り抜き］をクリックします。
画像の選択画面が表示されますので、中央の［画像を選択］をクリックします。
ブラウザーが表示されるので、使用するファイルをダブルクリックで指定します。
すると画面中央に選択した画像が表示されます。下の［選択された切り取り範囲:］の数値入力部である［幅(px):］と［高さ(px):］に指定のサイズを入力すると当該サイズのトリミング枠が表示されるので、ドラッグでこのトリミング枠を動かして切り取る範囲に合わせた後、下の［画像の切り抜き］をクリックをします。
［切り抜かれた画像をダウンロード］をクリックして、トリミングした画像をダウンロードして下さい。
スティンガー7のヘッダー画像設定方法
それではヘッダー画像の設定を行います。
（事前に先程ダウンロードしたトリミング画像を［メディア］→［新規追加］→［ファイルを選択］で取り込んでおいて下さい）
WordPressのダッシュボードから［外観］→［ヘッダー］と進むと、上の設定画面が表示されるので、左の［新規画像を追加］をクリックします。
画像の選択画面が開きます。
画像をクリックすると、右側に画像の情報が表示されるのでここでサイズが確認できます。尚、1,060×400でトリミングしたのですがピッタリとはいかないようです（惜しい！（笑））1,058×398と表示されていました。
先程トリミングした画像を選択し、右下の［選択して切り抜く］をクリックします。
画像切り抜きの画面が開きます。画像は既に最適化されているので、ここでは右下の［切り抜かない］をクリックします。
イメージが表示されました。これでよければ左上の［保存して公開］をクリックして完了です♪
トップ画面がこのようになりました。
推奨サイズでは思っていたイメージと違い、上下が切れてしまいました（笑）
後で何とか修正します（笑）
如何でしたでしょうか？
［iLoveIMG］は非常に便利なツールです♪
圧縮、サイズ変更、変換もできるようなので、今後も色々と活用できそうだと思いました～♪