解決済

clip!clip!
Ads By Google

ブログタイトル画像を変更。画像クリックでTOPページに戻るには?

よろしくお願いします。

ブログのタイトル画像を自作画像に変更し、元々あったブログタイトル文字は非表示にしました。
(画像にタイトルを入れたため)

タイトル画像をクリックしたらTOPページに戻るようにしたいのですが方法が分かりません。

どなたか方法をご存知の方いらっしゃいましたら、ご教授願います。

2006-02-24 15:36の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(1)

1.

2006-02-24 16:03:50ベスト
すでにタイトルはdisplay:none;というような設定にしたのだと思います。スタイルシートだと消してしまう設定をすると、タグが無効になったままになります。乗り越えるためにはいったん元に戻した上で、リンクだけ有効としつつもテキストは非表示となるようにすれば良いように思います。(元に戻す方法については触れませんが、あらかじめ元に戻しておいてください。テンプレートから選び直しても良いでしょう。)

変更方法は、ブログの投稿画面で、「カスタマイズ/管理」を選び、左側「デザインの設定」を選びます。画面の右下に、「カスタマイズ」があるので選びます。

まずは、「デザイン(CSS)」から。blogtitleの他、blogtitleの中にあるaタグの大きさを具体的に指定し、文字がなくてもリンクする場所が確保されるようにします。後は、さらに中へspanタグを設けて、spanタグの部分だけ非表示となるようにします。(仕組みには、あまり気に掛けずに修正してしまった方が良いかもしれません。)

修正前の例)
.blogtitle{
color:#ffffff;
text-align:right;
font-size:18px;
font-weight:bold;
padding:50px 25px 0 500px;
}

修正後の例)
.blogtitle{
color:#ffffff;
text-align:right;
font-size:18px;
font-weight:bold;
padding:50px 25px 0 500px;
}
.blogtitle a {
width: 480px;
height: 48px;
}
.blogtitle a span {
display: none;
}

終わったら「この内容で保存する」をクリックして保存します。

次に、トップページです。通常なら以下のようなタグの構造になっていると思うので、ブログタイトルの「<$BlogTitle ESCAPE$>」部分をspanタグで囲みます。先ほどのスタイルシートで、h1タグでblogtitleが指定された、aタグのさらに中、spanタグの部分だけを非表示と設定するための準備になります。

修正前の例)
<h1 class="blogtitle"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1>

修正後の例)
<h1 class="blogtitle"><a href="<$BlogUrl$>"><span><$BlogTitle ESCAPE$></span></a></h1>

終わったら「この内容で保存する」をクリックして保存します。

仕上げは再構築です。左上の方、「ブログに設定を反映(再構築)」を選び、「再構築する部分を指定」というのが下の方にあるので、「全てのページ」を選んで「ブログを再構築する」というボタンを押せば完了です。
Ads By Google

コメント(4)

2006-02-24 16:23:42

http://blog.livedoor.jp/testuser1/
作例も示します。右側に「地方でウェブ...」がある上あたりにリンクが付いています。タイトルが右に寄るタイプだったのですが、他のデザインなら左側にちゃんと寄ります。

2006-02-24 16:25:41

画像で作った背景にも、同じ場所あたりへ文字などクリックしやすいものをあしらっておくと良いでしょう。逆にいえば、背景画像全体へリンクすることはできない、もしくはやらない方が無難です。

2006-02-24 16:29:51

ありがとうございました。

早速、上記の方法を行ったところ、思ったとおりの変更ができました。
迅速な対応、本当にありがとうございました♪

2006-02-24 16:39:28

うまくいったようで良かったです。ベスト回答もありがとうございました。

トラックバック(2)

トラックバックURL: