Webツール

アメブロのヘッダーをおしゃれに作る方法

本ページではアメブロのヘッダーをおしゃれに作る方法をご案内していきますね。

動画では下記サイトのヘッダーを作っていきます。

可愛いアメブロカスタマイズのやり方解説ページ

実際のブログはこちら

*スマホでは見れないのでパソコンでご覧ください。

アメブロのヘッダーをオシャレにするためのポイント

まずアメブロのヘッダーをオシャレに魅せるポイントをお伝えします。

  • たくさんの色を使わない
  • 画像のトーンは揃える
  • ヘッダー内にボタンを配置する

これらについても動画(vol.3)で解説していますので、ご覧くださいね。

色に関してはメルマガにご登録いただくと私の好きな配色コードもご紹介したDesign Book(Pdf)をプレゼントしていますのでご興味あれば、ご登録ください!

 

 

アメブロのヘッダーのサイズ

アメブロのヘッダーは横幅のサイズが決まっています。

アメブロヘッダー横幅は1120pxです。

動画でも解説していますが、私は倍のサイズの2240pxで作っています。詳しい解説は省きますが、ジャストのサイズで作ると画像が粗く表示されることがあるため最初から倍で作るようにしています。

高さはお好みで構いませんが、私のコードに沿って作る場合には動画と同じサイズで必ず作ってください。

コードは初期設定方法のページに記載しています。

 

可愛いアメブロカスタマイズの超基礎編

まず、アメブロカスタマイズを全く初めてやるという方は下記動画からご覧ください。

デザインはデモと異なりますが、ヘッダーとボタンを作る概要はご理解いただけます。

 

デモサイトと同じアメブロのおしゃれなヘッダー画像を作る方法

ではデモサイトと同じおしゃれなアメブロヘッダーの作り方動画をご覧ください。

 

 

画像ができたらアメブロに設置していきましょう!

ヘッダー画像が完成したらアメブロに設置して言いましょう。

設置方法は下記記事をご覧ください!

 

次に読みたい!
アメブロのヘッダー設置方法!変更できない方もコピペで解決!

続きを見る

マーケティング&セールス無料講座

フリーランスとして、1日4時間×週3日の働き方で、年商3000万越え・法人化とステップアップしてきたマーケティング&セールスセミナー3本動画を期間限定で無料公開します。

 メールアドレスをご入力ください。

  • この記事を書いた人

Eri Arita

Webコンサルタント・株式会社プレシャイン代表

2017年6月フリーランスWebデザイナーとして活動を開始。2019年頃からコンサルティング業務をメインとし、2020年に法人化、これまで200名以上の女性経営者のWeb集客をサポート。

■熊本市在住
■夫・6歳の娘・愛犬との3人1匹家族
■趣味:ジャズダンス・エアリアルヨガ

-Webツール
-