アメブロデザインの著者による読者サポートブログ

翔泳社から発売されている、Ameba公式ガイド「かんたんアメブロデザイン」の著者が運営する、読者サポートブログです。書籍には書けなかった内容や最新の情報をお届けします。

ヘッダーに大きな画像を配置しているテンプレートです。
この画像部分をクリックして、トップページなどにリンクできるように
カスタマイズする方法を解説します。

まずは、フリースペースにクリックできるエリアheader_picと、
その部分をクリックしたときのリンク先を追加します。

<div id="header_pic"><a href="http://www.ameblo-c.jp/"></a></div>

クリックできるエリアheader_picは、
スタイルシートでヘッダ画像と同じ位置に
absoluteで定義します。

div#header_pic{
position:absolute;
top:124px;
width:1115px;
height:450px;
margin:0;
padding:0;
}

aタグはブロックレベルに変更して
エリアいっぱいを対象とします。

div#header_pic a{
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
}

この方法は、自分の好きな位置をクリックさせたい時に
応用できるかと思いますが、位置の計算を間違えないように
注意してくださいね。

かんたんアメブロデザインの著者:中村義和さんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス

    ブログをはじめる

    たくさんの芸能人・有名人が
    書いているAmebaブログを
    無料で簡単にはじめることができます。

    公式トップブロガーへ応募

    多くの方にご紹介したいブログを
    執筆する方を「公式トップブロガー」
    として認定しております。

    芸能人・有名人ブログを開設

    Amebaブログでは、芸能人・有名人ブログを
    ご希望される著名人の方/事務所様を
    随時募集しております。