ブログカスタマイズ承ります。詳細はこちら▶▶

アメブロでヘッダー画像を設置する方法

アメブロカスタマイズ 導入編 カスタム用のスキンとレイアウトの設定

アメブロカスタマイズの導入編の続きです。今回は新デザイン・旧デザインのカスタム用CSSでヘッダー画像を設置する方法をご紹介します。

ヘッダー画像作成

まずヘッダー画像を作ります。作り方はここでは書きません。PhotoshopでもIllustratorでも、Canvaでもご自身で使いやすいツールでヘッダー画像を作って下さい。

参考 無料デザインツールCanvaとは?できることを解説サルワカ
ヘッダー画像のサイズ目安
  • 新デザイン ⇛ 横幅1120px 縦幅300~400px
  • 旧デザイン ⇛ 横幅980px 縦幅 300~400px

今回は新デザイン(横幅1120px 縦幅400px)、旧デザイン(横幅980px 横幅400px)でヘッダー画像作りました。

画像をアップロード

ヘッダー画像をアメブロのサーバーにアップロードします。アメブロ管理画面>デザインの設定>CSSの編集で「ブログデザインヘッダ・背景用画像の追加」から画像ファイルをアップロードできるのでここからアップロードします。

ここで画像のパス(画像URL)をコピーしておきます。

ブログデザインCSSの編集

新デザイン

新デザインのカスタム用CSSの書き方は以下の通りです。前回の記事で書いたように変更前のCSSを全部コピーし、テキストエディタに貼り付け、ameblo.cssと名前を付け保存しておきます。ヘッダーを設置するには以下のCSSを対応する箇所を上書き編集するか、CSSの最後に追加して下さい。

テキストエディタで「Ctrl + F」のショートカットキーを使うと検索バーが出てくるので「ヘッダーエリア」で検索して該当箇所を探してください。

注意
ヘッダー画像URLのところは先程アップロードした画像のパスを入れて下さい。
CSS
/*
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*
 (2)ヘッダーエリアのスタイル
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*
*/
/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ブログタイトルエリア、ヘッダー画像の下にテキストを隠す */
.skin-blogTitle {
z-index: -1;
}
/* ブログタイトルと説明文を非表示にする */
/* ブログタイトル非表示 */
.skin-blogMainTitle {
text-indent: -9999px;
}
/* ブログ説明文非表示 */
.skin-blogSubTitle {
display: none;
}
/* ヘッダータイトル */
.skin-headerTitle {
padding-top: 0;/* ヘッダー上余白 */
padding-bottom: 0;
text-align: center;
}
/* ヘッダーの背景色とヘッダー画像 */
.skin-bgHeader {
background: no-repeat scroll center;
background-color: transparent;/* ヘッダー背景色 */
background-image: url(ヘッダー画像URL);
height: 400px;/* ヘッダー高さ */
width: 1120px;/* ヘッダー横幅 */
margin: 0 auto;
}
/* ヘッダーの横幅 */
.skin-bgHeader [data-uranus-layout="headerInner"] {
width: 1120px;
}
/* ヘッダーの高さ */
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
height: 400px;
}

このように編集したCSSを「現在使用中のブログデザインCSS」に貼り付け「保存」します。保存前に「表示を確認する」でプレビューして問題ないかご確認下さい。

キャッシュの削除

アメブロでデザインをパソコンで確認するときは必ずCtrl + F5(Windows)またはCommand + R(Mac)でスーパーリロードしてからご確認下さい。キャッシュがブラウザに残っているとCSSの変更が反映されないので 必ずスーパーリロードでキャッシュをクリアして下さい。

ヘッダーが設置できました。

以下の私のテストブログでご確認いただけます。

テストブログで確認

旧デザイン

旧デザインでのCSSの書き方は以下の通りです。「ブログヘッダー」でテキストエディタで検索して該当箇所を書き換えるか、CSSの一番最後に追加して下さい。

注意
ヘッダー画像URLのところは先程アップロードした画像のパスを入れて下さい。
CSS
/* (3-2) ブログヘッダー
--------------------------------------------*/
.skinTitleArea a {
display: block;
width: 980px;/* ヘッダー横幅 */
height: 400px;/* ヘッダー高さ */
}
.skinHeaderArea {
background-image: url(ヘッダー画像URL);/* ←ブログヘッダーに背景画像を敷きたいとき */
background-repeat: no-repeat;
background-position: center top;
height: 400px;/* ヘッダー高さ */
margin-bottom: 0;
}
/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea {
padding: 0;
}
/* ブログタイトルと説明文を非表示にする */
.skinHeaderArea2 {
text-indent: -9999px;
}
.skinDescriptionArea {
display: none;
}
.skinFrame {
padding-top: 0;/* ヘッダーエリア上部の余白 */
}
.skinContentsArea {
margin-top: 30px;/* グローバルメニューを設置しないとき余白調整 */
}

/* グローバルメニューを設置しないとき余白調整 */のところは場合によって適宜調整してください。

旧デザインでのヘッダー設置後は以下のようになります。

テストブログで確認する

以上アメブロカスタマイズのヘッダー設置編でした。ご参考になれば幸いです。 アメブロカスタマイズ講座: アメブロカスタマイズ 導入編 カスタム用のスキンとレイアウトの設定 アメブロにグローバルメニューを設置するカスタマイズ アメブロに画像を使ったグローバルメニューを設置する アメブロのサイドバーに画像を使ったデザインを適用する アメブロのメッセージボードをカスタマイズする