解決済
Ads By Google
ブログのタイトル文字の変わりに画像を貼るには？
どうすればいいでしょう？ただ、タイトル文字をなくしてしまうと、検索結果がわかりづらくなるのでそれは避けたいんです。画像の位置を絶対指定してcssに書くとか、方法ありますか？ご存知の方教えてください。
よろしくお願いします。
2006-03-31 18:08の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。
回答(2)
1.
2006-03-31 18:29:28
タイトル文字を見えなくする方法は、
を参照して下さい。
画像は、HTMLで
を参照して下さい。
画像は、HTMLで
<img src="画像のURL" style="position:absolute;left:100px;top:50px;">とかすれば、100pxと50pxのところに絶対位置を指定できます。この絶対位置は、親レイヤーからの絶対位置ですので、全体の左上からの絶対座標にするには、bodyの直後とか、divで囲まれてないところとかに書きます。
回答ありがとうございます。早速、実行してみました。ただ、ablosuteにすると<div banner></div>の中に入れても全体の左上からの絶対座標になってしまいます。そこで、relativeで設定しましたが、こうするとタイトルに重ならなくなりました。今は次善策で対応しています。ちなみにブログは個人の趣味のものです。URLは http://blog.livedoor.jp/namorit/ です。
2.
2006-03-31 18:53:42
あくまで一例を紹介します。
h1でくくったタイトルのリンクとサイトの説明はライブドアのヘッダーの直下に置き、その下にトップページへの画像のリンクをおきます。
管理画面→カスタマイズ/管理→デザインの設定→カスタマイズ→トップページのHTMLを編集する画面と進みます。
まず、Ctrl＋Aでこの文字列を全文選択しCtrl＋Cでコピーしてワードパットにペーストし保存しておきます。これでトップページのHTMLのバックアップとなります。
こういう部分があります。
<h1 class="blogtitle"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1>
<div class="description"><$BlogDescription$></div>
これを下記に変更します。
<center><a href="<$BlogUrl$>"><img src="画像のアドレス" width="xxx" height="xxx" border="0" /></a></center>
画像の大きさを調節しておくことで、トップの部分にはまるようにします。
次に<div id="container">
の直下に下記を入れます。
<table width="90%"><tr><td width="50%"><h1 class="blogtitle"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1></td><td width="50%><div class="description"><$BlogDescription$></div></td></tr></table>
cssで、.blogtitle、.descriptionを以下のようにします。
.blogtitle{
font-size:16px;
text-align:center;
}
.description{
color:#333333;
font-size:12px;
text-align:center;
}
色などはサイトの色に合わせてください。
問題はfont-sizeです。
h1をあんまり小さくしてはいけないようです。
16pxくらいにはしておいてください。
.descriptionは任意でいいです。
結局、こういう変更を自分でどんどんやってみることで、tableタグやcssの使い方を身につけて、自由に自分でレイアウトできるようになればいいと思います。
バックアップをしっかりとって、失敗を恐れず実践あるのみです。
h1タグは実はなくてもSEO的にあんまり関係なかったり、むしろほかのhタグを重視している検索エンジンもあったりします。結局何が正しいかわからないので、正しい知識がついたらまた変更すればいいと思います。
また、<head>内にtitleを書いたり、メタタグでサイトの説明文を入れておけば、検索エンジンにはきちんとサイトタイトルやサイトの説明文を認識させることができます。
h1でくくったタイトルのリンクとサイトの説明はライブドアのヘッダーの直下に置き、その下にトップページへの画像のリンクをおきます。
管理画面→カスタマイズ/管理→デザインの設定→カスタマイズ→トップページのHTMLを編集する画面と進みます。
まず、Ctrl＋Aでこの文字列を全文選択しCtrl＋Cでコピーしてワードパットにペーストし保存しておきます。これでトップページのHTMLのバックアップとなります。
こういう部分があります。
<h1 class="blogtitle"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1>
<div class="description"><$BlogDescription$></div>
これを下記に変更します。
<center><a href="<$BlogUrl$>"><img src="画像のアドレス" width="xxx" height="xxx" border="0" /></a></center>
画像の大きさを調節しておくことで、トップの部分にはまるようにします。
次に<div id="container">
の直下に下記を入れます。
<table width="90%"><tr><td width="50%"><h1 class="blogtitle"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1></td><td width="50%><div class="description"><$BlogDescription$></div></td></tr></table>
cssで、.blogtitle、.descriptionを以下のようにします。
.blogtitle{
font-size:16px;
text-align:center;
}
.description{
color:#333333;
font-size:12px;
text-align:center;
}
色などはサイトの色に合わせてください。
問題はfont-sizeです。
h1をあんまり小さくしてはいけないようです。
16pxくらいにはしておいてください。
.descriptionは任意でいいです。
結局、こういう変更を自分でどんどんやってみることで、tableタグやcssの使い方を身につけて、自由に自分でレイアウトできるようになればいいと思います。
バックアップをしっかりとって、失敗を恐れず実践あるのみです。
h1タグは実はなくてもSEO的にあんまり関係なかったり、むしろほかのhタグを重視している検索エンジンもあったりします。結局何が正しいかわからないので、正しい知識がついたらまた変更すればいいと思います。
また、<head>内にtitleを書いたり、メタタグでサイトの説明文を入れておけば、検索エンジンにはきちんとサイトタイトルやサイトの説明文を認識させることができます。
丁寧に回答ありがとうございます。
今後の変更なども考えて最初は変更点の少ないオニキスさんのやり方で変更をしました。
h1は位置をかえず何とか使いたいと思っています。
ちなみに、ブログは個人の趣味のものでURLは http://blog.livedoor.jp/namorit/ です。
Ads By Google
コメント(4)
#1. M-zone
2006-03-31 23:02:22
コメントありがとうございました。もう少し締め切らずにおこうと思います。
#2. オニキス
2006-04-01 01:47:49
別に現状で問題ないと思いますが，タイトルテキストは，
http://knowledge.livedoor.com/3041
のベストになっているryu_zさん・たっけーさんの
text-indent:-9999px;の方がたぶんメジャーなやり方だと思います．
画像は，ご質問に「絶対位置を指定して・・・」とあったので，そう書いただけで，現状のrelativeの方がいいと思いますよ．
#3. M-zone
2006-04-01 02:38:54
オニキスさん
-9999でとばしました。Googleの検索に影響ないですよね？？ある程度問題は解決しました。ありがとうございました！
#4. オニキス
2006-04-02 03:52:22
