女性専門ホームページ制作・アメブロカスタマイズ F-Labo

おうちサロン、個人事業主向け集客をサポートする女性だけのトータルビジネスデザインチームです

アメブロのヘッダーをスマホのアプリで作る方法

164578 views
約 5 分

アメブロカスタマイズで、一番悩むのがヘッダー画像です。

売れてきたら、プロのデザイナーさんにきちんとお金を払って頼むことをおすすめします。

この記事では、まだブログを初めて間もない方が、自分でカスタマイズする際に、アメブロのヘッダーを一番簡単に作る方法をご紹介します。

ヘッダー画像の作り方

ヘッダー画像を作る方法はいくつかあります。

1,プロにお願いする(有料)

2,Photoshop、Gimp、Pixlrなどの画像加工ソフトを使ってパソコンで作る(無料)

3,スマホのアプリで作る(無料)

それぞれ、かかる時間もコストも仕上がりも、違ってきます。

PCのスキルによっても違います。

今回の3番目、スマホアプリを使った方法は、スキルがなくてもスマホさえあれば簡単にできます。

ただ、できることに限りがありますので、

まだそこまでじゃないけど、何もしないのもイヤというレベルの方にオススメの方法です。

では、さっそく作り方を見ていきましょう。

写真加工アプリPicsArtをダウンロード

今回は、PicsArtというアプリを使います。

ピクスアート

PicsArt フォトスタジオ画像加工&コラージュ編集

App StoreやGoogle Playからアプリを入手してください。

※他に、普段お使いのアプリがあればこちらの内容をヒントに、作ってみてくださいね。

ヘッダー画像の作成

最初に元になる写真を用意します。
ご自分で撮影してもいいですし、無料サイトからダウンロードしてもOKです。

参考記事
【使い方解説付】ブログで使えるおしゃれなフリー写真素材サイト

ただ、ヘッダー画像というのは横長です。

上下を切り取っても大丈夫そうな、横長の写真を選んでくださいね。

アプリで編集する

①PicsArtを起動し、下の真ん中にある+をタップして、写真を選びます。

pics artトップ画面

②写真を選んだら右上の→をタップします。

pics art 編集スタート

③サイズを決めるので、「ツール」の「リサイズ」をタップします。

picsart編集画面2

④アメブロの新CSS(2016年3月以降)のヘッダー画像の幅は1120ピクセルなので、W(幅)のところに1120と入力し、OKをタップします。
※H(高さ)は自動的に変わります。後ほど修正するのでここではこのままにしておきます。

picsart編集画面3

⑤このままだと、やたらでっかいヘッダーになってしまうので、上下を少し削って横長にします。
再度、「ツール」をタップし、今度は「切り抜き」を選びます。

picsart 切り抜き

⑥上下をお好みに合わせて上下をトリミングします。

注意!!左右もできますが、ヘッダーにした時に画像が粗くなります。

その際、上の数字1120✕◯◯は、ブログヘッダーのサイズとなり、ブログに設定する時に使いますので、メモっておくといいでしょう。(万が一忘れても後で調べられるからご安心ください)

PicsArtトリミング

⑦右上の「適用」をタップして確定します。

この後は、エフェクト(様々な加工)や枠線など、自由にいろいろお試しください。(楽しいけどあんまり加工しないほうがいいと思いますが・・)

では、
必須の2つ(明るさ、文字入れ)だけ、ご説明しますね。

明るさの調整

写真の明るさで、全体の印象は随分変わってきます。

①「ツール」の「修正」をタップします。

picsart明るさ

②「明るさ」をタップして、つまみを調整します。
※明るくしすぎると白っぽくなります。

picsart明るさの調整

最後に右上の「適用」をタップすることで、確定となります。

文字の入れ方

①一番下のツールボタンをスライドしていくと、「文字」があります。

picsart文字の入れ方

②文字を入力して、色とフォントの種類を選び(英字のみ)「適用」をタップ。

※サイズは追加してから変更できます。

picsart文字の編集

③文字の右下でサイズを変更します。小さくて指が限界なので、拡大してください。

※実際のアメブロのヘッダーで見るとすごく大きいので、この画面で「小さいかな?」ぐらいがちょうどよいです。

picsart文字サイズ

※透過度は、文字に写真が透けて見える度合いです。

できたら、最後保存をします。

完成した写真の保存方法

①すべての加工や追加が終了したら、右上の→をタップします。

picsart保存

②「写真」をタップしたら保存完了です。

picsart保存

以上です!

ちなみに、
こちらの画像をヘッダーにしてみると・・・

サンプル画像

あ、サブタイトルの文字が小さすぎた。

こんな感じで、試行錯誤してみてください^^

まとめ

・アメブロカスタマイズのメインとなるヘッダーを、一番簡単に作れるのはスマホのアプリ。

・ポイントは、アメブロのヘッダーに合わせたサイズをきちんと設定すること。(幅1120)

・クオリティに限界はあるので、ある程度売れてきたらPCの画像加工ソフトで作るか、プロに頼むことをおすすめします。

思い通りのデザインにならない方へ

自分で行ったカスタマイズがイマイチ・・という方は、ご相談ください。イメージ通りに仕上げます。

F-Laboの「アメブロカスタマイズ」
メッセージボードをキレイにしたい方は⇒アメブロカスタマイズサービス

あなたのサービスを【もっと多くの人】に知ってもらうには?

いまさら人に聞けない【ネット集客の基本】をまとめたPDF資料が今すぐダウンロードできます!

  • 検索にひっかかるってどういうこと?
  • WordPressって何?
  • SNSってやったほうがいいの?
  • メルマガって何のためにやるの?
  • LINE@って必要?
    ・・・他

一般的なネット集客のノウハウをおうちサロン・女性個人事業主の方向けにアレンジしてまとめました。

資料の詳細を見てみる