FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

メニューをマウスオーバーするとタイトル背景が変わる

以前に横メニューバーをブログタイトル下に表示する方法を紹介しました。

今回はこの各メニューにマウスを乗せたとき、タイトルの背景画像を変えるカスタマイズを紹介します。

HTMLを編集します。
<head>～</head>で囲まれた中に以下を加えてください。
または外部ファイルに加えてください。

<script type="text/javascript"></script>

img[5],img[6]・・・と好きなだけ画像を追加できます。

そしてメニューバーのリンクタグ<a>の中に、次の赤い箇所を加えてください。

<ul id="menu_bar">
<li><a href="～" onMouseOver="bgch('header_body','1')" onMouseOut="bgch('header_body','0')">メニュー1</a></li>
<li><a href="～" onMouseOver="bgch('header_body','2')" onMouseOut="bgch('header_body','0')">メニュー2</a></li>
<li><a href="～" onMouseOver="bgch('header_body','3')" onMouseOut="bgch('header_body','0')">メニュー3</a></li>
<li><a href="～" onMouseOver="bgch('header_body','4')" onMouseOut="bgch('header_body','0')">メニュー4</a></li>
</ul>

当サイトが公開している共有テンプレートだと、lightframeシリーズはこのままでよいですが、standardシリーズをお使いの方は header_body の部分を header に書き換えてください。

これでタイトルの背景画像が
メニュー1にマウスを乗せると画像1に
メニュー2にマウスを乗せると画像2に
メニュー3にマウスを乗せると画像3に
メニュー4にマウスを乗せると画像4に
そして各メニューからマウスを離すと画像0に変更されます。

【2007/07/30 追記】
サイトを開いた時点でタイトル背景画像を表示するには、スタイルシートで設定する必要があります。
standardの場合はこちら
lightframeの場合はこちら
を参考にしてください。
img[0]と同じ画像を設定すると良いと思います。

関連記事

[ 2009/07/25 18:20 ] カスタマイズ共通カスタマイズ | TB(0) | CM(130)

≪ コメントタイトルにマウスを乗せると色が変わってしまう問題 | HOME | メニューバーに検索フォームを表示 ≫

[ 5091 ]

オツカレー(_´Д｀)ノ~~！

[ 2009/07/26 02:19 ] [ 編集 ]

[ 5094 ]

おつかれです。
相互リンクをまとめたページを作り、そのページにリンクを追加していってるんですが、<リンクの設定>でリンクに追加したURLとサイト名を相互リンクをまとめたページに自動で転載することはできるでしょうか？

[ 2009/07/26 07:29 ] [ 編集 ]

[ 5104 ] > みかんさん、名無しさん

> みかんさん
ありがとうございます。

> 名無しさん
リンクを「記事」に自動転載することはできませんので、「記事」を手打ちで書き直してもらうことになります。

しかし、特定の記事にだけ、その記事の上か下に特定の「フリーエリア」を表示することなら出来るかもしれません。

そのフリーエリアを利用すればプラグインのリンクと同じものを表示できるかも知れませんが、それでよければ調べてみましょうか？

[ 2009/07/26 20:58 ] [ 編集 ]

[ 5112 ]

リクエストした記事、ありがとうございます

これをやってみたのですが、【standard】の「タイトルを画像にする」と被り画像が常に二つ出ています。

なので、「タイトルを画像にする」をやめたところ今度はタイトルのロールオーバーする画像が細くなり、自分のブログの題名が出てきてしまいます。

どうすればいいのでしょうか？（泣）

わかりづらくてすいません

[ 2009/07/27 18:36 ] [ 編集 ]

[ 5114 ] > たくあんさん

現状確認のためにURLを教えてください。

[ 2009/07/27 19:34 ] [ 編集 ]

[ 5115 ]

二個上のコメントと同じ者です
http://kabosugame.blog73.fc2.com/
です

[ 2009/07/27 20:03 ] [ 編集 ]

[ 5121 ] > かぼすさん

スタイルシートの末尾にこれを加えてください。

#header {
height: 200px;
}

数値はお好みに合わせて調整してください。

[ 2009/07/27 21:57 ] [ 編集 ]

[ 5139 ]

ありがとうございます！！

できるようになりました

ですが、自分のブログにいくと画像の部分が真っ白になります。
なぜでしょうか？

本当、質問ばっかりですいません

[ 2009/07/28 18:34 ] [ 編集 ]

[ 5149 ] > かぼすさん

スタイルシートの末尾にこれを加えてください。

#header {
background-image: url("http://blog-imgs-19.fc2.com/k/a/b/kabosugame/logo_convert_20090708180034.jpg");
}

[ 2009/07/28 23:04 ] [ 編集 ]

[ 5163 ]

できるようになりました＾＾

何回も答えてもらって本当に申し訳ないです・・・

いたおさんに感謝です

[ 2009/07/29 12:06 ] [ 編集 ]

[ 5178 ] > かぼすさん

解決して良かったです＾＾

[ 2009/07/29 21:57 ] [ 編集 ]

[ 6138 ]

すみません。

これは、複数のタイトル画像を使用しても可能ですか？

