【コピペで簡単】アメブロヘッダーをおしゃれにカスタマイズする方法

ステキに変身！自分でできるアメブロカスタマイズの方法【2020年最新版】の続きです。

せっかく自分でアメブロカスタマイズするなら・・

サロン名を美しいフォントで表示したい！
タイトル文字を自由な位置に配置したい！

そんな願いを叶える記事です。

CSSの知識がなくてもコピペでできる方法なので、パソコンが苦手な起業ママもご安心くださいね。

オリジナル文字入りヘッダー画像を入れる

CSSを編集しない方法だと、このようなカスタマイズになります。

ヘッダー画像は入れられるのですが、タイトル文字はそのままです。

これを・・

こんな風に、ちょっと凝ったフォントスタイルにしたヘッダーを設置する方法をご紹介します。

手順は、

ヘッダー画像を作る
CSS編集可能デザインを設定する
画像をアップロードする
コードを貼り付ける

と、なります。

では、ひとつひとつ見ていきましょう。

ヘッダー画像を作る

ヘッダー画像を作る方法は、３つあります。

１，プロにお願いする（有料）

オススメ

アメブロカスタマイズサービス

フルカスタマイズなのに格安！プロが作る女性に好かれる美しいデザインのアメブロカスタマイズサービスです。

２，テンプレート豊富な無料ソフトを使って自分で画像を作る（無料）

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

この記事はアメブロのヘッダー画像をダウンロード不要の無料ソフトを使って自分で簡単に作る方法をご紹介しています。

３，スマホのアプリで作る（無料）

スマホでできる！アメブロヘッダーを１番楽して作る方法

アメブロカスタマイズで、一番悩むのがヘッダー画像です。売れてきたら、プロのデザイナーさんにきちんとお金を払って頼むことをおすすめします。この記事では、まだブログを初めて間もない方が、自分でカスタマイズする際に、アメブロのヘッダーを一番簡単に作る方法をご紹介します。目次を表示ヘッダー画像の作り方Canvaをダウンロードヘッダー画像の作成完成した写真の保存方法まとめ思い通りのデザインにならない方へヘッダー画像の作り方ヘッダー画像を作...

いずれかの方法で作成してくださいね。

サイズについて

2016年3月以降の新CSSではヘッダー画像の幅が1120ピクセルになりました。

依頼する場合にも、自分で作成する場合にも、このサイズだけは覚えておいてください。

高さですが、こちらのサンプルヘッダーで幅1120ピクセル✕高さ400ピクセルです。

できればPCのモニターで表示した時に、スクロールしないで記事が見えるほうがよいと思います。
モニターによって差がありますが、この高さが限界かなと思います。参考になさってください！

作成したものは、わかりやすい場所（デスクトップなど）に保存しておきます。

CSS編集可能デザインを設定する

ここからアメブロの設定となります。

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

②かなり下までスクロールして、「カスタム可能」をクリック

③その中の、CSS編集用デザインを選びます。

いくつかあるのですが、トップページに記事をどう表示するかが違ってきます。

今回は、こちらの一番オーソドックスな記事が1つ表示されるタイプにしました。

④続いて、カラム数を選びます。

アメブロの使い方次第です。

今はスマホ率が高いので、どんなにサイドバーがんばっても見てもらえない確率が高いです。１つ１つの記事をしっかりと作っていくほうを、おすすめします。

⑤カラム数を決めて「適用」をクリックすると、デザイン完了の画面が表示されるので「CSSの編集をする」をクリックします。

ここまでで、デザインの設定はできました。

画像をアップロードする

次に、最初に保存したヘッダー画像をアップロード（アメブロで使えるようにする）します。

①「ファイルを選択」をクリック

②保存しておいたヘッダー画像を選択して、「アップロード」をクリック

こんな感じで表示されれば、OKです。

↑この画像のパスを後から使用します。次からいよいよ、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！