自宅サロンママのためのネット集客術

WordPressで作るホームページ制作サービス

アメブロにオリジナルヘッダー画像を設定する方法【2016年度新CSS対応】

August 22, 2016
9060 views
約 6 分
アメブロにオリジナルヘッダー画像を設定する方法【2016年度新CSS対応】
2017年7月のアメブロの仕様変更によりCSSの一部を修正いたしました(2017/8/25)

自分でできるアメブロカスタマイズの方法【2016年最新版】の続きです。

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

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

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

CSSの知識がなくても、
コピペでできる方法なので、

パソコンが苦手な起業ママもご安心くださいね。

※ご注意!!
こちらの操作を行うと、現在のデザインはリセットされます。
すでにカスタマイズをプロにお願いしている方は全部消えてしまうのでご注意ください。

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

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

カスタマイズ後

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

これを・・

オリジナルヘッダー画像

 

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

手順は、

①ヘッダー画像を作る

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

③画像をアップロードする

④コードを貼り付ける

と、なります。

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

ヘッダー画像を作る

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

1,プロにお願いする(有料)
ブログやホームページのヘッダー画像を格安で頼む方法

2,Photoshop、Gimp、Pixlrなどの画像加工ソフトを使ってパソコンで作る(無料)

3,スマホのアプリで作る(無料)
アメブロのヘッダーをスマホのアプリで作る方法

 

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

 

その際、1つだけお願いがあります。

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

依頼する場合にも、
自分で作成する場合にも、

このサイズだけは覚えておいてください。

高さですが、

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

サンプルヘッダー

 

できればPCのモニターで表示した時に、
スクロールしないで記事が見えるほうがよいと思います。

モニターによって差がありますが、
この高さが限界かなと思います。

参考になさってください!

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

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

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

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

管理画面のデザインの変更

 

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

カスタム可能を選ぶ

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

カスタム可能デザイン

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

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

 

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

カラム数選びのヒント

・1つ1つの記事をしっかり読んでほしい→2カラムメニュー右

・サイドのメニューに注目してほしい→3カラム

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

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

 

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

デザイン完了

 

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

画像をアップロードする

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

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

CSS編集 ファイルの選択

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

アップロード

こんな感じで表示されれば、OKです。
アップロード後
↑この画像のパスを後から使用します。

 

次からいよいよ、CSSにコードを加えていきます!

 

コードを貼り付ける

何やら英語がだだーっと並んでいますが、読まなくて大丈夫です。

①ひたすらスクロールして、一番下まで表示してください。

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!

アメブロのCSS編集画面

書き加えるのは、以下の2つのみ。

 

ヘッダー画像URLを指定

ヘッダー画像のURLをCSSに貼り付けます。

①もう一度、一番上までスクロールして戻し、「この画像のパス」をクリックして選択しコピーする。(ブラウザによって動作の違いあり。枠内を全選択(Ctrl+A)して、コピー(Ctrl+C)してもOK)

画像のURLをコピー

②また一番下までスクロールして、

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

「ここに・・貼り付ける」部分を削除して、先ほどコピーした画像URLを貼り付ける。

するとこんな感じになります↓

css貼付け後

あと1つで終わりです!!
がんばれっ!

 

ヘッダーの高さを指定する

ここでは、400pxになっていますが、作成したヘッダー画像の高さに変更してください。

ヘッダーの高さ変更

設定は以上です。

一番下の「表示を確認する」をクリックしてきちんと貼り付いているか確認します。

確認画面

OKでしたら、もう一度編集画面に戻り「保存」をクリックして完成です。

 

サイドバーのタイトル文字下の線や、
記事のタイトル文字色、線の色を変更したい場合には、
こちらの記事をご覧ください。
アメブロカスタマイズに必須!色に関する便利ツール

まとめ

・アメブロのヘッダー画像にオリジナルの文字を入れたい場合は、CSS編集可能なデザインを選ぶ。

・一番下にコードを貼り付けることで、簡単に設定できる。