ヘッダー画像にリンクを張るには | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。


アメブロのカスタマイズをされている方から、このようなご質問いただきました。



ヘッダー画像を自分で作成して、設置したのですが、ヘッダー画像をクリックしても何もおきません。

ヘッダー画像をクリックしたら、ブログトップに戻るようにしたいのですが。


自分でヘッダー画像を設置するまでは、ブログタイトルをクリックしたらブログトップが表示されるようにリンクされていましたね。

ブログタイトルを非表示にしてしまったら、確かにリンクもなくなってしまいます。


その場合は、[CSSの編集]で、次のCSSコードを追加するとよいです。

/* ヘッダー画像にリンクを張る */
h1.skinTitleArea a{
  display:block;/* ブロック要素とする */
}


ただ・・・

別の方で、同じ質問がありましたので、こちら↑のCSSソースをお伝えして、コピペしてもらったのですが


何も変わりません~~T^T


・・・と。

??

で、CSSを調べてみると、

/* タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px; /*上下の指定*/
display:none; /*非表示に*/
}


とCSSソースが設定されていました^^;


そもそもヘッダー画像にリンク、というのは

もともとのブログタイトルのリンクを、displayをblockにすることによって、ヘッダー画像にリンクしたようにみせているだけです。

ですから、そのブログタイトルを非表示(none)にしてしまうと、ブログトップにリンクできなかったりします。


・・・で、その場合は、その↑CSSソースをさっくりと削除していただいて、

こちら↓のCSSソースをコピペしてもらいました。

/* ヘッダー画像にリンクを張る */
h1.skinTitleArea a{
  width:980px;/* 画像の横幅 */
  height:300px;/* 画像の高さ */
  display:block;/* ブロック要素とする */
  position:absolute;/* 位置を固定 */
  text-indent:-9999px; /* テキストを範囲外へ移動 */
}

/* 説明文を非表示 */
.skinDescriptionArea{
  display:none; /* 非表示にする */
}


すると、あとはブログを更新(F5キー or commnd+R)していただいて、OKです^^!


うまくできると、

アメブロカスタマイズって楽しいですねぇ~

って思いますよ^^!


・・・で、うまくいったら、その嬉しさをブログに書いて、

みなさんに知らせてあげるとよいのではないかと思います^^



以上、ワンポイントレッスンでした。


LIDS澄川・ライフデザインスクール
川上 雄大