アメブロ ヘッダー の作り方 【ameblo デザイン カスタマイズ 】

アメブロ デザインカスタマイズ 基本 ヘッダーの作り方
アメブロ デザインカスタマイズ 基本 ヘッダーの作り方
 

ここでは、アメブロ ヘッダー の作り方を紹介します。
 

アメブロ(ameblo)でオリジナルのデザインを自作してみましょう。今回は、カスタマイズ用CSSの適用とヘッダー作成(ヘッダー画像の追加、ブログタイトル・説明文の調整、タイトル位置の調整)をご紹介します。

 

※2016年8月1日のアメブロ仕様での設定手順になります。

 

(参考)アメブロ カスタマイズ関連記事

アメブロ カスタマイズ関連の記事をまとめてみました。
【アメブロ カスタマイズ 記事一覧】オリジナルブログの作り方
 

該当の記事があるかご確認ください。
 
 

 

 

それでは、本記事の目次に入っていきます。
 
 

もくじ

以下は本記事のもくじです。

  1. 1.概要
    1. 1-1.ヘッダー画像イメージ
  2. 2.設定手順
    1. 2-1.CSS編集用デザインを適用する
    1. 2-2.CSSを編集する
      1. 2-2-1.ヘッダー画像を追加する
      2. 2-2-2.ブログタイトルと説明文を編集する
      3. 2-2-3.ヘッダータイトル位置を調整する

それでは、概要から説明します。
 
 

スポンサーリンク



 
 

 
 

1. 概要

 

1-1. ヘッダー画像イメージ

今回は下記のような形で、オリジナルのヘッダー画像の追加して、背景に合わせてブログタイトル・説明文、およびタイトル位置の調整します。

 

アメブロ ヘッダーカスタマイズ(編集後)
アメブロ ヘッダーカスタマイズ(編集後)

 

それでは設定手順を説明します。

 

2. 設定手順

 

2-1. CSS編集用デザインを適用する

まずはじめにカスタマイズ用のアメブロデザインを適用します。

 

アメブロで設定ボタンから、ブログの設定「デザインの変更」を選択します。

アメブロ 設定>デザインの変更
設定>デザインの変更

 

「スタンダード」「タイル」「リスト」などの形式からデザインを選択できます。

今回は一番多い「スタンダード」デザイン一覧を選択します。

ameblo デザイン>スタンダードを選択
「スタンダード」「タイル」「リスト」のうち、スタンダードを選択

 

一覧の中から「CSS編集用デザイン」を探して選択します。

CSS編集用デザインを選択
CSS編集用デザインを選択

 

好きなレイアウトを選択できます。ここでは良くある「2カラム・メニュー右」を適用します。

※適用すると以前のデザインはリセットされるので注意してください。以前のデザイン名を覚えておくと元に戻したいときにスムーズです。

アメブロ CSS編集用デザインを適用する
CSS編集用デザインを適用する

 

ブログデザインが適用完了します。

CSS編集用デザインを適用する
CSS編集用デザインを適用する

 

デフォルトは下記のようなデザイン状態になっていますので、ここからカスタマイズする形になります。

デフォルトの状態のページです
デフォルト状態のページ

 

2-2. CSSを編集する

前のページで「CSSを編集する」を押下するとCSSの編集画面が表示されます。この画面でCSSを編集します。

アメブロ CSS編集画面
CSS編集画面

 

2-2-1. ヘッダー画像を追加する

まずはヘッダー画像に使いたい好きな画像を用意しておきます。

 

サイズにより見え方が変わりますが、下記の例では横幅2000px、高さ500pxの画像をつかいます。

画像をアップロードします。

ヘッダー画像などはここでアップロード

 

アップロード後「この画像のパス」のURLをコピーしておきます.

ヘッダーファイルをアップロード
ヘッダーファイルをアップロード

 