複数のタイトル画像方法は↓↓を参考にさせてもらっています！
http://10plate.blog44.fc2.com/blog-entry-88.html

[ 2009/09/21 17:22 ] [ 編集 ]

[ 6146 ] > 東城さん

多分可能だと思います。
テンプレートのバックアップをとって試してください。

[ 2009/09/21 22:02 ] [ 編集 ]

[ 6152 ]

すみません(＾-＾;)

具体的なやり方わかりますか？

[ 2009/09/21 23:46 ] [ 編集 ]

[ 6154 ] > 東城さん

この記事のjavascriptとメニューバーはもう加えましたか？
URLを教えてもらえると現状が把握できて具体的に教えられると思います。

[ 2009/09/22 00:24 ] [ 編集 ]

[ 6156 ]

http://natuki777.blog72.fc2.com/

↑です　１度お世話になっています＾＾

[ 2009/09/22 09:14 ] [ 編集 ]

[ 6162 ] > 東城＠さん

記事には「そしてメニューバーのリンクタグ<a>の中に、次の赤い箇所を加えてください。」
とありますが、東城＠さんの場合ですと以下のようになります。

<li><a href="http://natuki777.blog72.fc2.com/" onMouseOver="bgch('header_body','1')" onMouseOut="bgch('header_body','0')">HOME</a></li>

[ 2009/09/22 20:09 ] [ 編集 ]

[ 6170 ]

難しすぎて無理でした～。

ご協力有難うございました。

[ 2009/09/22 23:57 ] [ 編集 ]

[ 6183 ] > 東城＠さん

このカスタマイズはちょっと難しいですね＾＾；

[ 2009/09/23 20:57 ] [ 編集 ]

[ 6515 ]

いろいろいじってたらタイトル画像がひょうじされなくなってしまいました^^;
<head>～</head>の部分もう一度コメントに書いていただけませんか？
お願いします

[ 2009/10/17 15:37 ] [ 編集 ]

[ 6517 ]

>>みやきんさん

それはその設定が反映するまで時間がかかるので、
一時的にタイトル画像が表示されない症状です。

僕も同じ症状に遭遇しましたがｗ
半日ぐらい時間をおいたら直りましたよ！

[ 2009/10/17 18:32 ] [ 編集 ]

[ 6518 ]

いたおさん初めまして。

こちらの記事を参考に早速カスタマイズしましたら、
メニューをマウスオーバーするとタイトル背景が
変わるようになったんですけど、タイトル画像を
クリックしトップページに移動する事が出来なくなりました。

何か解決策はありませんか？
お忙しいとは存じますが、お力を貸してくださいm(_ _)m

[ 2009/10/17 18:48 ] [ 編集 ]

[ 6525 ] > みやきんさん、てんさん

> みやきんさん
同じテンプレートをダウンロードして、そのHTMLからコピーしてください。
カスタマイズは失敗しても元に戻せるようにバックアップをとってから行ってくださいね。

> てんさん
HTMLのh1タグの中にある
<img src="" border="0" />
を
<img src="http://blog-imgs-19.fc2.com/1/0/p/10plate/spacer.gif" alt="<%blog_name>" width="1000px" height="300px" border="0">
としてみてください。

[ 2009/10/17 22:26 ] [ 編集 ]

[ 6527 ]

早速、お返事ありがとうございます。

いたおさんが指示した通りにカスタマイズしましたら、
タイトル画像をクリックしトップページに移動することは
できるようになりましたが、今度はメニューをマウスオーバー
してもタイトル背景が表示されません＾＾；

何度もすいませんが、解決策を教えていただけると助かります。

[ 2009/10/17 23:24 ] [ 編集 ]

[ 6533 ]

他の人のHTMLって見れんですか？

[ 2009/10/18 16:43 ] [ 編集 ]

[ 6535 ]

>>みやきんさん

見れますよｗ

[ 2009/10/18 17:40 ] [ 編集 ]

[ 6539 ] > てんさん、みやきんさん

> てんさん
今のテンプレートをバックアップしてからそのカスタマイズを行い、上手くいかない状態を見せてもらえますか。

> てんさん
みやきんさんのおっやる通り見れますよ。

[ 2009/10/18 19:05 ] [ 編集 ]

[ 6541 ]

すいません始めのコメント、

他の人のHTMLって見れんですか？

って失礼でした

見れるんですか？ですm(_ _)m

どうすれば見ることが可能なのでしょうか？

[ 2009/10/18 20:13 ] [ 編集 ]

[ 6543 ] ▼てんさん

ページ上の何も無いところで右クリック→ソースの表示
または、
ブラウザのメニューバー→ソース
で見ることが出来ます。

