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

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

アメブロカスタマイズの導入編の続きです。今回は新デザイン・旧デザインのカスタム用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-color: transparent;/* ヘッダー背景色 */
background-image: url(ヘッダー画像URL);
background-repeat: no-repeat;
background-position: center top;
height: 400px;/* ヘッダー高さ */
width: 1120px;/* ヘッダー横幅 */
margin: 0 auto;
}
/* ヘッダーの横幅 */
.skin-bgHeader [data-uranus-layout="headerInner"] {
width: 1120px;
}
/* ヘッダーの高さ */
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
height: 400px;
}

height: 400px;/* ヘッダー高さ */は適宜変更してください。例えば、500pxのヘッダー画像の場合はheight: 500px;/に変更してください。

このように編集した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;/* グローバルメニューを設置しないとき余白調整 */
}

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

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


テストブログで確認する

以上アメブロカスタマイズのヘッダー設置編でした。ご参考になれば幸いです。

アメブロカスタマイズ講座:
アメブロカスタマイズ講座まとめ
アメブロカスタマイズ 導入編 カスタム用のスキンとレイアウトの設定
アメブロにグローバルメニュー(メニューバー)を設置するカスタマイズ
アメブロに画像を使ったグローバルメニューを設置する
アメブロのメッセージボードをカスタマイズする
アメブロのサイドバーに画像を使ったデザインを適用する
アメブロの文字色・背景色・ボタンの色の変更

アメブロ での集客術を勉強する上でおすすめの書籍です。”ネットで「女性」に売る 数字を上げる文章とデザインの基本原則”はアメブロだけでなく「女性に響く」文章の書き方、デザインの見せ方の基本を学ぶのにおすすめです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次