株式会社ドリル Home > アメブロカスタマイズ > ヘッダーのカスタマイズ > 【アメブロカスタマイズ】2-3 ヘッダーにオリジナルのヘッダ画像を設置しよう – 目立つブログタイトル

【アメブロカスタマイズ】2-3 ヘッダーにオリジナルのヘッダ画像を設置しよう – 目立つブログタイトル

たまにクリックで応援して頂けると、励みになります。
⇒《人気ブログランキング》

2013 01 08 1911

 

こんにちは、ドリル 鈴木です。
今日はアメブロのヘッダーにオリジナルの画像を設置する方法について説明したいと思います。

 

元々のテンプレートは白地に文字だけととても寂しい状態です。
先の記事で文字を修正しても、やはり物足りない事も多いと思います。

 

ぜひ、この記事を読んでオリジナルのヘッダー画像を設置して下さい。
オリジナルのメッセージを折り込んで画像を作成すれば目立つ事間違いありません。
それでは、スタートしましょう。 

 

カスタムを始める前に

今回はCSSを編集し、ヘッダーに背景画像を設定する方法で、オリジナル画像を設置します。
他にも方法はあるのですが、これが最も簡単に出来る方法なのと、CSSで背景画像を使用する基本になるので、ぜひ覚えて下さい。
また、その際に「タイトル」や「説明」を見せなくし、画像をクリックするとブログのトップページに移動する様にしています。 
早速今回使用するヘッダー画像はこちらです。

2013 01 30 1312 

サイズも重要になるため、しっかりと確認しておいて下さい。

 

CSSの編集画面を開く

2013 01 28 1526

まずは、CSSの編集画面を開いて下さい。
「ブログを書く」>サイドバーの「ブログデザイン」の「デザインの変更」>「CSSの編集」をクリックします。

 

ヘッダー用の画像をアップロードする

まず最初にヘッダーで使用する画像をアメブロにアップロードします。
外部のサーバにおく事もできますが、後々の事も考え、こちらをおすすめします。
アップロード方法は、以下の手順になります。

 

1. CSS編集画面の「ファイルを選択」をクリックする

2013 01 30 1357 

 

2. 使いたい画像を選択し、「開く」をクリックする

2013 01 30 1314

 

3. 正しくファイルが選択されている事を確認し、「アップロード」をクリック

2013 01 30 1315

 

4. アップロードされた画像を表示されるので、「この画像のパス」をコピーすれば使用出来ます。

2013 01 30 1317

 

修正前のページとCSS

先に修正前のページとCSSになります。
なにもカスタマイズしていなければ、この様になっているはずです。

2013 01 30 1256 

 

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
}

/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea{
padding-bottom:4px;
}

/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea{}

 

CSSを編集して、画像を設置する

まず、画像を設置してみましょう。
その際のCSSは以下の通りです。

 

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
    background-image: url(コピーした画像のパス);
    background-repeat: no-repeat;
    background-position: center top;
    width: 980px;
    height: 300px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

 

実際の表示はこの様になります。
画像は表示されますが、タイトルと説明がかぶってしまい、見難くなってしまっています。
また、画像と「ブログ画像一覧を見る」 が近すぎるのも見難く感じます

2013 01 30 1411

 

CSSを編集し、さらに修正を加える

それでは最終的なCSSの修正をしていきましょう。
今回は「タイトル」「説明」を表示しなくし、「画像」と「ブログ画像一覧を見る」 の間をあけます
また、「タイトル」を決してしまうと、ブログのトップページに戻るリンクがなくなってしまうので、それも合わせて解決します。
それでは、実際のCSSになります。

 

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
    background-image: url(コピーした画像のパス);
    background-repeat: no-repeat;
    background-position: center top;
    width: 980px;
    height: 300px;
    margin-bottom: 15px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea {}

/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea {
    text-indent: -9999px;
}

/* クリックするとブログのトップに移動 */
.skinTitleArea a.skinTitle {
    width: 980px;
    height: 300px;
    display: block;
}

/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea {
    text-indent: -9999px;
}

 

設定後の画面は以下の様になります。
画像もクリックすることができるので、確認してみて下さい。 

 2013 01 30 1325

 

まとめ

以上で修正で画像の設定が完了です。

文字の表示を消す為に「text-indent」を使用しています。
これは文字を消しているのではなく、画面の左端に飛ばしてしまっている事になります。
文字を消したくない場合は、 「text-indent」の部分を消して下さい。
文字の色や大きさを変える事でも、効果的なヘッダーにする事ができます。 

参考:ヘッダーの文字の位置を修正してみよう

参考:ヘッダー修正 – ヘッダーの文字の色・大きさを修正してみよう

 

また、 タイトルを消した際のクリックに関しても合わせて解決しています。
これをしないとトップページへのリンクがなくなってしまい、見てもらえるページ数が少なくなってしまうため、必ず設定しましょう

以外と簡単ですが、効果が出やすい修正なので、ぜひ試してみて下さい。

 

予想通りに修正出来たでしょうか?
もし変わらなかったとしたら、画像のアップロードや画像のパスの指定が間違っている可能性が高いので、チェックしてみて下さい。
また、わかりにくい所があれば、気軽にコメントで質問して下さい。

 

以上、鈴木でした。

 

【アメブロカスタマイズ】2-3 ヘッダーにオリジナルのヘッダ画像を設置しよう – 目立つブログタイトル” への50件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です