後は「文法チェック」(http://openlab.ring.gr.jp/k16/htmllint/index.html)
のゲートウェイサービスにURLを打ち込むことでも閲覧可能です。

ただし、色々なサイトを回っている最中に、
「このブログのデザインはいいな」
と思っても、丸ごと写す(言い方を変えるとパクる)のはあまり好ましくありません。
カスタマイズの為に参考にさせて頂くのならいいと思います＾＾
勉強にもなりますし♪

私事ですが、それで嫌な思いをした経緯があります…(^^;)

[ 2009/10/18 21:14 ] [ 編集 ]

[ 6544 ]

>>いたおさん

分かりました、バックアップして言われた通りに
カスタマイズしてみます。
もうひとつ、問題が出たんですけどIEだとなんか
文字が太くなったり文字の色がおかしいです＾＾；
このカスタマイズをしてから出た症状なのですが
直すことはできますか？？

どうか、お助け下さい、お願いします。

それと関係ないですが。

> てんさん
みやきんさんのおっやる通り見れますよ。

↑の文がおかしいです＾＾；

>>みやきんさん

IEの場合は「右クリック→ソースを表示」
Firefoxの場合は「右クリック→ページのソースを表示」

でHTMLを見る事ができます。

悪用はしないでくださいね。

>>ちゃんさん

HTMLを見る方法を僕が質問したわけではなく
みやきんさんが質問していましたよ。
勘違いされているようなので、報告させていただきました。

あと、ブログ閉鎖してしまったようですね。
ちゃんさんのブログのHTMLやCSSまでパクって
いる人のせいで閉鎖してしまったんですね・・・。
とても親切ないい方なのに残念です。
ちゃんさん今までお疲れ様でした。

[ 2009/10/18 21:18 ] [ 編集 ]

[ 6547 ] > みやきんさん、ちゃんさん、てんさん

> みやきんさん
ちゃんさんやてんさんが教えてくれたように、右クリックのメニューから見る事が出来ます。

> ちゃんさん
いつもありがとうございます m(__)m

> てんさん
ご指摘ありがとうございました＾＾；
文字がおかしくなる前のテンプレートのバックアップはありますか？

[ 2009/10/18 22:20 ] [ 編集 ]

[ 6549 ] > てんさん

<h1>の閉じタグがありません。閉じタグを加えてください。

<h1><a href="http://kahotan492.blog113.fc2.com/" title="Windows Skil" alt="Windows Skil"><img src="" border="0" /></h1>

カスタマイズ前には必ずバックアップをとってください。

[ 2009/10/18 22:52 ] [ 編集 ]

[ 6550 ]

>>いたおさん

バックアップはありません。
症状は、文字がボールド状態になり、
リンクになっている文字は消えてますｗ
http://blog-imgs-27.fc2.com/k/a/h/kahotan492/200910182249158d9.png
↑のような感じです。

自分でも直そうと努力しましたが、全く直りません。
また、分かりやすくご指示いただけると嬉しいです。

[ 2009/10/18 22:54 ] [ 編集 ]

[ 6551 ] > てんさん

同時にコメントを投稿してしまったみたいですね＾＾；

前述のコメントの通り、<h1>の閉じタグを加えてください。
http://10plate.blog44.fc2.com/blog-entry-245.html#comment6549

[ 2009/10/18 23:10 ] [ 編集 ]

[ 6552 ]

<div id="header_outline">
<div id="header_body">
<h1><a href="http://kahotan492.blog113.fc2.com/" title="Windows Skil" alt="Windows Skil"><img src="" border="0" /></h1>
<div class="intro"><%introduction></div>
</div>
</div>


閉じタグを加えたんですが、合っていますでしょうか？

閉じタグを加えてもIEですと表示が崩れたままです＾＾；

何度もすみませんが、教えてください。

[ 2009/10/18 23:20 ] [ 編集 ]

[ 6553 ] > てんさん

HTMLを覗いてみるとまだ閉じタグがありませんでした。
修正したテンプレートと表示しているテンプレートが同一であるか確認してください。

[ 2009/10/18 23:26 ] [ 編集 ]

[ 6555 ]

>>いたおさん

すいません、編集してるテンプレートが
バックアップしたものでした＾＾；

文字がボールドではなく正常な状態に戻りました！
ありがとうございます＾＾

ですが、IEでみるとタイトル画像の上の方を見ると×が付いています。
まだ、どこかおかしいんでしょうか？

[ 2009/10/18 23:45 ] [ 編集 ]

[ 6564 ]

ありがとうございますっ

[ 2009/10/19 18:39 ] [ 編集 ]

[ 6571 ] > てんさん、みやきんさん

> てんさん
<h1>～</h1>の行を全て削除するか、
imgタグを以前指示したものに置き換えてください。
http://10plate.blog44.fc2.com/blog-entry-245.html#comment6525

> みやきんさん
HTMLを見る事ができればいろいろ勉強になりますね＾＾

[ 2009/10/20 00:08 ] [ 編集 ]

[ 6576 ]

>>いたおさん

僕の思ってた通りにカスタマイズ出来ました＾＾
何度も、質問ばかりしてすいませんでした。
また、お世話になる事があると思いますが
よろしくお願いします。

それでは、失礼します。

[ 2009/10/20 06:01 ] [ 編集 ]

[ 6581 ] > てんさん

解決して良かったです＾＾

[ 2009/10/21 00:26 ] [ 編集 ]

[ 6611 ]

て　　ん　さんのブログは、優れていますね。
質問なんですけど　て　　ん　さんのようにマウスオーバーすると背景の画像透ける感じにしたいのですが～

[ 2009/10/22 16:32 ] [ 編集 ]

[ 6613 ]

マウスオーバーしても画像が表示されません^^;
なぜでしょうか？
htmlはあっていると思うのですが...

http://mpokaizou.blog53.fc2.com/

です

時間があればご指摘ください

[ 2009/10/22 19:57 ] [ 編集 ]

[ 6618 ] > 水迫さん、みやきんさん

> 水迫さん
てんさんもそうしているのですが、透けたように見える画像を用意して、この記事のカスタマイズをしてください。

メニューをマウスオーバーするとタイトル背景が変わる
http://10plate.blog44.fc2.com/blog-entry-245.html

> みやきんさん
記事中の画像のURLというところが一カ所しか置き換えられていません。すべて置き換えてください。

[ 2009/10/22 23:49 ] [ 編集 ]

[ 6625 ]

全て置き換えたら崩れてしまいました...
なぜでしょうか？

[ 2009/10/23 22:08 ] [ 編集 ]

[ 6632 ] > みやきんさん

メニューの「CFW」と「お小遣い稼ぎ」のリストタグの中に、ダブルクォーテーション「"」が足りないところがあります。それを加えてください。

onMouseOut="bgch('header_body','0')"

[ 2009/10/24 00:02 ] [ 編集 ]

[ 6639 ]

ありがとうございますっ
細かいところでした...

テンプレ崩れはもどったのですが、TOPが変わらないのですが...

[ 2009/10/24 01:01 ] [ 編集 ]

[ 6647 ]

すみません私ももう1度これにチャレンジしているのですが、背景画像が変わりません＾＾；

HTMLタグなどはきちんと入力しましたが。

いつもいつもすみません。

[ 2009/10/25 01:13 ] [ 編集 ]

[ 6650 ]

初めまして tomoと言います
いつも分かりやすい解説でとても助かっています

僕もマウスオーバーすると画像が変わるようにしたいのですが、どうやら今使っているタイトル画像の後ろに出てしまっているみたいで、前に出せません。
「TOP」のボタンをマウスオーバーするとサイズの違う画像に変わるようにしたのですが、よく見てみると左右両端にわずかに画像が後ろにある痕跡が見当たりました。

どうやったら画像が前に出るのでしょうか?

どうかよろしくお願いします。

[ 2009/10/25 22:32 ] [ 編集 ]

[ 6655 ] > みやきんさん、東城＠さん、tomoさん

> みやきんさん
ファビコンURLを指定するlinkタグの中が正しくありません。このかたりにしてください。
<link rel="shortcut icon" href="http://～/favicon.ico">

HTMLの<h1>～<h1>を削除してみてください。

テンプレートのバックアップをとってからカスタマイズしてください。

> 東城＠さん
IEで見る環境が手元にないのでFirefoxでしか見ていないのですが、正しく表示されているようでした。自己解決されたのでしょうか。

> tomoさん
HTMLの<h1>～<h1>を削除してみてください。

テンプレートのバックアップをとってからカスタマイズしてください。

[ 2009/10/25 23:58 ] [ 編集 ]

[ 6657 ]

やってみましたが、画像が表示されなくなりました^^;
なのでもどしときました

やはりTOP画像は一つだけ表示するようにしないとできないんですかね

[ 2009/10/26 00:14 ] [ 編集 ]

[ 6667 ]

みやきんさんと同じく画像が表示されなくなりました
表示されるのは元の背景のオレンジ色だけです
しかも上と下のメニューバーの間が何故か狭くなってしまい、画像の高さが10pxにも満たない高さになってしまいます

無理なんでしょうか・・・・・

とりあえずくじけずに頑張ってみます

[ 2009/10/26 21:17 ] [ 編集 ]

[ 6668 ]

画像をひとつ表示にしても表示されないっ
なぜでしょうか？

[ 2009/10/26 21:36 ] [ 編集 ]

[ 6669 ]

最初サイトに飛んだら画像が表示されずにスペースだけあいている状態です（今もそのままです)

