ヘッダー画像をブログトップへのリンクにする方法

アメブロカスタマイズのわざめーばです。

こんにちは。

今回は『ヘッダー画像をブログトップへのリンクにする方法』です。

アメブロのヘッダーにオリジナルの画像を設定し、ブログタイトルとブログ説明文を消すと、アメブロのトップページへ戻るリンクがなくなってしまいます。

そこで、ヘッダー画像をクリックすれば、そのアメブロのトップページへジャンプするようにカスタマイズしてみましょう。

まず確認

このカスタマイズは、CSSの編集で行いますので、もし、やり方がわからない場合はCSSの編集方法を確認しておいて下さい。

CSSを編集

では、以下のコードをアメブロのユーザーCSSの最後に追加して下さい。

/* ヘッダー画像をブログトップへのリンクにする */
.skinHeaderArea2,.skinBlogHeadingGroupArea{
  padding:0;
}
#header h1,.skinTitleArea{
  display:block;
  padding:0;
  text-indent:-9999px;
}
#header h1 a,.skinTitle{
  display:block;
  height:300px;
}

このコードは、新旧どちらのデザインでも使えるようになっています。

お使いのデザインが新デザインか旧デザインかわからない場合は、とりあえずこのコードを使っていただければ大丈夫だと思います。

赤文字部分には、通常はヘッダー画像の高さを設定します。

なお、お使いのデザインが新デザイン『CSS編集デザイン』の場合は、次のコードでもOKです。

/* ヘッダー画像をブログトップへのリンクにする */
.skinHeaderArea2,.skinBlogHeadingGroupArea{
  padding:0;
}
.skinTitleArea{
  display:block;
  padding:0;
  text-indent:-9999px;
}
.skinTitle{
  display:block;
  height:300px;
}

また、逆に、お使いのデザインが『【カスタム可能】ベーシック』等の旧デザインの場合は、次のようになります。

/* ヘッダー画像をブログトップへのリンクにする */
#header h1{
  display:block;
  padding:0;
  text-indent:-9999px;
}
#header h1 a{
  display:block;
  height:300px;
}

いずれの場合も、赤文字部分には、ヘッダー画像の高さを設定します。

以上、『ヘッダー画像をブログトップへのリンクにする方法』でした。

よかったらお試し下さい。

関連記事

ヘッダー画像を設定する方法
ブログタイトルとブログ説明文を消す方法
CSSの編集

この記事は、2010/09/19の記事を2011/09/24に新旧統合記事として全面書きかえしました。

アメブロカスタマイズで自分らしい魅力的なアメブロを作る技