Webツール

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

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

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

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

実際のブログはこちら

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

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

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

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

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

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

 

 

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

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

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

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

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

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

 

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

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

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

 

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

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

 

 

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

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

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

 

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

続きを見る

LINEのご案内

公式ブログの更新通知や
各サービスの先行案内など配信中

有田絵梨LINE登録はこちら

無料メールマガジンのご案内

ブランディング・Web集客導線
Webセールスをテーマに
ビジネスマインドを配信しています。

ご登録は無料!どなたでもご登録いただけます。

解除もワンクリックでできますので
お気軽にご登録くださいませ。

メルマガ登録はこちら

 

  • この記事を書いた人

Eri Arita

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

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

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

-Webツール
-