タイトル画像を背景に変える方法で試してみましたが無理でした

なぜでしょうか?

[ 2009/10/26 23:11 ] [ 編集 ]

[ 6676 ]

質問したいんですが、
今SkyBlue_Cloudというテンプレートを使っているのですが、
やってみたのですが変わりません。
どうすればよいでしょうか。

[ 2009/10/27 17:43 ] [ 編集 ]

[ 6685 ] > みやきんさん、tomoさん、masa173さん

> みやきんさん
削除した後に、スタイルシートの末尾にこれを加えるとどうでしょうか。

#header_body {
height:230px;
}

> tomoさん
削除した後に、スタイルシートの末尾にこれを加えるとどうでしょうか。

#header {
height:279px;
}

> masa173さん
スタイルシートの末尾にこれを加えてからメニューバーをカスタマイズしてみてください。

#header {
height:200px;
}

[ 2009/10/27 21:04 ] [ 編集 ]

[ 6690 ]

できました！！
本当に感謝してます
ありがとうございます

[ 2009/10/27 23:25 ] [ 編集 ]

[ 6692 ] > みやきんさん

解決して良かったです＾＾

ちなみにメニューの「お小遣い稼ぎ」は直りましたが、
「CFW」はまだ直っていないようです。
http://10plate.blog44.fc2.com/blog-entry-245.html#comment6632

