アメブロのヘッダーで文字が埋め込まれている画像を使用して
トップページにリンクを張りたいたい場合、どのようなＣＳＳにするか紹介します。
これをやると古い記事を見ていてトップに戻りたいなぁと思った時に
トップ画像にマウスポインターが出ますので、クリックすれば一発です。
ＣＳＳの一番下にコピペするだけなので是非活用して下さい。
#header h1,
#header h2{
margin:0;
padding:0;
text-indent:-9999px;
}
#header h1 a{
display: block;
width: 800px;/*画像の横*/
height:300px;/*画像の縦*/
}
/* タイトル画像の配置 */
/* 画像によっては */
/* height:300px;画像の縦 */
/* background-repeat:repeat-x; */
/* background-position:center; */
/* ↓ の指定も必要になります ↓ */
#header {
background-image: url(画像のURL);
background-repeat:no-repeat;
}
これはヘッダー画像の大きさが800×300の場合です。
ここを自分のヘッダー画像の大きさに変更すればＯＫです。
ちなみに、このブログは800×250の画像を使用しています。
まだヘッダー画像しかカスタマイズしていませんが、
そのうち色々いじっていきたいと思っています。
最後にurlを自分の画像のURL
に変更すれば、完了です。