解決済
タイトル名入り画像のリンクの仕方がわかりません。
タイトルを自分で作った画像にカスタマイズしたんですけど、作った画像にタイトル名を入れたので、もともとあったタイトル名を消しました。
これを入れました↓
.blogtitle{
text-indent:-9999px;}
そしたら、タイトルのリンク（トップに戻ってくるリンク）も消えてしまって困っています。
タイトル名は非表示にして、リンクは消したくない場合どぅすればよぃでしょぅか・・・
タイトル画像をリンクにするのでもよぃです。
よろしくおねがぃします。
回答(4)
1.
まず、Ctrl＋Aでこの文字列を全文選択しCtrl＋Cでコピーしてワードパットにペーストし保存しておきます。これでトップページのHTMLのバックアップとなります。
こういう部分があります。
<h1 class="blogtitle"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1>
<h1 class="blogtitle"><a href="<$BlogUrl$>"><img src="画像のアドレス" width="xxx" height="xxx" border="0" /></a></h1>
width="xxx" height="xxx"の部分は、アップロードした画像の大きさを入力されて下さい。
にしてトップページを保存して再構築してみて下さい。
（；は削除して下さい。）
画像がリンクとして表示されます。
ただし、このやり方ではh1タグが無駄になりますので、SEOとか気にされる方にはおすすめできません。
何か変更して表示がおかしくなったら、バックアップしておいたものをコピーアンドペーストするか、デザインをもう一度選びなおして、全ページ再構築して下さい。
2.
一応<img>タグの中にalt="サイトのタイトル"として入れておけば気分的に少しだけましかも。
ですが、画像リンクと別に、h1タグを使ったリンクをブログの上の方に置いておく事をおすすめします。
この方法の場合、CSSの変更は要りません。元に戻しましょう。
text-indent:-9999px;
↑この方法は、Googleのガイドラインに抵触する恐れがあるのではないかとふと思います。
「隠しテキストや隠しリンクを使用しない。 」
3.
トップページは、ヘッダー画像全部にリンクが効いているみたいですね。他のページにはリンクが貼れていない。
スマートな方法としては、透明の gif 画像を用意します。
大きさは、タイトルの " なみりんにっき♪ " のハートを
囲むぐらいの大きさが良いでしょう。
それをサーバーにアップします。アドレスは控えておいて下さい。
次に今現在リンクを設定している、
<h1 class="blogtitle"> ～ </h1> の中を以下のように
書き換えます。
<h1 class="blogtitle"><a href="<$BlogUrl$>" accesskey="1"><img src="画像のアドレス" border="0" title="ブログのタイトル" width="画像の幅" height="画像の高さ"></a></h1>
画像の幅と高さは数字だけで良いですよ。
これで保存して再構築して下さい。
次に CSS の設定で、その透明の gif をうまくタイトルのハートの部分に移動しなければなりません。
すでに CSS の中にある、
.blogtitle{ }
この部分に、そうですね ・・・ なみりんさんのブログでしたら
センターにとりあえずもっていっておいて、微調整が良いでしょうね。
例えば、
.blogtitle{
text-align:center;
padding:○px ○px ○px ○px;
}
○は丸ですよ。ゼロじゃないですよ。
その○の中に調整すべく数字を入れてください。
パディングの説明はこちらを参考にして下さい。↓
これで完璧(^^)ちなみにこれでカスタマイズすると、
上にかかれている、text-indent:-9999px; は
いらないですよ。
SEO 的に心配しないでも、ちゃんと透明 gif に title 属性を
入れてますから！
4.
回答を追加します。
個人的には、h1タグ内にはblogタイトルを文字として記述する方がいいと思います。
ということで、text-indent:-9999pxも有効な手法だと思います。
で、なみりんさんのblogですがトップページのタイトルのリンクはちゃんとできてます。他のページはまだ改造前のようで、リンクはできてません。
コメント(11)
＞AQさん。
私もいつもかぶってますよ（＾＾；
お気になさらずに～。
みなさん回答ありがとぅござぃます！
ＡＱさんの、透明のgif画像を用意する方法でやって、text-indent:-9999px;を消したんですけど、タイトル名が表示されちゃぃました・・・（＞＿＜）
う～～ん・・・
＞#3
ええ～ ^^;
ちょっと見にいきます。アセアセ
いえ。私の言っているようにはなさっていませんね。
ソースを見ると、こうなっていました。
<h1 class="blogtitle"><a href="http://blog.livedoor.jp/namirinko/">;♪なみりんにっき♪</a></h1>
つまり、元の HTML はこうされているはずです。↓
<h1 class="blogtitle"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1>
これでは、管理画面で打ち込んだ、ブログタイトルが文字で出てしまいます。もう一度説明を読んでください。
上の説明の画像と言うのは、透明 gif の画像の事ですよ～。
<h1 class="blogtitle"><a href="<$BlogUrl$>" accesskey="1"><img src="http://image.blog.livedoor.jp/namirinko/imgs/7/7/7...; border="0" title="♪なみりんにっき♪" width="277" height="187"/></a></h1>
今こぅなってます。合ってるかなぁ・・・
＞なみりんさん
今、夜中の1：00です。ソースを見ましたが、今の時点で何も先ほどと変わっていません。#7 で書かれているようには、何もなっていません。言っておられる事とやっておられる事が違いますね ・・・。
タグフレンズの隠しリンクも何か気になりますし、
トップページは初めから、ヘッダータイトルに高度な onClick 属性を使用して、リンクが貼られています。
もうその方法で全ページ、リンクを貼られる方がすっきり、綺麗に行くのじゃないでしょうか？ご質問なさる前にどうぞ、お戻し下さいね。
役に立てずごめんなさい。
AQさん。
なみりんさん、他にしなければならないことがあって、ブログを触れていないんだと思いますよ、たぶん。
なみりんさんは、タグフレンズ花見のデザインを元にカスタマイズされているんですが、そのデザインにはデフォルトでなにやら高度な方法のタグフレンズへのリンクが入っています。隠しリンクではなく、逆にそれを消せてないみたいですね。
デザインを適応してみてそれがわかるまで40分かかりました（笑）。
またこられたら、なみりんさんにアドバイスして頂けたらと思います。
コメントありがとぅござぃます。
できましたぁ！
ＨＴＭＬのトップページから
onClick="location.href='<$BlogUrl$>'"
を抜いたら、文字無しでリンクできるよぅになりました！
これは他の質問の回答で、文字を消せるということで入れていたタグです。
個別記事ページ、カテゴリアーカイブ、月別アーカイブにも
<h1 class="blogtitle"><a href="<$BlogUrl$>" accesskey="1"><img src="http://image.blog.livedoor.jp/namirinko/imgs/7/7/7...; border="0" title="♪なみりんにっき♪" width="277" height="187"/></a></h1>
を入れたら、全ページ文字無しでリンクできるょぅになりました！
ほんとによかったです。
かなり初心者で迷惑かけてしまってすみませんでした・・・
ＡＱさん、リヴァイアさんほんとにありがとぅござぃました（＾－＾）
ちょっと間違えました（＞＿＜；）
他の質問の回答で、
.blogtitle{
text-indent:-9999px;
}
で文字を非表示にしたらリンクができなくなったので、
onClick="location.href='<$BlogUrl$>'"
を入れていたんでした。
ほんとわかんなくて・・・変なことしてたのですかね（＾－＾；）