[ 2009/10/28 01:20 ] [ 編集 ]

[ 6709 ]

なんとかできました・・・
画像作っていたらコメ遅くなってしまいました
すいません

いたおさんもよかったら見に来てください

ありがとうございました

[ 2009/10/29 00:32 ] [ 編集 ]

[ 6711 ] > tomoさん

画像が表示されましたね＾＾
メニューボタンに触らずともサイトを開いた時点で画像を表示させるには、スタイルシートの末尾にこれを加えてください。

#header {
background-image: url("http://blog-imgs-34.fc2.com/s/h/i/shiroutosikou/20091029001841cb8.png");
}

[ 2009/10/29 00:48 ] [ 編集 ]

[ 6712 ]

いたおさん・・・・・ホントにありがとうございます

言葉で表せないくらい感謝の気持ちで一杯です
なんかホントにありがとうございます

そしてこれからもよろしくお願いします
せけぇな　俺

[ 2009/10/29 00:57 ] [ 編集 ]

[ 6716 ] > tomoさん

お役に立てて良かったです＾＾

[ 2009/10/29 23:51 ] [ 編集 ]

[ 7076 ]

今度は、これを挑戦しているのですが、
変わりません。
<script language="JavaScript">
var images = new Array();

/* 使用するタイトル画像を好きなだけ記述 */
images[0] = "http://blog-imgs-34.fc2.com/m/a/s/masa173com/20091121103402b74.png";

var rnd = Math.floor((Math.random() * 100)) % images.length;
document.write('<a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src=',images[rnd],' border="0"></a>');
</script>
<script type="text/javascript"><!--
の部分を消したらTOP画像がなくなりました。
今は入れてあります。
どうすれば換えることができますか？

[ 2009/11/21 13:46 ] [ 編集 ]

[ 7084 ] > masa173さん

メニューバーのHTMLも編集してください。
http://10plate.blog44.fc2.com/blog-entry-245.html#q2

[ 2009/11/21 23:02 ] [ 編集 ]

[ 7086 ]

ヘッダーの上のメニューバーは入れましたが。

[ 2009/11/21 23:16 ] [ 編集 ]

[ 7088 ] > masa173さん

カスタマイズの過程で必要な部分も消してしまったようですね。下記赤い部分を加えてください。


<tr><td id="header">
～
</td></tr>


あとbodyタグが複数見られます。不要なbodyタグは削除してください。

[ 2009/11/21 23:35 ] [ 編集 ]

[ 7090 ]

消してしまったので、
どんなのか分かりません。
省略をしないで教えていただけるでしょうか。

[ 2009/11/21 23:51 ] [ 編集 ]

[ 7091 ]

すみません。
できたのですが、
下のメニューバーが上へ行ってしまいます。

[ 2009/11/21 23:57 ] [ 編集 ]

[ 7092 ] > masa173さん

まだ致命的なbodyタグがあります。これを削除してください。

<body>

[ 2009/11/22 00:08 ] [ 編集 ]

[ 7094 ]

消しましたが、直りません。
あと、IEでは崩れてしまいました。

[ 2009/11/22 00:25 ] [ 編集 ]

[ 7095 ] > masa173さん

メニューバーのタグをテーブルのtdタグ内に正確に入れていない事が原因だと思います。下記のように赤い部分を加えてください。

<body>
<table class="base_table" border="0" cellspacing="1" summary="outline">
<tr><td>

～


</td></tr>


～


<tr><td>


～


</td></tr>

[ 2009/11/22 01:14 ] [ 編集 ]

[ 7099 ]

できました。
質問なのですが、画像が左よりになって、画像の左側が右に来ています。
画像を真ん中にするには、どうしたらよいでしょうか？

[ 2009/11/22 09:40 ] [ 編集 ]

[ 7113 ] > masa173さん

スタイルシートの末尾にこれを加えてください。

#header {
background-position:center top;
}

[ 2009/11/23 13:12 ] [ 編集 ]

[ 7116 ]

やったら両端に出てきてしまいます。

[ 2009/11/23 13:52 ] [ 編集 ]

[ 7122 ] > masa173さん

私の環境(Mac,Firefox)ではタイトル画像が中央に表示されていますが、masa173さんの環境では何か変なのでしょうか？
また各ブラウザではどのように見えますか？

[ 2009/11/23 14:58 ] [ 編集 ]

[ 7138 ]

http://blog-imgs-34.fc2.com/m/a/s/masa173com/2009y11m24d_163627531.jpg
上の画像の赤い枠で囲ってあるところのように端にいらないものが出てしまいます。
windowsのFirefoxとIE両方ともなっていました。
また、第二階層と第三階層の高さを変えるには、どうしたらよいでしょうか？
よろしくお願いします。

[ 2009/11/24 16:55 ] [ 編集 ]

[ 7139 ]

もう一つだけ質問したいのですが、
上のメニューバーの相互リンクのところで第二階層と第三階層を入れたのですが、下のメニューバーの所と重なると第三階層が下に行ってしまいます。

[ 2009/11/24 17:57 ] [ 編集 ]

