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

女性個人事業主専門 WordPressで作るホームページ作成講座

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

201309 views
約 6 分
2017年7月のアメブロの仕様変更によりCSSの一部を修正いたしました(2017/8/25)

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

こんにちは!
ママのためのネット集客術 伊藤真穂です。

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

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

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

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

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

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

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

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

これを・・
オリジナルヘッダー画像

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

手順は、

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

と、なります。

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

ヘッダー画像を作る

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

1,プロにお願いする(有料)

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

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

サイズについて

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

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

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

サンプルヘッダー

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

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

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

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

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

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

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

カスタム可能を選ぶ

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

カスタム可能デザイン

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

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

 

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

カラム選びのヒント

・1つ1つの記事をしっかり読んでほしい→2カラムメニュー右
・サイドのメニューに注目してほしい→3カラム

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

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

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

デザイン完了

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

画像をアップロードする

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

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

CSS編集 ファイルの選択

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

アップロード

こんな感じで表示されれば、OKです。
アップロード後↑この画像のパスを後から使用します。次からいよいよ、CSSにコードを加えていきます!

コードを貼り付ける

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

①ひたすらスクロールして、一番下まで表示してください。
CSS編集画面の最終行

②最終行の下に、以下のコードをコピーして貼り付けてください。

 

こんな感じに貼り付けば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編集可能なデザインを選ぶ。
・一番下にコードを貼り付けることで、簡単に設定できる。

 
この記事を書いた人

PC講師20年、おうちサロン歴6年。
次男の障害をきっかけにママ支援をするも、SEOの知識の無さから本当に必要な人に情報が届かないという、もどかしさを経験。それをきっかけにWordPress、SEOを本格的に学び、同じ悩みを持つ女性個人事業主の方に向けて、情報発信をしています。

詳しいプロフィールはこちら