livedoor ナレッジ

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

よろしくお願いします。

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

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

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

すでにタイトルは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>

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

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