[ 7142 ]

HTMLの指定された場所に印したのですが全く効果がありません。
どうすればいいですか？

[ 2009/11/24 22:10 ] [ 編集 ]

[ 7151 ] > masa173さん、7142の名無しさん

> masa173さん
背景画像を繰り返し表示にしたくないということでしょうか。であればこれをスタイルシートの末尾に加えてください。

#header {
background-repeat: no-repeat;
}

第三階層が記事の画像の奥(下)にいって見えなくなってしまう問題は、ちょっと解らないのですがこれをスタイルシートの末尾に加えてみるとどうでしょうか。

#menu_bar {
z-index:100;
}

> 7142の名無しさん
現状を見ずには原因は解りません。URLを教えてください。

[ 2009/11/25 00:52 ] [ 編集 ]

[ 7158 ] 7142

・・・。
何故か書き忘れている。
7142は自分です。

[ 2009/11/25 07:54 ] [ 編集 ]

[ 7162 ]

できました。
ありがとうございました。
やっとメニューバーが完成しました。

[ 2009/11/25 15:08 ] [ 編集 ]

[ 7169 ] > ZEROさん、masa173さん

> ZEROさん
javascriptの宣言が閉じられない（// --></script>
が無い）うちに、新たなjavascriptが宣言されていることが原因だと思います。

> masa173さん
解決して良かったです＾＾

[ 2009/11/25 22:48 ] [ 編集 ]

[ 7202 ]

[ 2009/11/28 16:45 ] [ 編集 ]

[ 7207 ] > ZEROさん

そうです。赤い部分を加えてください。

<script type="text/javascript"></script>
<script type="text/javascript"></script>

[ 2009/11/28 21:46 ] [ 編集 ]

[ 7211 ]

Ctrl + F で <script type="text/javascript"><!-- と調べて末尾に追加したけれど駄目でした・・・。

[ 2009/11/28 22:45 ] [ 編集 ]

[ 7213 ] > ZEROさん

もう１つ原因がありました。
ZEROさんはタイトル画像をimgタグで表示しているようですね。imgタグの画像は背景画像の上（手前）に表示されるため、奥にある背景画像が変化しても隠れてみることが出来ません。

まずこのカスタマイズを元にもどし

タイトルを画像にする
http://10plate.blog44.fc2.com/blog-entry-54.html

そしてこのカスタマイズを施す必要があります。

ヘッダー背景に画像を表示する
http://10plate.blog44.fc2.com/blog-entry-105.html

背景画像はクリックすることでトップページに戻ることが出来ないため、元の今あるかたちのほうが良いかもしれません。元に戻せるようにテンプレートのバックアップをとって試してみてください。

[ 2009/11/28 23:16 ] [ 編集 ]

[ 7266 ]

うまくいきました。

[ 2009/12/03 08:23 ] [ 編集 ]

[ 7269 ] > ZEROさん

うまくいって良かったです＾＾

[ 2009/12/04 00:10 ] [ 編集 ]

[ 7353 ]

すいません
おれもちゃんといれてるはずなんですが、マウスオーバーしても、タイトル背景がかわりません＞＜
http://syogurasi.blog85.fc2.com/
↑です。

診断おねがいします＞＜：

[ 2009/12/10 19:11 ] [ 編集 ]

[ 7361 ] > しょぐらしさん、tunaさん

> しょぐらしさん
メニューバー自体が無いようですがテンプレートを変えたのでしょうか？それ以前に崩れているようですが・・・
崩れる原因の解決にはこちらの記事を参考にしてください。

表示が崩れる原因の調査手順
http://10plate.blog44.fc2.com/blog-entry-274.html

> tunaさん
これは「背景画像」を変えるカスタマイズなので、その前面（手前）にimgタグの画像があると背景が覆われて見ることができません。

まずこのカスタマイズを元に戻す必要があります。
タイトルを画像にする
http://10plate.blog44.fc2.com/blog-entry-54.html

そしてこのカスタマイズを施してください。
ヘッダー背景に画像を表示する
http://10plate.blog44.fc2.com/blog-entry-105.html

[ 2009/12/10 23:18 ] [ 編集 ]

[ 7366 ]

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

[ 2009/12/11 00:45 ] [ 編集 ]

[ 7368 ]

返信どうもです＾＾

なんか途中から崩れてましたｗ

あとからなおします＝３

[ 2009/12/11 16:33 ] [ 編集 ]

[ 7372 ] > tunaさん、しょぐらしさん

> tunaさん
解決して良かったです＾＾

> しょぐらしさん
カスタマイズは万一に備えてバックアップをとりながら進めるのが一番ですが、もしバックアップを取らずに失敗して原因がなかなか解らないときは一から作り直したほうが早い場合もありますよ。

[ 2009/12/11 23:12 ] [ 編集 ]

[ 7472 ]

TOP画像を変えたら、できなくなってしまいました。
何か消してしまったのでしょうか？
よろしくお願いします。

[ 2009/12/20 13:55 ] [ 編集 ]

[ 7475 ] > masa173さん

ダブルクォーテーションが欠けているようです。

img[0]=new Image();img[0].src="http://blog-imgs-34.fc2.com/m/a/s/masa173com/20091220131835bd9.gif";

