アメブロをもっと魅力的に見せるために欠かせないのがヘッダーですね。パッとアメブロを開いた時でも一番最初に飛び込んでくるので、素敵なイメージを与えたいところです。
kyokoいざ、デザインしようとしても作るの大変そう、、そう思って私も何年も無機質なヘッダーのまま過ごしちゃっていました。。
ここでは、無料で使える便利なデザインツール「Canva（キャンバ）」を使って、たった5ステップで簡単にアメブロヘッダーを作る方法をご紹介します。初心者の方でも安心して取り組める内容ですので、ぜひ試してみてくださいね！
ステップ① Canvaに登録・ログインする
まずはCanvaの公式サイト（https://www.canva.com）にアクセスします。アカウントを持っていない場合は、メールアドレスやGoogleアカウントで簡単に登録可能です。すでにアカウントをお持ちの方はログインしてください。
kyokoスマホアプリも便利なので、外出先での作業にもおすすめ！
ステップ② アメブロヘッダーの適切なサイズを設定する
アメブロヘッダーに適した推奨サイズは横幅1280px × 高さ400pxです。
Canvaの「カスタムサイズ作成」からこのサイズを入力して、デザインをスタートしましょう。
↓
※単位が「px」ピクセルになってるかも確認！
サイズを入力したら「新しいデザインを作成」をクリック！
ステップ③ テンプレートを選ぶ＆自分のブランドに合ったデザインにカスタマイズする
ここからヘッダーを作っていきます。
Canvaには、数多くのおしゃれなテンプレートが用意されています。「ヘッダー」や「ブログ」「Webサイト バナー」と検索すると、目的に合ったテンプレートが見つかります。自分のブランドやイメージに合ったデザインを選び、これを基にアレンジを加えていきます。
テンプレートを選んだら、次はカスタマイズです。以下のポイントを参考に、アメブロヘッダーを自分らしく仕上げましょう。
- 文字: ブログタイトルやキャッチフレーズを追加します。読みやすいフォントを選びましょう。
- 色: ブログ全体のテーマカラーやブランドカラーに合わせて変更。
- 画像: 無料の画像素材を活用したり、Canvaの「アップロード」機能を使って自分の写真を挿入します。
kyoko人物だけ使いたい場合はCanvaの有料機能の「背景除去」を使うとできます。
↓↓
ステップ④ 画像をダウンロード
デザインが完成したら、「ダウンロード」をクリックし、JPEGまたはPNG形式で保存します。
ステップ⑤ アメブロに設定する
あとは、アメブロにログインして、ヘッダーの編集画面から作成したデザインをアップロードすれば完了です！
アメブロの管理トップ＞ブログデザイン＞カスタマイズ＞CSS編集を開きます。
ブログデザインヘッダ・背景画像の追加より、「ファイルを選択」し、アップロード。
現在使用中のブログデザインCSSの一番下に下記の追加コードをコピーして貼り付けます。
/* ▼追加コード▼ */
/* ヘッダー画像を設定 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(ヘッダー画像のURL);
}
/* ヘッダーの高さを設定 */
.skin-bgHeader, .skin-bgHeader a {
height: 400px;
}
/* ブログタイトルと説明文を非表示 */
.skin-headerTitle {
display: none;
}
↓↓
「この画像のパス」をコピーし、追加コードの「ヘッダー画像のURL」の箇所に上書きして貼り付けます。
↓↓
「表示を確認する」でヘッダー画像が挿入されているか確認しましょう！
↓↓
まとめ
Canvaを使えば、デザイン初心者の方でも手軽に魅力的なアメブロヘッダーを作ることができます。
- Canvaに登録・ログインして準備を整える。
- 推奨サイズ（1280px × 400px）でデザインをスタート。
- 豊富なテンプレートからお気に入りを選ぶ。文字、色、画像を自分好みにカスタマイズ。
- 画像をダウンロード
- アメブロにアップロード
たったこれだけで、ブログ全体の印象がガラッと変わります！テンプレートを活用しながら、自分のブランドや個性をしっかりと反映させたデザインに挑戦してみましょう！一度作ればブログ全体の印象がガラッと変わり、訪問者の目を引くこと間違いなしです。
ぜひ、この記事を参考にヘッダー作りにトライしてみてください！
