アメブロを運営していく中で、「自分だけのヘッダーを設置したいなぁ」と思ったことはありませんか？
今回はやり方がわからないという方に向けて、アメブロでの独自ヘッダーの設置方法を紹介したいと思います。
ぜひ、この記事を読んで、あなたのブログに独自ヘッダーを設置してみてくださいね。
アメブロで独自のヘッダーを設定する方法
アメブロで独自のヘッダーを設定する手順
今回紹介する手順はざっくりとこんな感じになります。
- ヘッダーにする画像を用意する。
- ブログデザインを設定する（「css編集用」にする）
- ヘッダーをアメブロにアップロードする。
- ヘッダー用cssを貼り付ける。
- 公開する。
では、早速順を追って説明していきましょう。
と、その前に、先に忠告です。
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に、下記を追加します。
コピーして貼り付けてね。
/* ヘッダー画像を設定する */
.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は、分かりやすいように一番前か一番後ろに記載すると良いです。
わたしは一番後ろに記載していますよ。
そして、「url（）;」の間（上の画像の緑の部分）に、画面上部の、先ほどアップロードしたヘッダーのパスをコピーして貼り付けます。
「 url（https://~~~~.png）; 」っていう形になるよ！
ヘッダーの高さを合わましょう。
css内に「height: 300px;」という部分がありますが、ここがヘッダーの高さになります。
画像の高さに合わせて、この数字を変更しましょう。
今回のわたしの画像は横1120px×縦300pxのため、「height: 300px;」としています。
表示を確認する。
ひととおりできたら【表示を確認する】をクリックして、
ヘッダーに画像が表示されているか。
サイト全体が崩れていないか。
を確認します。
5.公開する
一通り問題がなければ、【保存する】をクリック。
これで公開されます。
アメブロで独自のヘッダーを設定する方法【2020年最新版】のまとめ
いかがでしたか？
説明を読んでると難しそうですが、実際にやることは画像のアップロードと、cssのコピー＆ペーストです。
慣れると5分もかかりません！
初心者の人でも、画像がすでに用意されているなら15分もあればできる作業なので、ぜひやってみてください。
今回は、cssの追加作業ですが、念のため、なにも手を加えていない状態のcssを全部コピーして、テキストファイル（「メモ帳」ともいう）などに貼り付けて保存しておくと安心ですよ！
そうしておけば、万が一何かしら失敗して保存してしまったときに、元通りに戻せるからです。