アメブロで独自のヘッダーを設定する方法【2020年最新版】

web関連

アメブロを運営していく中で、「自分だけのヘッダーを設置したいなぁ」と思ったことはありませんか?

今回はやり方がわからないという方に向けて、アメブロでの独自ヘッダーの設置方法を紹介したいと思います。

ぜひ、この記事を読んで、あなたのブログに独自ヘッダーを設置してみてくださいね。

スポンサーリンク

アメブロで独自のヘッダーを設定する方法

アメブロで独自のヘッダーを設定する手順

今回紹介する手順はざっくりとこんな感じになります。

  1. ヘッダーにする画像を用意する。
  2. ブログデザインを設定する(「css編集用」にする)
  3. ヘッダーをアメブロにアップロードする。
  4. ヘッダー用cssを貼り付ける。
  5. 公開する。

では、早速順を追って説明していきましょう。

 

と、その前に、先に忠告です。

一般のユーザーは、スマホ版のアメブロで、ヘッダーを表示させることができません。

なので、オリジナルのヘッダーを表示させられるのはパソコンからみた場合だけとなります。(2020年3月現在)

その点については、あらかじめ認識しておきましょう。

1.ヘッダーにする画像を用意する。

まずはヘッダーにする画像を用意しましょう。

自分で好きな画像を使って編集しても良いですし、自分での作成が難しければ、ココナラなどのwebサービスを使えば、簡単に依頼できますよ。

>>ココナラでアメブロヘッダーの作成を依頼する

ヘッダーのサイズは、横幅は1120px、縦は300px以上にしましょう。

縦幅については、特に明確に決まっているわけではありませんが、見栄えとしては300px~500pxくらいがよいです。

これはあまりに縦が大きすぎると、最初にブログを開いたときにヘッダーしか目に入らず、コンテンツのほうに気を引くことができないためです

実際に作ったヘッダー

ちなみに、こちらがわたしが2020年3月現在使用しているアメブロヘッダーです。

1120px×300pxで作成しています。

アメブロオリジナルヘッダーカスタマイズ方法

実際に設置してみるとこのようになります。

アメブロオリジナルヘッダーカスタマイズ方法

 

2.ブログデザインを設定する(「css編集用」にする)

アメブロでの「オリジナルヘッダー」は、デザイン設定を「css編集用デザイン」にする必要があります。

なぜならcssを触る必要があるからです。

他の既にデザインされたようなものは、cssを利用者側で変更することができないので、オリジナルヘッダーを設置することができません。

 

設定ページまでは、

【ブログ管理】⇒【デザインの設定】⇒【カスタム可能】⇒【css編集用デザイン】⇒【適用する】

の順に辿っていきます。

実際の画面での手順は以下の通り。
ブログ管理

アメブロオリジナルヘッダーカスタマイズ方法

デザインの設定

アメブロオリジナルヘッダーカスタマイズ方法

カスタム可能

アメブロオリジナルヘッダーカスタマイズ方法

 

css編集用デザイン

アメブロオリジナルヘッダーカスタマイズ方法

適応する

アメブロオリジナルヘッダーカスタマイズ方法

上部の「カラム」を選ぶ部分は、お好みで大丈夫です。

平たく言うと、「サイドの項目をどの位置に表示しますか?」というものです。

選択は後からでも可能ですし、いつでも変更できます。

3.ヘッダーをアメブロにアップロードする。

用意したヘッダーをアメブロにアップロードしましょう。

1.CSSの編集画面へ

【デザインの設定】⇒【CSSの編集】にいきます。

アメブロオリジナルヘッダーカスタマイズ方法

2.ファイルをアップロード

アメブロオリジナルヘッダーカスタマイズ方法

【ファイルを選択】をクリックすると、フォルダが開くので、用意した画像を選びます。

その後【アップロード】

 

少し待つと、下の「アップロードされた画像」のところに今アップロードした画像が追加されます。

4.ヘッダー用cssを貼り付ける。

画像をアップロードした画面の下に行きます。

すると、cssが記載されている箇所があります。

今回は、cssの追加作業ですが、念のため、なにも手を加えていない状態のcssを全部コピーして、テキストファイル(「メモ帳」ともいう)などに貼り付けて保存しておくと安心ですよ!

そうしておけば、万が一何かしら失敗して保存してしまったときに、元通りに戻せるからです。

既存のcssに、下記を追加します。

にぃにぃ
にゃろしぃ

コピーして貼り付けてね。

/* 以下、自分の設定*/
/* ヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(https://*****************************************.png);
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [amb-layout=”headerInner”]>a,
.skin-bgHeader [data-uranus-layout=”headerInner”]>a {
height: 300px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;

上記はヘッダーに関するCSSになります。

「 /* 以下、自分の設定*/ 」

のように、「/*  */」で挟まれたものは、cssとして読み込まれないので、メモ書きなどとして活用すると便利です。

今回の追加するcssは、分かりやすいように一番前か一番後ろに記載すると良いです

にゃろねこ
にゃろねこ

わたしは一番後ろに記載していますよ。

アメブロオリジナルヘッダーカスタマイズ方法

 

そして、「url();」の間(上の画像の緑の部分)に、画面上部の、先ほどアップロードしたヘッダーのパスをコピーして貼り付けます。

アメブロオリジナルヘッダーカスタマイズ方法

にぃにぃ
にゃろしぃ

「 url(https://~~~~.png); 」っていう形になるよ!

ヘッダーの高さを合わましょう。

css内にheight: 300px;という部分がありますが、ここがヘッダーの高さになります。

画像の高さに合わせて、この数字を変更しましょう。

今回のわたしの画像は横1120px×縦300pxのため、「height: 300px;」としています。

表示を確認する。

 

ひととおりできたら【表示を確認する】をクリックして、

ヘッダーに画像が表示されているか。

サイト全体が崩れていないか。

を確認します。

少しでもおかしいと思ったら保存しないようにしましょう。

5.公開する

一通り問題がなければ、【保存する】をクリック。

これで公開されます。

アメブロで独自のヘッダーを設定する方法【2020年最新版】のまとめ

いかがでしたか?

説明を読んでると難しそうですが、実際にやることは画像のアップロードと、cssのコピー&ペーストです。

慣れると5分もかかりません!

初心者の人でも、画像がすでに用意されているなら15分もあればできる作業なので、ぜひやってみてください。

Ameba pick遂に開始!稼げるアフィリエイトなのか?アメブロで商品を紹介する方法と使い方!
今回は、2020年4月2日からアメブロで開始された新サービス「Ameba Pick(アメーバピック)」の使い方について紹介します。 アメブロで収益化を目指したい方は、ぜひ参考にして収益化を目指しましょう。 Ameba pickでの稼...
タイトルとURLをコピーしました