Webデザイン

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

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

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

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

実際のブログはこちら

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

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

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

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

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

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

 

 

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

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

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

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

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

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

 

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

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

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

 

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

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

 

 

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

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

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

 

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

本記事ではアメブロのヘッダー設置方法について解説してきます。 記事下には変更できない場合の対処法も記載していますので、アメブロのヘッダーが変更できなくて悩んでいらっしゃる方も参考にされてくださいね! ...

続きを見る

無料動画講座のご案内

  • この記事を書いた人

有田 絵梨

Webセールススタイリスト®︎

1983年生まれ・熊本市在住
青山学院大学 経営学部卒
ブライダル・アパレル業界を経て結婚を機に退職。専業主婦時代にデジタルハリウッドSTUDIO渋谷にてWebデザインを学ぶ。
2017年6月フリーランスWebデザイナーとして活動を開始。2019年頃からコンサルティング業務をメインとし、2020年に法人化、これまで300名以上の女性経営者のWeb集客をサポート。

■夫・7歳の娘・愛犬との3人1匹家族
■趣味:ジャズダンス・ヨガ

-Webデザイン
-