[ 2009/12/20 23:30 ] [ 編集 ]

[ 7577 ]

できません。何ででしょうか。

[ 2009/12/30 03:07 ] [ 編集 ]

[ 7585 ]

>>ROXASさん
ROXASさんの場合、
img[0]=new Image();img[0].src="画像0のURL";
img[1]=new Image();img[1].src="画像1のURL";
の「画像XのURL」を、「http://blog-imgs-34.fc2.com/l/o/v/lovecon845/ファイル名」に置き換えてください。
そして、その下の<a>タグを加えてください。
----
FireFoxから見ると、メニューバーが縦になっています。
ul#menu_bar {
～
background-image: url("http://blog-imgs-34-origin.fc2.com/l/o/v/lovecon845/lj.png");
}
padding-left:0px;
～
}

#menu_bar li a {
～
background-color:#000000;; /* メニューボタンの背景 */
background-image: url("http://blog-imgs-34-origin.fc2.com/l/o/v/lovecon845/lj.png");
}
text-decoration:none;
}
上記の3箇所の赤の部分を全て消してください。多分これで治ると思います。
----
#menu_bar li a:hover{
～
background-image: url("http://blog-imgs-34-origin.fc2.com/l/o/v/lovecon845/lj.png");
background-image: url("http://blog-imgs-34-origin.fc2.com/l/o/v/lovecon845/dsf_20091228015440.png"); /* マウスが乗ったときの背景色 */
text-decoration:none;
}
この部分ですが、画像を二つ指定しているようですが、二つは表示されないのでどちらか一つにした方がいいです。
ブラウザによってはブラウザ側が混乱し表示されなくなります。
長文失礼しました

[ 2009/12/30 20:29 ] [ 編集 ]

[ 7586 ]

>tskillさん

分かりやすくありがとうございます！
FireFoxで崩れて、どうしようか迷ってた所だったのでよかったです。

[ 2009/12/30 23:02 ] [ 編集 ]

[ 7587 ]

>tskillさん

すみません。FireFoxの件は直ったんですが、マウスオーバーはよくわからないので、もうちょっと分かりやすく教えていただけると嬉しいです。

[ 2009/12/30 23:24 ] [ 編集 ]

[ 7591 ] > tskillさん、ROXASさん

> tskillさん
詳しく説明してくれてありがとうございます＾＾

> ROXASさん
tskillさんのおかげでメニューバーの崩れは解決したようですね。

ROXASさんは既にこのカスタマイズをしているようですね。
タイトル画像をランダムに変える
http://10plate.blog44.fc2.com/blog-entry-88.html

これは背景より手前に表示される画像であるため、
「メニューをマウスオーバーするとタイトル背景が変わる」
と併用はできません。どちらかのカスタマイズを諦めるか、または「タイトル画像をランダムに変える」を一旦元に戻して以下のカスタマイズをする必要があります。

SEOを考慮したランダムなタイトル画像
http://10plate.blog44.fc2.com/blog-entry-190.html

ちなみにROXASさんが別サイトで採用しているDDさんのメニューバーは使わないのでしょうか。私が紹介しているものより高性能だし、それを移植したほうが早いかも知れません。

[ 2009/12/31 00:16 ] [ 編集 ]

[ 7592 ]

DDさんとは何ですか？

[ 2009/12/31 00:18 ] [ 編集 ]

[ 7594 ]

>>ROXASさん
DDさんは、裏技shopDD の管理人の事です。
http://shopdd.blog51.fc2.com/

[ 2009/12/31 00:31 ] [ 編集 ]

[ 7595 ]

では、メニューバーをマウスオーバーしてプラグインを表示するのは、どうやるのでしょうか？

▼参考サイト様▼
http://yuiyahy009.blog24.fc2.com/

[ 2009/12/31 00:34 ] [ 編集 ]

[ 7597 ] > ROXASさん、tskillさん

> ROXASさん
すみません。どうやらROXASさんを他の方と勘違いしていたようです。過去に同じハンドルネームの方がいましたので・・・
参考サイト様のメニューバーがまさに裏技shopDDさんが考案したメニューバーです。ただこれを使っている方々は裏技shopDDさんに許可を得て真似しているようなので私が安易に教える事はできません。申しわけありません m(__)m

http://10plate.blog44.fc2.com/blog-entry-275.html#comment6408

> tskillさん
ありがとうございます＾＾

[ 2009/12/31 00:54 ] [ 編集 ]

[ 7687 ]

導入してみたのですが、タイトル画像の後ろに設定した画像が行ってしまいます。
どうすれば正常に表示されるのでしょうか？
http://pspdsurawaza.blog62.fc2.com/
テンプレ編集は全くの初心者でさっぱりですorz
ご回答よろしくお願いしますm(_ _)m

[ 2010/01/03 23:31 ] [ 編集 ]

[ 7689 ] > naomochiさん

このカスタマイズはタイトル画像をimgタグで表示するカスタマイズと併用はできません。どちらかを諦めるか、タイトル画像をimgタグではなく背景画像として表示する必要があります。

[ 2010/01/04 00:57 ] [ 編集 ]