続けて少し下にスクロールして(2)ヘッダーエリアのスタイルで.skin-bgHeader{}の中を編集します。

CSS ヘッダー背景を編集
/* ヘッダー背景 */ .skin-bgHeader

デフォルトはbackground-color:#ffffff; で背景白色になっています。

 

ここでは下記のように設定しました。

.skin-bgHeader {
background:url("アップロード画像のパス") center no-repeat; /*アップロードした画像を背景に、画像の位置を中心に、繰返しなし */
height:500px; /* 高さ500px */
}

※ backgroundの意味についてはCSS backgroundプロパティについてのまとめを参照してください。

 

設定後に表示を確認するボタンを押下して表示を確認します。

アメブロ css .skin-bgHeader
CSSを編集後に表示を確認する

 

意図したようにヘッダー画像が適用されていることを確認します。

アメブロ ヘッダー画像の追加
アメブロ ヘッダー画像の追加

 

問題なければ先ほどの画面で保存します。

 

2-2-2. ブログタイトルと説明文を編集する

ブログタイトルや説明文が見えにくく、調整したい場合は以下の箇所を編集します。

 

まずはブログタイトルを調整します。

ブログタイトル(編集前)
ブログタイトル(編集前)

 

ブログタイトルは.skin-blogMainTitle{}を編集します。

ブログタイトル
/* ブログタイトル */ .skin-blogMainTitle

 

ここでは下記のようにフォントを大きくします。

.skin-blogMainTitle {
color:#333333;  /* デフォルトのまま*/
margin-bottom: 10px;  /* デフォルトのまま */
font-size: 42px; /* フォントサイズを大きく */
}

引き続き、ブログ説明文を編集します。

ブログ説明文(編集前)
ブログ説明文(編集前)

 

ブログ説明文は .skin-blogSubTitle{}を変更します。

ブログ説明文
/* ブログ説明文 */ .skin-blogSubTitle

 

ここでは文字色が薄いので黒色に近くして、フォントも少し大きくします。

.skin-blogSubTitle {
color: #333333;  /* 黒色に近い灰色 */
font-size: 18px;  /* フォントを少し大きく */
}

 

  • 背景や文字の色で
    xxx-color:#○○○○○○;
    という記述を見かけることが多いと思います。

    こちらのAdobeのサイトで無料で使えますのでご活用ください。
    Adobe Color CC – カラーホイール

 

同様に表示を確認するより内容を確認してください。

ブログタイトルと説明文(編集後)
ブログタイトルと説明文(編集後)

 

2-2-3. ヘッダータイトル位置を調整する

最後にヘッダー画像の大きさによって、ヘッダータイトルの位置を調整したい場合があります。

下記のCSSプロパティ .skin-headerTitle{}を編集します。

/* ヘッダータイトル */ .skin-headerTitle
/* ヘッダータイトル */ .skin-headerTitle

 

今回は位置を下にずらします。

.skin-headerTitle {
padding-top: 180px; /* 上から80px→180pxに(100px下にずらす) */
padding-bottom: 80px; /* デフォルトのまま */
text-align: center; /* デフォルトのまま */
}

 

ブログタイトルと説明文が全体的に下に移動しました。

アメブロ ヘッダーカスタマイズ(編集後)
アメブロ ヘッダーカスタマイズ(編集後)

 

このようにして、オリジナルの画像やデザインにすることができます。

 
今回は以上になります。最後までご覧いただきありがとうございました。
 
 

スポンサーリンク



 
 

 
 

参考)アメブロ カスタマイズ関連記事

 
アメブロ含め、日本と世界で人気のSNS一覧 日本の動向、特徴と利用者数の比較記事を作りました!
人気の SNS 一覧 特徴と利用者数を比較【ソーシャルメディア 日本と世界】
 

アメブロ カスタマイズ関連の記事です。難易度は雰囲気で設定しました!!

 
 

アメブロやってます!読者登録歓迎です(^^)