Webツール

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

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

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

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

実際のブログはこちら

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

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

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

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

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

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

 

 

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

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

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

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

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

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

 

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

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

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

 

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

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

 

 

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

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

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

 

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

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

続きを見る

メルマガ登録はこちら

SNS・ブログ集客だけで 会社員以上の売上を手に入れる方法!
「無料動画プログラムプレゼント中!」

  • この記事を書いた人

有田 絵梨(WEB集客コンサルタント)

熊本市在住。夫・娘(5歳)・愛犬
青山学院大学 経営学部卒。

株式会社テイクアンドギヴ・ニーズ ウェディングプランナー・ファーストリテイリング傘下のアパレルマネージャーを経て結婚を機に専業主婦に。産後自由な働き方をしたいと思い、デジタルハリウッドSTUDIO渋谷にてWebデザインを学び、2017年フリーランスWebデザイナーとして活動を始める。

女性起業家のためのWeb集客コンサルタントとして弊社主催のスクールPFRを立ち上げ、現在40名以上の女性起業家が在籍。
デジタルハリウッド主婦ママクラスのクラスアシスタントやオンライン講座の講師、コペンカレッジ様の外部講師などを行う。

2020年12月に法人化。2021年10月より熊本市中央区新屋敷にオフィスを構え、熊本の女性の起業サポート事業も開始。

-Webツール
-