パソコンが苦手な女性フリーランスの方に寄り添いたいWebデザイナー絢です。
アメブロのカスタマイズやホームページを制作しています。
アメブロのカスタマイズのご依頼理由を伺うと、
「まずブログの見た目を整えてからサービスを始めたい」
というご意見が多いです。
しかし、ある程度サービスが軌道に乗ってからアメブロカスタマイズを依頼したい、という方もいらっしゃるのではないでしょうか。
それまでの間、ご自身でブログヘッダーを設定してはいかがでしょうか。
まずは、スマホアプリを使ったヘッダー画像の作り方をご紹介します。
こちらの画像⇩を作成します。
スマホアプリを使った、アメブロのヘッダー画像の作り方
事前準備
- ヘッダー画像の背景に使う写真
- ブログタイトルやブログの説明など、ヘッダー画像に入れる文章
を準備します。
アプリCanvaをインストールします
インストール画面に遷移しなければ、アプリストアから「Canva」を検索してインストールしてください。
Canvaにログインします
Canvaを開きます。
「Facebookで続行」「Googleで続行」「メールで続行」どの方法でも構いません。
私はGoogleのアカウントがあるので、「Googleで続行」しています。
ヘッダー画像を作成します
新規作成
ヘッダー画像を新規作成するので、右下の「＋」をタップします。
ヘッダー画像のサイズを設定します
ヘッダーのサイズを設定します。「サイズを選択（赤枠）」をタップします。
ヘッダー画像のサイズは
幅は1120（px）※幅は変えない
高さはお好きな高さでOK ※300～500（px）がオススメ
で設定します。
ここでは400（px）に設定します。
高さはヘッダーをブログに設定するときに使うので、メモしておいてください。
入力が終わったら右上の「✓」で完了します。
背景画像を設定します
白いキャンバスをタップします。
写真やカメラへのアクセスの許可を聞かれた場合は許可してください。
※準備した写真を使うため。
ギャラリーをスクロールして、事前に準備した画像を選択します。
画像が追加されたので、画像をドラッグして位置を調整します。
ブログタイトルやブログの説明文を追加します
背景画像が設定されました。次に、ブログタイトルやブログの説明文を追加します。
右下の「＋」をタップします。
「テキスト」をタップします。
「テキストを追加」をタップします。
（下の見本のテキストからお好きなフォントを選んでもOK）
テキストが追加されました。タップしてテキストを書き換えます。
ここでは「WEB DESIGN La pureté 」とします。
テキストが折り返されてしまったので、折り返しがなくなるように枠をドラッグして伸ばします。
文字をドラッグしてお好きな位置に配置します。
フォントや文字色の加工もこの画面で設定できるので、お試しください。
- 文字フォント
- 文字サイズ
- 文字の右寄せ、中央寄せ、左寄せ
- 太字
- 斜体
- 大文字小文字変換（アルファベット用）
- 文字間隔
同様にブログ説明文も追加しました。
文字に帯を敷く
このままだと画像と文字が重なって読みづらいため、文字の下に帯を敷くことにします。
右下の「＋」をタップし、「イラスト」をタップします。
検索窓に「square」と入力し検索します。
結果からグレーの四角をタップします。
追加された四角をドラッグして適度な大きさに調整します。
四角の色を白にします。
カラーを下にスクロールして白をタップして選択します。
帯でブログタイトル等が隠れてしまったので、四角を背面へ移動します。
右上の「…」をタップして、メニューを切り替えます。
全てのテキストが見えるまで、「↓」をタップします。
テキストが表示されました。帯を少し透明にし背景が透けるようにします。
赤枠のチェック模様のマークをタップします。
※チェック模様のマークが出ていない場合は一番右の「…」をタップしてメニューを切り替えてみてください。
文字が読める程度に、背景の透明度をドラッグして設定します。
左上の「✓」で確定します。
完成したヘッダー画像をダウンロードします
赤枠の「↓」をタップして、ヘッダー画像をダウンロードします。
スマホ内に作成したヘッダーが保存されます。これで、ヘッダー画像は完成です。
ポイント
- アメブロのヘッダー画像はスマホアプリCanvaで作ることができる
- ヘッダー画像の幅は1120px
- ヘッダー画像の高さは、ブログにヘッダー画像を設定する時に使うためメモしておく
- ヘッダー画像の文字は読みやすいことが大切
女性フリーランスの方向けのアメブロカスタマイズをしています
WEB DESIGN La pureté （ラ・ピュルテ）では女性フリーランスの方向けにアメブロカスタマイズをしています。
ヘッダー画像で世界観をターゲットにアピールし、ナビゲーションメニューを設置してお申込み導線を整えます。
