初心者さんでも簡単！ブログヘッダーを作ろう

2020年3月12日便利なツール, 初心者さん向け解説

画像編集ソフトがなくてもできます

スマホの画像編集アプリ（LINEカメラなど）は気軽にできて便利ではありますが、ブログヘッダーやバナーをなど、サイズが決まったものを制作するには、ちょっと使いづらい。

Photoshopなど画像処理ソフトがなくてもできる！
Editor ACというサイトがとても便利です

https://editor-ac.com/

今日はこのサイトで、1枚の写真を利用したブログヘッダーを作成してみましょう。

こちらが完成品↓

この記事においてはPCでの作業画面の説明になりますが、スマートフォンでも可能です。ただし、ちょっと注意が必要なので、こちらも必ず目を通してくださいね。

作成手順

①サイトにアクセスします
　https://editor-ac.com
アクセスすると最初にサイズを聞かれる画面になります
　完成品のサイズを入れます。

②例では1000×350　としました。サイズを設定した後の画面です。

③ここに写真をのせていきます。アップロードというボタンを押します。
　「ドラッグまたはここをクリックしてアップロードする」をクリック。
　使用する写真をUPします

④大きいサイズの画像をUPしようとするとこのような画像がでますが
　今回は完成品サイズが横1000ピクセルなので、
　いちばん右の『ウェブ』でも問題なし。「サイズを変更」のボタンを押す。

⑤編集しやすいように、画面を広くします。
　「ドラッグまたはここをクリックしてアップロードする」の下にある
　＜　ボタンを押すと、アップロードの画面を閉じられます

⑥この写真を全体に広げて使いたいので、
　写真をいちどクリック。四隅のどれかをドラッグして拡大します

⑦拡大するときに作業しづらい方は、左下にある虫眼鏡ボタンで
　一時的に画面を縮小するとよいでしょう
　完成品はタテが350ピクセルなので、タテはすべて入りませんから、
　完成品に入れたい部分に合せて調節します
　（上下の暗くなっている部分は完成したときに切り落とされます）
　そして、エフェクトというボタンを押します。

⑧エフェクトで、画像の明るさを調節します
　調節度合はお好みですが、
ここでは「文字入れしたときに見やすいこと」が前提とします

⑨エフェクトを調節したあと、そのまま、左上の「テキスト」ボタンを押します
　「テキストを追加」ボタンを押します

⑩画像の真ん中に「テキスト」と入っています
　そこをクリックすると文字を書き換えられます
　書体・文字色・大きさの変更もかけられます。

⑪ブルーの枠が表示されている状態で、
　文字を表示されている位置を動かすことができます

⑫保存します。右上のダウンロードボタンを押します。

⑬できあがりました。
　編集上の画面にある上下の暗い部分（はみでた部分）は
きちんと切り落とされていますよね

スマホで作る場合の注意

ａ）サイズが大きければ大きいほど、縮小表示がされてしまいます。
以下の画像は、ＰＣでの操作の説明と同じ1000×350ピクセルにした場合です。文字入力しようとしても、字がものすごく小さく入力しづらい。
拡大縮小も、googleブラウザでは表示されず、YahooブラウザやSafari、Firefoxでは表示されており、使用するブラウザによって使い勝手が違いそうです。
制作手順の⑤にもある、メニューをたたむことも、いちいちしなければなりません。

ｂ）

ｃ）対して、こちらは横500ピクセルの場合
字も入力しやすい大きさで表示できました。

ｄ）ブラウザをＰＣと同じ表示に変えてみた場合です。
ｃの説明と同じヨコ500ピクセルですが
google chromeではスマホの画面の向きをタテにしてもヨコにしても、画面からはみだしており、スクロールも効きません。

e）google chrome以外のブラウザでPC表示にすると
画面にきっちり収っており、編集しやすい大きさに拡大もできました

スマホで操作する場合は
・ブラウザはGoogleChrome以外を使用してください。（iphoneの方はSafariで！）
・ヨコが600ピクセルを超えると縮小表示されます（端末の大きさによるかも？）
・サイズの大きな画像の編集をする場合はブラウザをPC表示に変えてください。このときも、GoogleChrome以外のブラウザを使用してください。
・編集中にブラウザをＰＣサイト表示に変えたり、その逆にすると、編集内容はすべてリセットされますので気をつけてください（編集途中で保存をかけられないし、自動保存もないし、メッセージボックスも出ません）