株式会社ドリル 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 ヘッダーにオリジナルのヘッダ画像を設置しよう – 目立つブログタイトル” への14件のコメント

  1. お世話になっております。

    4/13に
    /* クリックするとブログのトップに移動 */
    の追加方法についてご質問させていただきました。

    ご返信いただきありがとうございました

    その後、そのままコピーし追加したのですが、トップに移動しません。

    コピーした場所も自分なりに確認したのですが(/_;)

    そしてさらにサイドバーの文字色や背景色などの設定も、コツコツ行いその都度『表示を確認』しながら設定を保存していきましたが、なぜかブログを開くと反映されてこないのですが…

    うまくいかない原因が予測できましたら教えていただけますか??

    何度もすみません。

    • > たけいさん
      コメントありがとうございます。
      ブログを確認させて頂いたのですが、ちゃんとトップページへ移動している様です。
      サイドバーもですが、反映されていないと言うことで、もしかしたらキャッシュが表示されているかも知れません。

      キャッシュは表示速度を速める為の一時ファイルで、それが残っていると最新の情報ではなく過去の情報が表示されてしまうことがあります。
      この場合は「キャッシュのクリア」を行い、再度ページを読込めば最新の情報(修正内容が反映された画面)が表示されると思います。

      「キャッシュのクリア」の方法はブラウザやOSにより異なるので、ネットで検索してみて下さい。
      それでも反映されない様でしたら、再度ご質問頂けると助かります。

      どうぞ、宜しくお願いします。

  2. お返事ありがとうございます。

    翌日チェックしてみたら変更できていました!

    ありがとうございます!!
    大変助かりました!

    • > chirinさん
      コメントありがとうございます。
      ちゃんと反映されたと言うことで、安心致しました。
      ぜひまた、ご質問下さい。
      今後とも、宜しくお願い致します。

  3. はじめまして。

    大変分かりやすく参考になりました!

    説明に従って、新しいヘッダー画像に交換してみました。
    (以前はプロの方にカスタマイズをお願いしていたのですが
    今回は自分でヘッダー画像交換に挑戦してみました)

    画像URLを張り付けて、表示を確認するとちゃんと新しいヘッダーになっているのですが
    変更を保存してからブログを見ると、画像が変わっていません。

    表示の確認を見るとちゃんとできているので
    ブログに反映されるのにしばらく時間がかかるのでしょうか?

    お時間ありますときにコメントのお返事いただけると助かります。

    よろしくお願いいたします。

    • > chirinさん
      コメントありがとうございます。
      CSSを編集したのにブログに反映されないと言うことですが、エラーになっていなければすぐに反映されるはずです。

      エラーになっていないのに反映されない場合は、パソコンにキャッシュが残っている可能性があります。
      キャッシュとは一度読込んだファイルをパソコンの中に一定時間保存しておく機能で、CSSを修正しても
      パソコンに保存された古いファイルを見ていて反映されないことがたまにあります。

      この場合は、キャッシュのクリアを行うと最新の内容が表示される様になります。
      クリアの仕方はブラウザにより異なるので、Google先生に聞いてみて下さい。

      もしそれでも反映されない様でしたら、再度コメント頂けると助かります。
      どうぞ、よろしくお願い致します。

      • お返事ありがとうございます!

        さっそくキャッシュのクリアをしました。

        ですが、表示確認では画像が変更されているのに
        実際のブログには反映されていません。

        1~2日かかるのでしょうか?

        • > chirinさん
          コメントありがとうございます。
          キャッシュをクリアされたと言うことですが、通常であればすぐに反映されます。
          数日かかることはないです。

          ブログに反映されていないと言うことは、CSSの更新がエラーになっている可能性があります。
          長時間保存せずに更新作業していると、エラーになり更新できない場合があります。

          また、場合によってはプロの方が書いたCSSとバッティングしている可能性もあるので、どうしても
          反映されない場合はCSSを更新した状態でご連絡頂ければ私の方で確認してみます。

          どうぞ、宜しくお願い致します。

  4. 初心者ですが大変わかりやすく説明していただき、画像も設定することができました!!ありがとうございます。

    ただCSS編集画面に
    /* クリックするとブログのトップに移動 */
    の項目が見当たらないのですが…

    ブログタイトル・説明を消しつつ、トップページに戻る方法が他にあったら教えていただけますか?

    • > たけいさん
      コメントありがとうございます。

      「/* クリックするとブログのトップに移動 */」の項目ですが、元々のCSSには記述されていない項目になります。
      ですので、このままコピーして追加して頂ければ大丈夫です。
      説明不足ですみませんでした。

      また、追加してもトップに移動しない様でしたら、再度コメント頂けると助かります。
      よろしくお願い致します。

  5. 始めまして。
    すごく分かりやすくて感動でした。
    でも1つ問題が生じました。
    それは反映されたのですが小さく反映されていました。
    大きさを設定することはできますか??
    ぜひ回答お願いします

    • > みくさん
      コメントありがとうございます。
      小さくと言うのは画像でよろしいでしょうか?

      もし画像が小さく表示されてしまったのでしたら、アップロードされた画像が小さい可能性があります。
      (CSSでは画像の大きさは指定していない為です)
      「アップロードされた画像」の画像をクリックするとアップロードされた画像が見れますので、確認してみて下さい。
      また、アップロードした画像が小さくなっている場合は、ファイル形式をPNGにしてみて下さい。

      また、画像はもとのサイズで、表示範囲が小さい場合は

      width: 980px;
      height: 300px;
      
      の箇所を画像のサイズに変更してみて下さい。

      それでも変わらない場合はブログのURLを教えて頂ければ、私の方で確認致します。
      どうぞ、宜しくお願い致します。

  6. 始めまして、前回始めてオリジナルのヘッダー設置に成功しました。有りがとうございました
    今回変更しようと思い、作業を始めましたが
    保存迄は出来て居るのですが、アメブロのページに
    繁栄されなくて泣きたい感じです。この後どんな作業が必要なのか教えて頂ければ助かります。
    なおヘッダーのファイルは833×300px 412kb png
    PCは Mac OS X バージョン10.5.8です
    お返事お待ちします

    • > 村松ヨウ子さん
      コメントありがとうございます。
      変更と言うのは画像を変更しようとしたと言うのであっていますでしょうか?
      その際、画像を再度アップロードし、CSSも修正していますでしょうか?
      問題なくやっているのにも関わらず変更が反映されない場合とすると、キャッシュが表示されている可能性があります。

      キャッシュとは、パソコンの中に一次保存されているデータを表示してしまっている状態なので、変更が反映されていません。
      この場合は、何度か読込んだり、時間が経つと反映されたりします。
      また、ブラウザで「キャッシュをクリア」と言う事もできます。

      「キャッシュをクリア」についての詳しい方法はブラウザ名と合わせて検索すると出てくると思います。
      ぜひ一度お試し下さい。
      どうぞ、宜しくお願い致します。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">