オリジナルスキンCSSの編集 ヘッド・タイトル3
タレントブログみたいにクリックしたらトップページに戻るようにしちゃおう・・・
ここまではうまく出来ましたか？
タレントブログ目指して画像を作ります
いままで使ってきた画像にタイトルを入れます
画像ソフトを使って文字入れしてもかまいませんし
前回タイトルを入れたブログをプリントスクリーン でコピーして画像にしても出来ます
今回使う画像です（760px×420px） 彼の名前「殿tono!!」ってタイトルつけてみました
別にブログのタイトルと違っていてもかまいません
CSSの最後にコピペしてください
#header{
height:420px;/*画像の縦*/
background-image: url(画像のURL);
background-repeat:no-repeat;/*繰り返さない*/
background-position:center;/*中央に*/
}
#header h1,
#header h2{/*位置の初期化*/
margin:0;
padding:0;
}
#header h1 a{
width:760px;/*画像の横*/
height:420px;/*画像の縦*/
display:block;
position:absolute;
text-indent:-9000px;
text-decoration:none;
}
#header h2{
display:none;/*概要を非表示*/
}
※赤字部分はみなさまの画像に合わせて変更してください
・・・画像の横がスキンの幅より大きい場合はスキンの幅で設定してください
画像の幅800px スキンの幅760px なら width:760px;/*画像の横*/ に
もし・・・クリックする範囲がヘッド画像と大きくずれている場合は
position:absolute;
この１行を削除してみてください
もし・・クリックしたときの点線が気になるようでしたら・・
（IEでは効果はありません・・・・）
#header h1 a{
overflow:hidden;
outline:none;
}
どうでしょうか？
クリックできるようになっていますか？
クリックしてトップページに戻りますか？
※このサイトのようにタイトルを別の画像にしてロールオーバー するには
※何枚かのヘッド画像をランダムで表示 するには
今回でヘッド、タイトル部分のカスタマイズは終了です
わからない場合はコメントください
２枚のヘッド画像を使ってマウスをのせたとき別の画像になるロールオーバーは
CSS タイトル画像のロールオーバー・・・・
CSS タイトル画像のロールオーバー2
自分で画像を作ってみたい方は・・こちらを参考にして下さい
登録しないでも無料で使えるオンラインソフトを使って作り方を説明しています
ヘッド画像を作る2 Pixlr 鉛筆ツール
ヘッド画像を作る3 Pixlr ブラシツール
ヘッド画像を作る4 Pixlr 自動選択ツール(1)
ヘッド画像を作る5 Pixlr 自動選択ツール(2)
ヘッド画像を作る6 Pixlr 写真の修整
ヘッド画像を作る7 Pixlr フィルター・モザイク
ヘッド画像を作る8 Pixlr グラデーション
ヘッド画像を作る9 Pixlr 文字
ヘッド画像を作る10 Pixlr 四角、円、直線
ヘッド画像を作る11 Pixlr レイヤー
ヘッド画像を作る12 Pixlr レイヤーの複写とレイヤースタイル
ヘッド画像を作る13 Pixlr メニュ一覧
ヘッド画像を作る14 Pixlr 実践