CSS ヘッドを画像に&クリックでトップページに | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

CSS ヘッドを画像に&クリックでトップページに

私のオリジナル タイトル画像のロールオーバー  ではなくて
有名人ブログのようにヘッド画像全体をクリックできるようにしたいって~場合のために覚書です



背景に指定する画像の大きさを800×300とした場合の例
例のごとく青字部分をCSSの下にコピペしてください


#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;
}



↑これは私のオリジナルではありません
 有名人ブログでは使われていますし、探せばほかでも説明されています


少し詳しく説明しなおしています

オリジナルスキンCSSの編集 ヘッド・タイトル1

オリジナルスキンCSSの編集 ヘッド・タイトル2
オリジナルスキンCSSの編集 ヘッド・タイトル3


2枚のヘッド画像を使ってマウスをのせたとき別の画像になるロールオーバーは

CSS タイトル画像のロールオーバー・・・・
CSS タイトル画像のロールオーバー2

CSS タイトル画像のロールオーバー3