ヘッダーのリンクについて
オリジナルのヘッダー画像をトップへのリンクにする方法について・・・
元々アメブロはヘッダー内に二つの要素(って言うのかな?)がある模様。
h1の要素がブログトップへのリンクがあるブログタイトルで
（このブログで言う”ジャック卿のCSS”）
h2の要素がサブタイトルのテキスト。
（このブログで言う”ノルウェージャンフォレストキャットのジャック卿の・・・”）
元々リンクが埋め込まれてるh1の要素をうまく使えばよいのでは？
というわけで以下↓
#header h1 a {
font-family: "HGP創英角ﾎﾟｯﾌﾟ体", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
margin: 0px;
display: block;
width: 800px;
height: 252px;
text-decoration: none;
color:#339900;
}
赤字の部分がheaderそのものの広さ、
もしくは貼り付けたい画像の大きさにすればたぶんOK。
青字の a が一体何なのか、はっきり分らなかったものの、
h1のテキスト色を指定する部分（黄色）に付いてたので
そのままそれを使用。
これで画像にリンクが張られているように見える状態になる。
（実際は画像は背景になっているだけ）
ｈ1を一杯に拡大すると問題になるのがh2要素がはじき出されること。
それを解決するために以下↓
#header h2{
position:absolute; top:135px; left:100px
margin:0px;
padding:0 5px 45px 5px;
font-size:12px;
font-weight: normal;
font-family: "HGP創英角ﾎﾟｯﾌﾟ体", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
line-height:1.2;
}
赤字の部分で、むりやりポジションをh1要素に重ねるようにすればOK。
topの数値が上下方向、leftの数値が左右方向。
もしテキストそのものを消したいのであれば、以下を追加↓
text-indent: -10000px;
要するに大きい数値を入れてテキストを弾き飛ばすということ。
以上
元々アメブロはヘッダー内に二つの要素(って言うのかな?)がある模様。
h1の要素がブログトップへのリンクがあるブログタイトルで
（このブログで言う”ジャック卿のCSS”）
h2の要素がサブタイトルのテキスト。
（このブログで言う”ノルウェージャンフォレストキャットのジャック卿の・・・”）
元々リンクが埋め込まれてるh1の要素をうまく使えばよいのでは？
というわけで以下↓
#header h1 a {
font-family: "HGP創英角ﾎﾟｯﾌﾟ体", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
margin: 0px;
display: block;
width: 800px;
height: 252px;
text-decoration: none;
color:#339900;
}
赤字の部分がheaderそのものの広さ、
もしくは貼り付けたい画像の大きさにすればたぶんOK。
青字の a が一体何なのか、はっきり分らなかったものの、
h1のテキスト色を指定する部分（黄色）に付いてたので
そのままそれを使用。
これで画像にリンクが張られているように見える状態になる。
（実際は画像は背景になっているだけ）
ｈ1を一杯に拡大すると問題になるのがh2要素がはじき出されること。
それを解決するために以下↓
#header h2{
position:absolute; top:135px; left:100px
margin:0px;
padding:0 5px 45px 5px;
font-size:12px;
font-weight: normal;
font-family: "HGP創英角ﾎﾟｯﾌﾟ体", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
line-height:1.2;
}
赤字の部分で、むりやりポジションをh1要素に重ねるようにすればOK。
topの数値が上下方向、leftの数値が左右方向。
もしテキストそのものを消したいのであれば、以下を追加↓
text-indent: -10000px;
要するに大きい数値を入れてテキストを弾き飛ばすということ。
以上
蓮loveさんへ
なんとなく解明されましたので報告します！
問題となっているアイコンの残骸除去ですが、恐らく蓮loveさんは
CSS内の”スキンスイッチャー機能追加部分”に記述されているいずれかの部分を
削除なさってると思います。
しかし、この場合は書き足すことで対処できると思われます。
”スキンスイッチャー機能追加部分”内の”StyleControls”という部分を探してください。
そして、そのすぐ真下には
#StyleControls *{list-style:none;}
div#StyleControls a:link,
div#StyleControls a:visited,
div#StyleControls a:hover{
text-decoration:none;
}
と記述されていると思います。そこの黄色に色付けした次の行に
display:none;
と記述してみてください。↓のようになります。
#StyleControls *{list-style:none;}
div#StyleControls a:link,
div#StyleControls a:visited,
div#StyleControls a:hover{
text-decoration:none;
display:none;
}
これで保存すれば綺麗さっぱり無くなります！
ちなみに、現在のこのスキンがここだけを書き換えた状態のものです（09-01-21 18：50現在）
もし何かあればまた声を掛けてくださいね！
問題となっているアイコンの残骸除去ですが、恐らく蓮loveさんは
CSS内の”スキンスイッチャー機能追加部分”に記述されているいずれかの部分を
削除なさってると思います。
しかし、この場合は書き足すことで対処できると思われます。
”スキンスイッチャー機能追加部分”内の”StyleControls”という部分を探してください。
そして、そのすぐ真下には
#StyleControls *{list-style:none;}
div#StyleControls a:link,
div#StyleControls a:visited,
div#StyleControls a:hover{
text-decoration:none;
}
と記述されていると思います。そこの黄色に色付けした次の行に
display:none;
と記述してみてください。↓のようになります。
#StyleControls *{list-style:none;}
div#StyleControls a:link,
div#StyleControls a:visited,
div#StyleControls a:hover{
text-decoration:none;
display:none;
}
これで保存すれば綺麗さっぱり無くなります！
ちなみに、現在のこのスキンがここだけを書き換えた状態のものです（09-01-21 18：50現在）
もし何かあればまた声を掛けてくださいね！
CSSお試し編集
私のメインブログから来てくださった皆様へ
自分のメインブログではCSSを思い切って編集するのは怖いので、
このブログを新たに立ち上げて、ザクザクお試し編集してみようと思っています。
よって、このブログはCSSに関する覚書のようなものにするつもりです。
この部分を変えたいけど、どうやるのか分らない・・・
たぶんこれを変えればいいと思うけど、ブログが崩壊したら怖い・・・
という方は、お気軽に声をおかけ下さい(^∇^)
ちなみにこのブログから声を掛けられても反応しない設定なので、
私のメインブログからプチメでもいただければと思います！(^O^)/
自分のメインブログではCSSを思い切って編集するのは怖いので、
このブログを新たに立ち上げて、ザクザクお試し編集してみようと思っています。
よって、このブログはCSSに関する覚書のようなものにするつもりです。
この部分を変えたいけど、どうやるのか分らない・・・
たぶんこれを変えればいいと思うけど、ブログが崩壊したら怖い・・・
という方は、お気軽に声をおかけ下さい(^∇^)
ちなみにこのブログから声を掛けられても反応しない設定なので、
私のメインブログからプチメでもいただければと思います！(^O^)/