[ 7691 ]

そうなんですか！
早速やってみます！
あともう一つ質問なんですがメニューバーの左横に何故か箇条書きのような点が出てしまいます。
どうやったら消せるのでしょうか？
たくさん質問しちゃってすみませんm(_ _)m

[ 2010/01/04 11:02 ] [ 編集 ]

[ 7696 ]

>>naomochiさん
メニューバーの部分の<ul>の部分を下記に置き換えて下さい。多分できます。
<ul style="list-style:none;">

[ 2010/01/04 18:59 ] [ 編集 ]

[ 7701 ] > naomochiさん、tskillさん

> naomochiさん
Firefoxで見ると点は見えませんがIEだと見えるのでしょうか。いまIE環境がないのでよく解らないのですが、tskillさんが教えてくれた修正をしてみてください。

> tskillさん
ありがとうございます。助かります＾＾

[ 2010/01/04 22:46 ] [ 編集 ]

[ 7705 ]

>>tskillさん、いたおさん
ご指導ありがとうございましたm(_ _)m
これでようやくメニューバー編集ができそうです。
本当にありがとうございました！

[ 2010/01/05 00:23 ] [ 編集 ]

[ 7714 ] > naomochiさん

参考になって良かったです。
tskillさんのおかげですね＾＾

[ 2010/01/05 23:51 ] [ 編集 ]

[ 7802 ]

メニューにマウスオーバーでhtmlを表示することは可能ですか？
もし可能ならお手数ですが設置方法をご教授いただけると幸いです

[ 2010/01/09 23:04 ] [ 編集 ]

[ 7804 ] > ADDさん

タグを無効化変換すれば表示することができます。

タグ無効化変換
http://www.geocities.co.jp/Playtown-Bingo/6768/tools/no_tags.html

[ 2010/01/09 23:36 ] [ 編集 ]

[ 7806 ]

すみません
ちょっと食い違ってしまったようなので・・

メニューバーにマウスオーバーでTOP画像の上に外部のHTMLを表示することは出来ますでしょうか。

わかりづらくてすみません。
マウスオーバーでリンクや画像を表示させたいのですが

[ 2010/01/09 23:42 ] [ 編集 ]

[ 7812 ]

これをやったのですが、まったくわかりません。
一応↑のタグをはって画像を貼り付けたのですがこのようになります。

一番最初の表示は
http://blog-imgs-36.fc2.com/c/o/p/copynews/top.png
このようにいい感じに表示されます。

マウスオーバーすると
http://blog-imgs-36.fc2.com/c/o/p/copynews/top3.png
このように背景に並んでしまいます。

マウスを放すと
http://blog-imgs-36.fc2.com/c/o/p/copynews/top2.png
このようになってしまいます。

私は
http://blog-imgs-36.fc2.com/c/o/p/copynews/top.png
この状態で画像のみを変更したいのです。背景は黒のままでやる方法を教えてください。

[ 2010/01/10 13:00 ] [ 編集 ]

[ 7820 ] > ADDさん、コピンさん

> ADDさん
外部のHTMLを表示する方法は解りません。お役に立てず申しわけありません。

> コピンさん
この記事は「背景」を変えるカスタマイズのため、その手前にimgタグでタイトル画像を表示している方には使えません。
背景ではなく画像自体を変える方法はまだ解りませんが、もし解ったら記事にしますね。

[ 2010/01/10 22:19 ] [ 編集 ]

[ 7833 ]

返信ありがとうございます。
わざわざありがとうございます。

一度背景で挑戦してみますｗｗ

[ 2010/01/11 17:33 ] [ 編集 ]

[ 7838 ] > コピンさん

お役に立てず申しわけありません m(__)m

[ 2010/01/11 20:08 ] [ 編集 ]

[ 7897 ]

↑のカスタマイズをやってみたんですが、上手くいきません。。。

バックアップでやってたので、そのインデックスへのURLを載せます。

見れるかな…??

とりあえず、よろしくお願いいたします m(_ _)m

http://hosizora22.blog84.fc2.com/?template=lightframe_skyblue&index

[ 2010/01/16 23:46 ] [ 編集 ]

[ 7903 ] > 阿憐さん

まず二桁表示を一桁表示にしてください。

[00] → [0]
[01] → [1]
[02] → [2]
・・・

これでタイトル背景が変化するはずです。

このカスタマイズは背景画像を変えるものなので、その前面にあるタイトル画像は取り除く必要があります。

[ 2010/01/17 00:34 ] [ 編集 ]

[ 7907 ]

そういうことですか!

なんか勘違いしてたみたいですね ^ ^;

早速やってみます。

ご返答ありがとうございます。

また何かあったらコメ書きます。

[ 2010/01/17 14:05 ] [ 編集 ]

[ 7908 ]

いたおsのご指摘どおりやってみたら上手く出来ました!

本当にありがとうございます。

もしよかったら、見てみてください。

まだ試作用なんで、バックアップのほうですが。。。

http://hosizora22.blog84.fc2.com/?preview&index

[ 2010/01/17 14:25 ] [ 編集 ]

[ 7913 ] > 阿憐さん

解決して良かったです＾＾