女性専門ホームページ制作・アメブロカスタマイズ F-Labo

自宅サロン、女性起業向け集客をサポートする女性だけのトータルビジネスデザインチームです

一瞬でおしゃれなアメブロになる オリジナルヘッダー画像の作り方

24159 views
約 5 分

「アメブロカスタマイズを自分でやりたい!」

そんな時、1番のネックになるのが上に表示されている「ヘッダー画像」ですね。

ヘッダー画像

この記事ではかっこいいデザインが簡単にできちゃうテンプレート満載の無料ソフトで、ヘッダー画像を作る方法をご紹介します。

テンプレート事例
おしゃれなテンプレート満載

ヘッダー画像を作る

無料でおしゃれなヘッダー画像やバナーが簡単にできるソフトと言えば、「Canva」です。

まずはこちらからログインしてください。(初めて使う場合は登録が必要です)

canva登録

①「デザインの作成」をクリック

デザインの作成

④カスタムサイズをクリック

③アメブロのヘッダー画像サイズ 幅1120 高さ400  を設定し「新しいデザインを作成」

 ④左側にテンプレート一覧が表示されるので、お好みのものを選択

テンプレート一覧

⑤文字の上をダブルクリックすると自分の好きな文章に変更できます

文字の上をダブルクリック

⑥フォントの種類、文字サイズ、色も上のバーの部分からすべて変更できます

フォントの変更

失敗したら「もとに戻す」が便利です!

元に戻す

⑦完成したら右上の「ダウンロード」で保存します

保存方法

アメブロにヘッダー画像を設置する

アメブロにオリジナルヘッダーを設定するには、デザイン設定の「CSS編集可能なデザイン」を選ぶことで設置できます。

デザインの変更

①管理画面の右上「設定」ー「デザインの変更」をクリックします。

②1番下の「カスタム可能」をクリックします。

カスタム可能

③「CSS編集用デザイン」を選択(最初に表示されるブログのカタチごとに好きなものを選んでください)

CSS編集可能デザイン

④カラム数を選択して「適用する」(③で選択したものによって選べるものが違います)

カラム選択

CSSの編集

①「CSSの編集をする」をクリック

CSSの編集

②「ファイルを選択」で先ほど作成した画像を選択

ファイルを選択

②「アップロード」します

アップロード

③このように表示されればOK。こちらは後から使います。

アップロード後の画面

④下に表示されているコードを1番下までスクロールして、以下のコードをコピペします。

CSSの編集画面

こちらをコピペ↓

/* ヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(ここに画像URLを貼り付ける);
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [amb-layout="headerInner"]>a,
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
height: 400px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}

こんな感じに貼り付ければOK↓

貼り付けたコード

あと少しです!がんばれ!

⑤アップロードした画像の下に表示されているコードを選択してコピーします(ブラウザによってクリックもしくはダブルクリックで選択できます)

「この画像のパス」をコピー

⑥先ほど貼り付けたコードの下のほうにある「ここに画像を貼り付ける」の部分を削除して、⑤でコピーしたコードを貼り付けます

/*ヘッダー画像の設定 */
.skin-bgHeader {
background: no-repeat scroll center;
background-image: url(ここに画像URLを貼り付ける);
}

⑦「表示を確認」で表示されていたら「保存」で完成です。

ヘッダー画像

以上です!オリジナルヘッダー画像は設定できましたか?

引き続きサイドバーなど全体のカスタマイズにチャレンジしたい方はこちらもご覧ください

思い通りのデザインにならない方へ

F-Laboの「アメブロカスタマイズ」
プロにまるっとおまかせ!アメブロカスタマイズサービス

あなたのサービスを【もっと多くの人】に知ってもらうには?

いまさら人に聞けない【ネット集客の基本】をまとめたPDF資料が今すぐダウンロードできます!

  • 検索にひっかかるってどういうこと?
  • WordPressって何?
  • SNSってやったほうがいいの?
  • メルマガって何のためにやるの?
  • LINE@って必要?
    ・・・他

一般的なネット集客のノウハウをおうちサロン・女性個人事業主の方向けにアレンジしてまとめました。

資料の詳細を見てみる