No.44231 トップタイトル画像をリンクに...。
貴重な場をお借りします。
ブログトップのタイトルを見えなくし、自分でタイトルを入れて作成した画像をトップへのリンクにしたいのですが、うまくいきません。
(笑顔さくらぁる♪ http://saklar.blog.shinobi.jp/)
1．CSS内に、下記を記述。
#TopTitle a{display:none;}
2．HTML内に、下記を記述。
<div id="TopTitle">
<a href="<!--$g_url-->"><img src="http://file.saklar.blog.shinobi.jp/68089bdb.jpeg" border="0"></a>
</div>
上記のように、タイトルを消して、画像を表示させるところまでは出来たのですが、画像がリンクになってくれないのです。
BBSを拝見いたしましたが、そこまで書かれていなかったため、この貴重な場をお借りして、どなたかに教えていただければ幸いです。
参考にさせていただいたのは、下記の掲示板です。
http://blog2.community.shinobi.jp/1143107808/
http://blog2.community.shinobi.jp/1161692783/1-
ブログトップのタイトルを見えなくし、自分でタイトルを入れて作成した画像をトップへのリンクにしたいのですが、うまくいきません。
(笑顔さくらぁる♪ http://saklar.blog.shinobi.jp/)
1．CSS内に、下記を記述。
#TopTitle a{display:none;}
2．HTML内に、下記を記述。
<div id="TopTitle">
<a href="<!--$g_url-->"><img src="http://file.saklar.blog.shinobi.jp/68089bdb.jpeg" border="0"></a>
</div>
上記のように、タイトルを消して、画像を表示させるところまでは出来たのですが、画像がリンクになってくれないのです。
BBSを拝見いたしましたが、そこまで書かれていなかったため、この貴重な場をお借りして、どなたかに教えていただければ幸いです。
参考にさせていただいたのは、下記の掲示板です。
http://blog2.community.shinobi.jp/1143107808/
http://blog2.community.shinobi.jp/1161692783/1-
使用環境
- OS:Microsoft Windows XP
- ブラウザ:Microsoft Internet Explorer 8.x
- モニター:1440×900
- JavaScript:ON
- Cookie:ON
- 回線種別:
- ソフトウェア:
試した操作手順
1．CSS内に、下記を記述。
#TopTitle a{display:none;}
2．HTML内に、下記を記述。
<div id="TopTitle">
<a href="<!--$g_url-->"><img src="http://file.saklar.blog.shinobi.jp/68089bdb.jpeg" border="0"></a>
</div>
#TopTitle a{display:none;}
2．HTML内に、下記を記述。
<div id="TopTitle">
<a href="<!--$g_url-->"><img src="http://file.saklar.blog.shinobi.jp/68089bdb.jpeg" border="0"></a>
</div>
投稿者：No Name Ninja 投稿時間：2010-07-02 20:37:39
投稿者 : わぁみん
投稿時間：2010-07-07 14:22:13
解決しました。
ご回答くださった皆様、
本当にありがとうございました。
投稿者 : No Name Ninja
投稿時間：2010-07-06 18:05:27
No.44246 フレーム内の横スクロール
No.43415 ページ右側に余分な空白が入る
No.43070 スクロールバーの変更について
ドキュメント宣言を変更することにより解消する不具合もあるみたいですね。
No.43415 ページ右側に余分な空白が入る
No.43070 スクロールバーの変更について
ドキュメント宣言を変更することにより解消する不具合もあるみたいですね。
投稿者 : No Name Ninja
投稿時間：2010-07-06 06:32:50
#TopBlock の背景色指定は黒じゃなくて白（#FFFFFF）にしておくのは賛成。
HTMLの方をいじって
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
に変更するとどうでしょうか？
また、#TopBlockのheightの指定もなくしておく方が良いかも？
HTMLの方をいじって
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
に変更するとどうでしょうか？
また、#TopBlockのheightの指定もなくしておく方が良いかも？
質問者からのコメント 2010-07-06 13:53:14
ご回答ありがとうございます。
#TopBlock から、色指定とheightを削除しましたら、無事解決いたしました。
ご回答の中の、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
は、HTMLのどこに加えればよいのでしょうか？
また、これは、どういった意味合いのタグなのでしょうか？
何度もお手数おかけいたしますが、よろしくお願いいたします。
#TopBlock から、色指定とheightを削除しましたら、無事解決いたしました。
ご回答の中の、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
は、HTMLのどこに加えればよいのでしょうか？
また、これは、どういった意味合いのタグなのでしょうか？
何度もお手数おかけいたしますが、よろしくお願いいたします。
投稿者 : No Name Ninja
投稿時間：2010-07-06 04:28:14
Firefoxではずれて見えません。
IEをお使いでしたらIE固有の問題ではないかと思いますが
/*タイトルブロック*/
#TopBlock {
から色指定そのものを削除してしまってなにか不都合があるのでしょうか？
IEをお使いでしたらIE固有の問題ではないかと思いますが
/*タイトルブロック*/
#TopBlock {
から色指定そのものを削除してしまってなにか不都合があるのでしょうか？
質問者からのコメント 2010-07-06 13:48:43
ご回答ありがとうございます。
/*タイトルブロック*/
#TopBlock {
から、
色指定と、heightを削除しましたら、キレイに表示されました！
/*タイトルブロック*/
#TopBlock {
から、
色指定と、heightを削除しましたら、キレイに表示されました！
投稿者 : わぁみん
投稿時間：2010-07-06 00:04:37
できました～(*^▽^*)
HTMLの
<!--▼ログインここから-->
<div id="AdminBlock">
<div class="Login">
<a href="/hoge/"><span class="Loginfont">Admin</span></a> | <a href="/hoge/EditComment/<!--$entry_no-->/"><span class="Loginfont">Res</span></a>
</div>
</div>
<!--▲ログインここまで-->
を、他へ移動し、
CSSから、
#TopTitle a{display:none;}
を、削除し、
pxを合わせたら、なんとか無事に画像が表示されました！
お忙しい中、お付き合いくださいまして、本当にありがとうございます。
あとひとつ、気になっているのが、
トップの画像の下に、ちょこっとだけはみ出している部分...。
わかりやすいように、黒色にしていますが、
画像の490pxに合わせて、ブロックも490pxにしているのに、
なぜかはみ出してしまいます。
プレビューでは、きっちり収まっているのですが、
実際にブログを見てみると、下がはみ出してしまいます。
pxをいろいろといじってみたのですが
収まりそうにありません。
白にすれば問題ないのでしょうが、
ちょっと気になってしまって...。
最後に、コレを解決してしまいたいです。
よろしくお願いいたします。
HTMLの
<!--▼ログインここから-->
<div id="AdminBlock">
<div class="Login">
<a href="/hoge/"><span class="Loginfont">Admin</span></a> | <a href="/hoge/EditComment/<!--$entry_no-->/"><span class="Loginfont">Res</span></a>
</div>
</div>
<!--▲ログインここまで-->
を、他へ移動し、
CSSから、
#TopTitle a{display:none;}
を、削除し、
pxを合わせたら、なんとか無事に画像が表示されました！
お忙しい中、お付き合いくださいまして、本当にありがとうございます。
あとひとつ、気になっているのが、
トップの画像の下に、ちょこっとだけはみ出している部分...。
わかりやすいように、黒色にしていますが、
画像の490pxに合わせて、ブロックも490pxにしているのに、
なぜかはみ出してしまいます。
プレビューでは、きっちり収まっているのですが、
実際にブログを見てみると、下がはみ出してしまいます。
pxをいろいろといじってみたのですが
収まりそうにありません。
白にすれば問題ないのでしょうが、
ちょっと気になってしまって...。
最後に、コレを解決してしまいたいです。
よろしくお願いいたします。
投稿者 : わぁみん
投稿時間：2010-07-05 23:42:24
ご回答ありがとうございます。
CSSから
#TopExplanation a{display:none;}
を削除。
HTMLの
<div id="TopTitle">
<a href="http://saklar.blog.shinobi.jp/"><img src="http://file.saklar.blog.shinobi.jp/saklar.jpg" border="0"></a>
</div>
を
<a href="http://saklar.blog.shinobi.jp/">
<div style="height:400px;"><span></span></div>
</a>
に変更してみましたが、画像が表示されませんでした…。
CSSから
#TopExplanation a{display:none;}
を削除。
HTMLの
<div id="TopTitle">
<a href="http://saklar.blog.shinobi.jp/"><img src="http://file.saklar.blog.shinobi.jp/saklar.jpg" border="0"></a>
</div>
を
<a href="http://saklar.blog.shinobi.jp/">
<div style="height:400px;"><span></span></div>
</a>
に変更してみましたが、画像が表示されませんでした…。
投稿者 : No Name Ninja
投稿時間：2010-07-05 22:11:39
CSSから
#TopExplanation a{display:none;}
を削除。
HTMLの
<div id="TopTitle">
<a href="http://saklar.blog.shinobi.jp/"><img src="http://file.saklar.blog.shinobi.jp/saklar.jpg" border="0"></a>
</div>
を
<a href="http://saklar.blog.shinobi.jp/">
<div style="height:400px;"><span></span></div>
</a>
に変更。
この2点の修正でどうでしょう？
#TopExplanation a{display:none;}
を削除。
HTMLの
<div id="TopTitle">
<a href="http://saklar.blog.shinobi.jp/"><img src="http://file.saklar.blog.shinobi.jp/saklar.jpg" border="0"></a>
</div>
を
<a href="http://saklar.blog.shinobi.jp/">
<div style="height:400px;"><span></span></div>
</a>
に変更。
この2点の修正でどうでしょう？
投稿者 : No Name Ninja
投稿時間：2010-07-05 18:33:51
投稿時間：2010-07-04 23:22:09 にも書きましたが
私の環境では
/*タイトル文字*/
#TopTitle a{display:none;}
CSSにこれを入れた状態ではタイトル画像が表示されませんでした。
こちらを削除したら画像が表示されました。
ただし、質問をされている方と私の方でいじってみたものとで
他の部分が同じかどうかはわかりませんので確約は出来ません。
私の環境では
/*タイトル文字*/
#TopTitle a{display:none;}
CSSにこれを入れた状態ではタイトル画像が表示されませんでした。
こちらを削除したら画像が表示されました。
ただし、質問をされている方と私の方でいじってみたものとで
他の部分が同じかどうかはわかりませんので確約は出来ません。
投稿者 : わぁみん
投稿時間：2010-07-05 14:13:18
ご回答ありがとうございます。
<div id="TopExplanation">
<!--$g_explanation-->
</div>
は、既に削除済みなので、
HTMLの
<!--▼ログインここから-->
<div id="AdminBlock">
<div class="Login">
<a href="/hoge/"><span class="Loginfont">Admin</span></a> | <a href="/hoge/EditComment/<!--$entry_no-->/"><span class="Loginfont">Res</span></a>
</div>
</div>
<!--▲ログインここまで-->
の部分を他へ移し、
/*タイトルブロック*/
#TopBlock
background-image
から、この画像のURLを削除してみましたが、やはり、画像が表示されなくなりました。
なぜ...でしょうか？
自分でタイトルを入れて作成した画像をトップへのリンクにするのは、諦めたほうがいいのでしょうか？
<div id="TopExplanation">
<!--$g_explanation-->
</div>
は、既に削除済みなので、
HTMLの
<!--▼ログインここから-->
<div id="AdminBlock">
<div class="Login">
<a href="/hoge/"><span class="Loginfont">Admin</span></a> | <a href="/hoge/EditComment/<!--$entry_no-->/"><span class="Loginfont">Res</span></a>
</div>
</div>
<!--▲ログインここまで-->
の部分を他へ移し、
/*タイトルブロック*/
#TopBlock
background-image
から、この画像のURLを削除してみましたが、やはり、画像が表示されなくなりました。
なぜ...でしょうか？
自分でタイトルを入れて作成した画像をトップへのリンクにするのは、諦めたほうがいいのでしょうか？
投稿者 : No Name Ninja
投稿時間：2010-07-04 23:22:09
tfmono というテンプレートをカスタマイズされて使われているようなので
状況が同じかどうかがわからないのですが
DLしてやってみたところ
>1．CSS内に、下記を記述。
>#TopTitle a{display:none;}
この記述を入れないで2をやると画像が表示されるようです。
ただし右上にある管理画面へのリンクはトップブロック内ではありますが
タイトル部分ではないのでその下からの表示になります。
いままで背景画像として入れていたのと同じ場所に入れたいのであれば
HTMLの
<!--▼ログインここから-->
<div id="AdminBlock">
<div class="Login">
<a href="/hoge/"><span class="Loginfont">Admin</span></a> | <a href="/hoge/EditComment/<!--$entry_no-->/"><span class="Loginfont">Res</span></a>
</div>
</div>
<!--▲ログインここまで-->
この部分と
<div id="TopExplanation">
<!--$g_explanation-->
</div>
この部分を削除する必要があるのかもしれません。
管理画面へのリンクを残すのであれば
タイトル用に文字を入れない背景画像を今まで通りトップブロックへ入れて
タイトル用文字のみ(透過加工して)
<a href="<!--$g_url-->"><img src="タイトル文字のURL" border="0"></a>
にすればいけるんじゃないかなぁと思います。
状況が同じかどうかがわからないのですが
DLしてやってみたところ
>1．CSS内に、下記を記述。
>#TopTitle a{display:none;}
この記述を入れないで2をやると画像が表示されるようです。
ただし右上にある管理画面へのリンクはトップブロック内ではありますが
タイトル部分ではないのでその下からの表示になります。
いままで背景画像として入れていたのと同じ場所に入れたいのであれば
HTMLの
<!--▼ログインここから-->
<div id="AdminBlock">
<div class="Login">
<a href="/hoge/"><span class="Loginfont">Admin</span></a> | <a href="/hoge/EditComment/<!--$entry_no-->/"><span class="Loginfont">Res</span></a>
</div>
</div>
<!--▲ログインここまで-->
この部分と
<div id="TopExplanation">
<!--$g_explanation-->
</div>
この部分を削除する必要があるのかもしれません。
管理画面へのリンクを残すのであれば
タイトル用に文字を入れない背景画像を今まで通りトップブロックへ入れて
タイトル用文字のみ(透過加工して)
<a href="<!--$g_url-->"><img src="タイトル文字のURL" border="0"></a>
にすればいけるんじゃないかなぁと思います。
投稿者 : わぁみん
投稿時間：2010-07-04 13:47:39
ご回答ありがとうございます。
/*タイトルブロック*/
#TopBlock
background-imageからこの画像のURLを削除してみましたが、今度は画像が表示されなくなりました。
どこが間違っているのでしょうか...？
何度も申し訳ないですが、よろしくお願いいたします。
/*タイトルブロック*/
#TopBlock
background-imageからこの画像のURLを削除してみましたが、今度は画像が表示されなくなりました。
どこが間違っているのでしょうか...？
何度も申し訳ないですが、よろしくお願いいたします。
投稿者 : No Name Ninja
投稿時間：2010-07-04 04:11:54
/*タイトルブロック*/
#TopBlock
こちらのbackground-imageにも同じ画像を入れてらっしゃいますが
今現在表示されているのはこちらではないでしょうか？
background-imageからこの画像のURLを1回削除してご確認下さい。
#TopBlock
こちらのbackground-imageにも同じ画像を入れてらっしゃいますが
今現在表示されているのはこちらではないでしょうか？
background-imageからこの画像のURLを1回削除してご確認下さい。
投稿者 : わぁみん
投稿時間：2010-07-03 19:38:34
アクセス解析のご指摘ありがとうございました。
<body>タグ内に書き換えましたが、トップ画像には変化がありませんでした。
どこを直せば、トップ画像がリンクになるのでしょうか？
どなたか、教えてくださいませ。
<body>タグ内に書き換えましたが、トップ画像には変化がありませんでした。
どこを直せば、トップ画像がリンクになるのでしょうか？
どなたか、教えてくださいませ。
投稿者 : わぁみん
投稿時間：2010-07-03 17:11:35
ごめんなさい。
意味を取り違えてました。
アクセス解析の場所を直してみます。
意味を取り違えてました。
アクセス解析の場所を直してみます。
投稿者 : わぁみん
投稿時間：2010-07-03 17:08:42
ご回答ありがとうございます。
早速確認してみましたが、下記のようになっております。
<body>のすぐ下に書き直せばよろしいのでしょうか？
～～～
</head>
<body>
<div id="MainBlock">
<!--if_not_edit-->
<!--▼ヘッダーここから-->
<div id="TopBlock">
<!--▼ログインここから-->
<div id="AdminBlock">
<div class="Login">
<a href="/hoge/"><span class="Loginfont">Admin</span></a> | <a href="/hoge/EditComment/<!--$entry_no-->/"><span class="Loginfont">Res</span></a>
</div>
</div>
<!--▲ログインここまで-->
<!--▼ブログタイトル・説明文ここから-->
<div id="TopTitle">
<a href="<!--$g_url-->"><img src="http://file.saklar.blog.shinobi.jp/68089bdb.jpeg" border="0"></a>
</div>
<!--▲ブログタイトル・説明文ここまで-->
</div><!--/TopBlock-->
<!--▲ヘッダーここまで-->
～～～
早速確認してみましたが、下記のようになっております。
<body>のすぐ下に書き直せばよろしいのでしょうか？
～～～
</head>
<body>
<div id="MainBlock">
<!--if_not_edit-->
<!--▼ヘッダーここから-->
<div id="TopBlock">
<!--▼ログインここから-->
<div id="AdminBlock">
<div class="Login">
<a href="/hoge/"><span class="Loginfont">Admin</span></a> | <a href="/hoge/EditComment/<!--$entry_no-->/"><span class="Loginfont">Res</span></a>
</div>
</div>
<!--▲ログインここまで-->
<!--▼ブログタイトル・説明文ここから-->
<div id="TopTitle">
<a href="<!--$g_url-->"><img src="http://file.saklar.blog.shinobi.jp/68089bdb.jpeg" border="0"></a>
</div>
<!--▲ブログタイトル・説明文ここまで-->
</div><!--/TopBlock-->
<!--▲ヘッダーここまで-->
～～～
投稿者 : No Name Ninja
投稿時間：2010-07-03 13:36:01
たぶん関係ないと思いますが
<head>直下にアクセス解析のタグを入れるのは止めた方がいいんじゃないでしょうか
>HTML内の<body>タグの直下に書き加えて下さい。
>位置が大幅に違う場合は正常に表示されない場合があります。
忍者ブログヘルプ
忍者ブログマニュアル／プラグイン
http://www.ninja.co.jp/manual/blog/manual060.html
<head>直下にアクセス解析のタグを入れるのは止めた方がいいんじゃないでしょうか
>HTML内の<body>タグの直下に書き加えて下さい。
>位置が大幅に違う場合は正常に表示されない場合があります。
忍者ブログヘルプ
忍者ブログマニュアル／プラグイン
http://www.ninja.co.jp/manual/blog/manual060.html
いろいろと試してみたいと思います。
ありがとうございました。