ブログ記事の一番最初に表示するメイン画像や、記事の途中で表示する挿し絵的な画像を作るときに、記事の幅ピッタリに収まってると、キレイだし、読むときの邪魔にならずにいいですよね。
画像サイズが意味なく極端に小さかったりすると、悪目立ちして記事が読みにくくなったり、ガタついて見えてデザイン的にも良くなかったりします。
そこで今回は、ブログ記事の横幅に合ったサイズでの画像のつくり方を説明します。
画像作成には、アプリソフトのインストールなども不要で、無料で使える「エディターＡＣ」を使用してます。
目次
１，記事の幅のピクセル数を調べる
デベロッパーツールや定規ツールで記事の横幅をピクセル単位ではかる
まずは、画像を表示したい場所の横幅サイズを調べます。
すでに記事にキレイに収まっている画像がある場合は、その画像のサイズを参考にします。
見本になるような画像がない場合は、ブラウザのデベロッパーツールや拡張機能の定規ツールなどを使って、記事の横幅をピクセル単位ではかっておきます。
２，画像のサイズを決める
調べた記事の幅を参考に、画像のサイズを決めておく
１で調べたピクセル単位の記事の横幅を基準にして、作成する画像のサイズを決めておきます。（幅〇〇ピクセル×高さ〇〇ピクセルみたいな感じで）
横幅と高さの比率・長方形の形は、感覚的に好きなもの、きれいに見えるもので全然もんだいないです。（基本的には横長の長方形にしといたほうが、記事の邪魔になりにくいです）
幅と高さの比率をなかなか悩んで決められないときは、
幅１６：高さ９
幅３：高さ２
高さ１：幅１．６１８
などの比率が、定番のキレイに見える画像の横幅と高さの比率になります。
３，決めたサイズで画像の準備
決めたサイズで新規デザインを作成して画像の下準備
記事の幅を参考に決定した画像サイズで、画像を作成していく準備をしておきます。
今回は無料で使える便利な画像編集「エディターＡＣ」を使って画像を作成していきます。
エディターＡＣで【デザインを作る】ボタンをクリックして、先ほど決めた画像のサイズを幅と高さに入力して【作成】ボタンをクリック、指定サイズの新規デザインを作成します。
保存ボタンを押してマイページに保存しておくと、次に同じサイズの画像を作るときに使いまわせて便利です。
４，画像の内容を作成
写真・イラスト・文字のせなど、画像の中身を作成します
エディターＡＣのさまざまな画像の加工編集の機能を利用して、写真やイラストを配置・切り抜き加工、文字のせ・レイアウトなどをして、画像の中身をつくっていきます。
外枠のサイズはすでに決めてあるのでそのままで、その枠の中で素材のパーツを配置、拡大縮小・レイアウトしていきます。
写真・イラスト素材、文字のせ・切り抜き・拡大縮小などなど、画像の加工に必要な作業はエディターＡＣにほぼ揃っているので、それらを活用して無料で好きなデザインに仕上げられます。
５，画像ファイルをブログにアップ
ブログ表示用に画像ファイルを書き出して、ブログにアップ・貼り付けます
画像の中身・デザインができあがったら、【ダウンロード】ボタンを押して、ブログ表示用に画像ファイルを書き出します。
ファイル名は半角英数字で、ファイルタイプは画像の品質が調整できる【ＪＰＧ】がおすすめです。（無料なのに画像の品質が調整できるエディターＡＣはほんとにありがたい♪）
ＪＰＧで書き出すときの品質の％は、６０～８０％くらいが無難で、％が高いほど画質が良くなり、低いほど容量のＫＢが少なくなって読み込みが軽くなります。
保存された画像ファイルをブログにアップロード、記事の中に貼り付け・表示して完成です。
まとめ
無料なのに、だいたいの画像加工作業ができて、書き出しの画質調整もできる「エディターＡＣ」はほんと便利です♪
