Template‐ノート:SpoilerH/Archive1

このページは過去の議論を保存している過去ログページです。編集しないでください。新たな議論や話題は、Template‐ノート:SpoilerHで行ってください。

長い注意文について[編集]

Firefoxなどのブラウザでは注意文中に行を跨ぐと2行目が枠からはみ出してしまう現象があったので、一時的に1行に納める修正をしてみました。しかし【タイトル】で長い文を入れたり、ブラウザの表示幅を狭くしてしまうことに対しては解決にはなりませんので、なにか根本的に（スタイルシートなどの）修正を必要とするかもしれません。--Differ 2006年12月19日 (火) 10:15 (UTC)

「ネタバレ」併記について[編集]

この折りたたみテンプレートは{{ネタバレ}}との併記によって階層的にネタバレを実現するよう作ったと認識していたのですが、「この記事」などでは{{ネタバレ}}を外して使うのが良いと捉えられているようです。ここは当テンプレートの使用法の項で、方針をある程度定めておいたほうが良いように思いますがいかがでしょう？

ともすればWikipedia:ネタばれに注意のガイドライン文言を、折りたたみテンプレートを含んだものに改訂する必要が出てくるかもしれません。--Differ 2007年2月6日 (火) 19:45 (UTC)

該当記事のテンプレート：ネタバレを削除した者です。削除理由は、もともと{{ネタバレ}}は、核心部分を知らない人のために、ネタバレがあることを教えるためのものですが、そのネタバレを隠すことができるようになったので、不要であると考えた次第です。ネタバレ表示があると、核心部分を知りたくない人が記事を読むことを妨げてしまいますし。--ライトノベル文学 2007年2月10日 (土) 12:01 (UTC)

折りたたんだ箇所以外にネタバレが全くないのであれば、そのように使うことも可能でしょうね。今後地の文にネタバレが書き込まれれば改めて{{ネタバレ}}を張れば良いのですし。しかし現行のガイドラインでは{{ネタバレ}}が推奨されていますので、Wikipedia内の統一的な記事を構成するにはどちらも張っておくべきかと思います。またこの弾性的なテンプレートの用法も含めて、Wikipedia:ネタばれに注意を改訂するべきではないでしょうか。

またネタバレ表示があると、それを避ける人が記事を読まなくなるとのことですが、それは別に問題ではなく、むしろ期待した効果が機能していると見るべきでしょう。ネタバレではない部分も見なくなるということなら、{{ネタバレ}}、{{ネタバレ終了}}で囲う部分を極力絞ればよいと思います。私自身は各種公式HPに掲載されている程度の浅い情報なら場合によっては記事に載せる必要はないのではないかと思っていますので、ネタバレは（{{SpoilerH}}を使うほど）酷いものでなくても多少は記事内に含まれているものと仮定して話をさせていただきました。--Differ 2007年2月10日 (土) 19:18 (UTC)

リンクがおかしい件[編集]

こことは関係ないのかもしれませんが、最近リンク表示がおかしいです。赤坂衛、梨花をクリックしてみるとその項目に飛びません。以前はちゃんとリンクされていたのですが、SpoilerHを適用してからこの状態です。--ライトノベル文学 2007年2月10日 (土) 12:01 (UTC)

ええと、私のPC（WindowsXP,IE6.0）ではどちらもリンクされますが…梨花についてはリンク間違いのようで『梨花』とするとちゃんと当該小項目にジャンプしますよ？--Differ 2007年2月10日 (土) 19:18 (UTC)

Windows Vista & IE 7.0.6 と Mac OS 10.4 Tiger & Safari 2.0.4の組み合わせでは問題ありませんでしたが、 Mac & FireFox 2.0 の組み合わせではその項目より１ページほど下に表示されてしまいました。--Ytsunenori 2007年2月25日 (日) 06:10 (UTC)

Template:SpoilerHによる表示隠しを無効化するCSS[編集]

Template:SpoilerHによる表示隠しを無効化するCSSを書いてみたので、隠し表示が不要だと思う方は自由に使ってくれ。俺はWindowsのFirefox 2.0ユーザで、IE6/IE7やOperaなどのその他ブラウザは使っていないので、Windows版Firefox以外では効果が無い・表示が崩れるかもしれないが、それは各自調整してほしい。

単なるCSSなので履歴継承などは不要だと思うが、GFDLを気にする方は履歴欄に「Template‐ノート:SpoilerHより一部転記」と書いておけば問題無いだろう。

/* Spoilerによるネタバレ隠しを無効化 */
.Spoiler {
	/* 上下にスペースを入れる */
	margin-top: 0.5em !important;
	margin-bottom: 0.5em !important;
}
.Spoiler div.NavFrame {
	/* NavFrame及び直接SpoilerHに書かれたCSSを無効化 */
	margin: inherit !important;
	padding: inherit !important;
	border-width: 0 !important;
        text-align: inherit !important;
        font-size: inherit !important;
	clear: none !important;
}
.Spoiler div.NavFrame:before {
	/* ネタバレ開始 */
	content: "■■↓↓【ネタバレ開始】↓↓■■ " !important;
	color: red !important;
	font-weight: bold !important;
	font-size: 80% !important;
}
.Spoiler div.NavFrame:after {
	/* ネタバレ終了 */
	content: "■■↑↑【ネタバレ終了】↑↑■■ " !important;
	color: red !important;
	font-weight: bold !important;
	font-size: 80% !important;
}
.Spoiler div.SpoilerCaution {
	 /* 長い注意喚起を表示しない */
	display: none !important;
}
.Spoiler div.NavHead {
	/* [表示]ボタンを表示しない */
	display: none !important;
}
.Spoiler div.NavContent {
	/* ネタバレ本文を普通の文字の大きさで表示 */
	display: block !important;
	font-size: 1em !important;
}

2007年4月23日 (月) 00:17 (UTC)修正

WinIE6など:before擬似要素に非対応であるウェブブラウザでは、「ネタバレ開始」「ネタバレ終了」が効かないため、何の前触れも無くネタバレが表示されてしまうことになる。:before擬似要素非対応ブラウザでネタバレがあることを知るには、「長い注意喚起を表示しない」の部分を除去すればよい。但しこの場合、ネタバレ開始地点が示されるのみで、どこからどこまでがネタバレなのかは分からない。「NavFrame及び直接SpoilerHに書かれたCSSを無効化」のborder-weightを除去すれば枠が現れるため、ネタバレ範囲の認識が可能となる。--ラッキースター・キッド ◆Luck.w.AEQ 2007年4月22日 (日) 08:47 (UTC)

スミマセン。こちらFireFoxなのですが、このテンプレートが4月22日に一部書き換えられた後、他のページの全てのネタバレ隠しの表示ボタンが消え、全部のネタバレが開きっぱなしになっていたので直前のに差し戻させてもらいました。--VJ 2007年4月22日 (日) 21:50 (UTC)

Wikipedia:NavFrameを見る限りだと、複数のクラスが設定されているとJavaScriptが効かなくなるようだ（酷い実装だ）。うまくいくかどうか分からないが、CSSを書き換えるつもりなのでしばらくお待ち願いたい。

個人的に、酷く見辛いテンプレートだと思っているので何とか回避方法を模索しているが、なかなか難しいものだ。--ラッキースター・キッド ◆Luck.w.AEQ 2007年4月22日 (日) 23:42 (UTC)

class等を修正し、CSSも少し書き換えた。これで問題ないはずだが、問題があれば修正してくれ。

テスト不充分により、ネタバレが表示される設定になってしまっていたことをお詫びする。俺がテンプレートを書き換えたことで何か不具合が起きていたら、差し戻しておいてもらえるとありがたい。--ラッキースター・キッド ◆Luck.w.AEQ 2007年4月23日 (月) 00:17 (UTC)

修正、ありがとうございました。今の所全く問題ありません。--VJ 2007年4月23日 (月) 10:59 (UTC)

箇条書き内での使用について[編集]

箇条書きの構造の破壊を防ぐため、試験的にテンプレートの改行を除去しました。

# Test{{SpoilerH}}ネタバレ内容{{SpoilerF}}
# Test

TestTemplate:SpoilerHネタバレ内容Template:SpoilerF
Test

このように、改行を挟まずにテンプレートを使うことによって箇条書きの構造を維持することができます。

ただし、箇条書き内で{{SpoilerH}}が使われた場合、途中に改行が含まれていると

# Test{{SpoilerH}}ネタバレ内容1
ネタバレ内容2{{SpoilerF}}
# Test

TestTemplate:SpoilerHネタバレ内容1行目

ネタバレ内容2行目Template:SpoilerF

Test

このように、改行以後のテキストがはみ出てしまいます。A-Taul 2007年5月4日 (金) 17:43 (UTC)

フォントサイズについて[編集]

非表示内の文章のフォントサイズが小さいため、視力の悪いユーザーにはかなり見えづらいように思いますので、90%を100%に変更しました。何か問題があるようなら、その点について書いていただければ…と思います。--idea 2007年10月7日 (日) 18:46 (UTC)

Monobookのスキン以外ではテンプレートの外枠が表示されていません。また、（Javascriptが効かないなどの）環境によっては折りたたみ自体が機能しません。そのためフォントサイズをいじると、どこまでが折りたたまれた内容なのかが判りづらくなります。前者は[隠す]ボタンを押せば一応区別できますが、前者＋後者の場合は区別する術がなくなります。徐々に改善はされていますが、このように折りたたみ表示テンプレートはもともと環境によって乱れやすいものですし、文字サイズに限らず見栄えの設定が無駄になることもままあります。フォントサイズについては環境によってもまちまち（私の場合はStandardの90%とMonobookの標準サイズが同じ）なので、視力が悪い方はそれに応じてブラウザやユーザースタイルシートで文字の拡大表示をしているでしょうし、以前のままがよいと思います。--BBB-liner 2007年11月6日 (火) 15:42 (UTC)

monobook.cssに設定されているdiv.NavFrameのCSSに由来する外枠なので、SpoilerH内でdiv.NavFrameの外枠を無効 (style="border:0") にした上でdiv.Spoilerに外枠を設定すれば、全てのスキンで外枠が表示されるようになる。その様にソースを書き換えれば、わざわざ文字サイズを小さくするなどしなくても判別できる。そもそも隠してわざわざ見難くしているものをさらに文字を小さくするなどして見辛くする必要はなく、むしろ一旦「表示」となった場合は、「読みたい」という閲覧者の意思が働いたのであるから、それまで見辛くされていた分、他の項目よりも見易くすべきだろう。

以前からSpoilerHを改造しようと考えており、ソースもある程度準備していたのだが、BBB-liner氏の発言を見て決心がついた。近いうちに、SpoilerHの改造を行ないたいと思う。それなりに大きな改造となる予定（以前俺が書いたSpoilerH無効化CSSにも影響が出るだろう）なので、いきなりソースを書き換えず、一度ノートにソースを書き込んで他者の意見を聞いてからにしたい。ソースの最終調整を行い、一両日中にはこのノートにソースを書き込んで意見を求めるつもりなので、しばしお待ち願う。--ラッキースター・キッド ◆Luck.w.AEQ 2007年11月8日 (木) 23:01 (UTC)

折りたたまれた状態が見づらいかどうかについてはやや疑問ですが、全てのスキンで外枠をつけるという改良をして頂けるのならば、現行のフォントサイズに反対する理由はありません。--BBB-liner 2007年11月10日 (土) 13:27 (UTC)

大改造[編集]

昨日述べたように、ソースを改造してみた。pre要素などで表示してもよいのだが、横に長くなり見辛いのでやめた。ソースは「編集」のtextarea内で確認してほしい。特に異論が出なければ、1-2週間後を目処に入れ替えようと思っている。

なお、Template:SpoilerHで実際に使用する際は、改行などは除去するのだが、今のところは見易さのため改行等を含んでいる。以下が、改造テンプレートの案。

ネタばれに注意：ここには、作品の核心に至る内容が、詳細に記述されています。

折り返しが不可欠な長文が第1行目に書かれた場合のテスト（Alphabetはどのように表示されるかのtestも兼ねる）。

記号/ギリシア文字(´･ω･`)/キリル文字(ﾟдﾟ)

参考のため、今現在のSpoilerHではどのような表示になるかを以下に示す。

注意：	ここには、作品の核心に至る内容が、詳細に記述されています。

表示するには、右端の [表示] をクリックしてください。

折り返しが不可欠な長文が第1行目に書かれた場合のテスト（Alphabetはどのように表示されるかのtestも兼ねる）。

記号/ギリシア文字(´･ω･`)/キリル文字(ﾟдﾟ)

重要な変更点を以下に述べる。

新しいクラス名 "NetabareSpoiler" を用いる。"Spoiler" は将来的に廃止する。: MediaWiki:Common.css を眺めていたところ #spoiler というID名を発見。また、日本語版以外では .spoiler というクラス名も多く使われていることが判明した。SpoilerH/Fで用いられているクラス名は先頭が大文字の .Spoiler であり問題が無いといえば無いのだが、将来的にID/クラス名が被る可能性があり、間違え易い。そのため .Spoiler は廃止し、新たに .NetabareSpoiler というクラス名を用いる。しばらくの間は .NetabareSpoiler と .Spoiler を併用する (class="Spoiler NetabareSpoiler") が、 .Spoiler は適当な時期を見て廃止する（上のXHTMLではSpoilerの影響を受けないよう、既に除去済みになっている）。; "Netabare" や "netabare" でも良かったのだが、将来的に何処かで使われそうなクラス名だという心配がある。そのため、敢えて "NetabareSpoiler" というくどい名前にしてみた。これなら将来にわたり被ることはないだろう。; {{一覧の省略H}}というテンプレートでも .Spoiler が用いられており対処すべきなのだが、個人的に{{一覧の省略H}}は要らない・削除すべきと思っているので俺は関与しない。直したい人が直せばよいだろう。
NetabareSpoiler に border を付与。NavFrame の border を除去。: NavFrame に border が付くのは monobook.css だけなので、この際だから全てのスタイルで border が表示されるよう最上位要素に border を付けてみた。; NavFrame の border を除去しておかないと、monobook.css では線が二重になってしまうので、除去した。
table要素を廃止: 元々#長い注意文についてによりtable要素が導入されたのだが、 SpoilerCaution を後ろに持ってくることで回避できるようなので、廃止・除去する。; 何故 SpoilerCaution を後ろに持ってくるとバグが回避できるのか、というより、何故 NavHead の直後に NavContent を持ってくるとバグが起きるのかが不明。
SpoilerCaution の位置を NavHead と NavContent の間に移動: 上記の通り。
「右にあるボタン」という記述を除去。: CSS がオフの環境だと右には表示されないし、 JavaScript がオフだとボタンが表示されない。また、他のNavFrame系テンプレートでは「右のボタンを押せ」等の注意書きは無い。SpoilerH/Fだけに特筆する必要もないので除去した。; その代わり、 SpoilerCaution にボタンまで続く下線を引き、目立つようにした（WinIE6で見たところ下線が表示されなかったが、それほど害があるわけでもないので無視する。直せる人が直して下さい）。
NavHead を float:right: こうしておくと1行詰まって見易くなる。必ずしも必要な記述ではない。ちなみに「右にあるボタン」という記述を除去したため NavHead は   のみとなっている。 MediaWiki により変換された XHTML では、 a.NavToggle がその部分に挿入され、空ではなくなっている。

もし今現在、俺が以前書いた「無効化CSS」をユーザサイドで使っているため新旧テンプレの比較ができない（旧テンプレが展開されてしまっている）という方は、ログアウトしてIPユーザ扱いになってから当項目を見れば、問題なく比較が行なえるはずだ。--ラッキースター・キッド ◆Luck.w.AEQ 2007年11月9日 (金) 23:09 (UTC)

--

改良ありがとうございました。当方WinXP/Fx2.0ですが、Standardスキン（おそらく他のスキンでも）でJavaScriptを切っても前節での問題は生じません。しかしCSSを切ったときに、XHTMLの記述の順番の関係上、表示ボタンが注意文よりも前に来ます。ですので、NavHeadのボックスをSpoilerCautionのボックスの後に持ってきて、表示ボタンの表示位置を"position:relative; top:-2em;"あたりで調整みてはどうでしょうか。（…と思ったらバグがあるようですね。私の環境ではかなりウィンドウ幅をかなり小さくして折り返し表示させても問題ありませんでしたが…。）

ネタばれに注意：ここには、作品の核心に至る内容が、詳細に記述されています。

テストテストテストテストテスト。テストテストテストテストテスト。テストテストテストテストテスト。テストテストテストテストテスト。テストテストテストテストテスト。

あえいうえおあおかけきくけこかこさせしすせそさそ

ただまあ、「見栄えにこだわりすぎても無意味になることがある」などと言いましたし、他の環境で問題が生じた場合は無視してください。--BBB-liner 2007年11月10日 (土) 13:27 (UTC)（2007年11月10日 (土) 13:57 (UTC)に一部追記）

--

個人的に、あまり position による配置は行ないたくないという気持ちがある。位置固定系CSSは、バグがあったときに致命的な表示の崩れを起こしかねないからだ（もっとも、デフォルトである monobook.css でも position は上部バーで堂々と使われているので、きちんと設定されていれば問題は起きないと見るべきかもしれない）。

NavHead の位置問題（NavHead に長文があると折り返し時にバグる）に関しては「NavHead内の文章を短くする」という方法でしか対処できない。Common.js を直せばどうにかなるのかもしれないが、俺は JavaScript の読み書きができないのでどうにもできないし、下手に変えると他のNavFrame系テンプレートにも影響が出るので止めておいたほうが良いだろう。 のみにしておくと、jsが無効の環境（携帯電話等を想定している）では具合が良くないので、「以下ネタばれ」という短い文を挿入してみた。

position も float も取り扱いは結構厄介であり、少し間違えるととんでもない問題が起きたりするので、極力使わない方が良いのかもしれない。position と float を排除したものを試作してみたのだが、どうだろう（ついでに margin と padding も調整）。このように行を余計に取れば、「右にあるボタン」表示を除去したことによるユーザビリティの低下にも対応できているのではないかと思う。一方、行が長くて邪魔（特にjsが無効の環境において）だという意見もあるかもしれない。

ネタばれに注意：ここには、作品の核心に至る内容が、詳細に記述されています。

以下ネタばれ

折り返しが不可欠な長文が第1行目に書かれた場合のテスト（Alphabetはどのように表示されるかのtestも兼ねる）。

2行目

記号/ギリシア文字(´･ω･`)/キリル文字(ﾟдﾟ)

今回このテンプレートの改造を試みて痛感したことは、各スキン間の表示の違いのぶれを縮めるのは、想像以上に難しいということだ。あまり SpoilerH 本体にはスタイル設定を施さず、各スキンの CSS による表示に任せるべきだと思った。--ラッキースター・キッド ◆Luck.w.AEQ 2007年11月11日 (日) 04:40 (UTC)

--

お疲れ様です。Wikipediaのように構造が複雑なページの場合、そして閲覧者の環境が特にまちまちな場合、共通スタイルの使用には細心の注意が必要なんですね。行が長くなることについてですが、もともと長い記事の全体を見通しよくすることも折りたたみの目的の1つだと思うので、確かにその点ではやや問題かもしれません。しかし、このテンプレートについては閲覧上特に注意を要するネタバレがあることを喚起する意図もありますから、注意文を1つ追加することで2者のバランスが取れると思います。現段階での最新の案に賛成します。他の方の意見も伺いたいですね。--BBB-liner 2007年11月11日 (日) 10:56 (UTC)

--

他の人の意見が伺いたいという意見に同意する。とはいえ、コメント依頼に出したところで今以上のコメントが得られるとも思えない。一旦変えてしまってから、テンプレートが変化したことに興味を持った人が訪れるのを待った方が良いかもしれない。

以下、更に調整してみたテンプレートの草案だ。特に問題が無ければ、1週間後を目処に、テンプレを置き換えてしまおうと思っている。

ネタばれに注意：ここには、作品の核心に至る内容が、詳細に記述されています。

-- 以下ネタばれ --

折り返しが不可欠な長文が第1行目に書かれた場合のテスト（Alphabetはどのように表示されるかのtestも兼ねる）。

2行目

記号/ギリシア文字(´･ω･`)/キリル文字(ﾟдﾟ)

2007年11月11日 (日) 04:40 (UTC) からの変更点

NavHead に直接設定していた font-size:smaller; を、span要素に置き換え。div.NavHead に設定すると a.NavToggle も小さくなるが、monobook.css では a.NavToggle に font-size:83.3%; が設定されており、二重に小さくなって見辛いため。
SpoilerF に ここまでネタばれ の注意書き。CSSを使って見えなくしてある (display:none;) が、CSS無効の環境では表示される。「CSS無効の環境ではどこまでがネタバレなのか判断できない」という問題に対処した。
NavHead に height:auto; を記述。この記述があると、長文がある場合の折り返し時にバグが発生する問題が解消する。「-- 以下ネタばれ --」という短文しかないのであまり意味は無いのだが、あるに越したことはないので記述しておいた。なお、これは俺のアイディアではなく、Template‐ノート:Hiddenでの福太郎氏の提案をインスパイヤしたことを明記しておく。（2007年11月15日 (木) 21:21 (UTC) 追記）

しかし、「大改造」と言っておきながら、結局は元のテンプレと大差ない外観になってしまった。--ラッキースター・キッド ◆Luck.w.AEQ 2007年11月12日 (月) 21:26 (UTC)

--

問題ないと思われます。終端部の記述も素晴らしい改良になっています。他の意見がなければ、実装してから様子を見ることにも同意します。--BBB-liner 2007年11月13日 (火) 16:44 (UTC)

テンプレートの置き換えを行なった。たぶん大丈夫だとは思うのだが、もし問題が起きていたならば、一旦差し戻しをしておいてほしい。現在は .NetabareSpoiler と .Spoiler の両方が書き記されているが、年内を目処に .Spoiler は除去する予定だ。

後ほど管理者へ Common.css の対処依頼を出す予定（表示ボタンを右に寄せる必要がなくなったので該当部分を除去してもらう）だが、これは俺に任せてほしい。他の箇所で少し案があり、まとめて依頼してしまいたいので。--ラッキースター・キッド ◆Luck.w.AEQ 2007年11月18日 (日) 21:50 (UTC)

（少々問題発生）Win98+IE6+MonoBookの場合、最終修正（2007年11月12日版）の後から、“[表示]”の位置が枠線の右側にはみ出すようになってしまいました。見栄えが悪いので修正をお願いします。--Game-M 2007年11月19日 (月) 09:31 (UTC)

[表示]ボタンの位置についてですが、.NavHeadの指定がMediaWiki:Common.cssとMediaWiki:Monobook.cssで異なるようです。Common.cssの方は.Spoilerの中でないと"position:relative"が効きませんが、Monobook.cssでは.Spoilerがなくても（常に）有効になります。（そのためMonobook以外だと、現行版とノートページの最新版とで[表示]ボタンの位置が異なります。）右寄せ表示で問題が生じるようでしたら、おそらく"position:relative"を一切削除するのが良いと思います。その際、双方のMediawiki内CSSに修正を依頼してください。--BBB-liner 2007年11月19日 (月) 14:07 (UTC)

当方の WinXP+IE6+monobook の環境でも、[表示]ボタンがずれることを確認した。おそらく Monobook と Common の CSS の違いは関係ない（.Spoiler と無関係の Template:Hidden でも同様の症状が発生しているため）。11月15日におまけで付けた height:auto; を除去すれば大丈夫のようなので、除去してしまうことにする。

折り返しバグが発生する理由も不明なら、height:auto; を付ければ折り返しバグを回避できる理由も不明。height:auto; を付けると[表示]ボタンがずれる理由も全く分からない。NavFrame周りのスクリプトは厄介だ。--ラッキースター・キッド ◆Luck.w.AEQ 2007年11月19日 (月) 21:00 (UTC)

[表示]ボタンが浮動要素と被る問題[編集]

厄介な問題を見つけてしまった。まずは以下を見てほしい。

ネタばれに注意：ここには、作品の「核心」に至る内容が記述されています。

-- 以下ネタばれ --

ほんにゃら

IE6を使用している人は、別段何の問題も感じないだろう。しかし、FirefoxやOperaを使用している人には、[表示]ボタンが画像にかかってしまっているのが確認できると思う（IE7やその他のIE、Windows以外のOSのブラウザは所持していないため確認していない）。floatプロパティとpositionプロパティの仕様を確認してみたところ、「画像にかかる」Firefoxの挙動の方が正しいということが分かった。IE6は仕様に沿っていない挙動をしているため、たまたま[表示]ボタンが画像にかからないだけだった。

因みに、バグが発生するとして除去した height:auto; が設定されていると、IE6でも[表示]ボタンが画像にかかる（＋横に半文字程度ずれる）。以下がheight:autoを用いた例。

ネタばれに注意：ここには、作品の「核心」に至る内容が記述されています。

-- 以下ネタばれ --

ほんにゃら

この「ボタンが浮動要素に被る」問題は画像だけに起きるのではなく、例えば{{Infobox animanga}}のようなテンプレートでも発生する。そもそも、NavFrameを説明しているHelp:ダイナミック・ナビゲーション・ボックス内ですら発生しているものだ。

この問題に対処するため、いくつかの案があるのだが、どの案が良いか（あるいはどれも駄目か）意見を伺いたい。

1. 無視する。: 未だ最大のシェアを誇るIE6で問題が無いんだから別にそのままで良いんじゃないか、という意見。将来、CSSをより厳密に解釈するブラウザが普及したときに問題が拡大するが、とりあえず問題を先送りにできる。IE6以外のブラウザを使用している人には諦めてもらう。
2. a.NavToggle {position:absolute}をMonobook.cssから除去。: インターネットを徘徊して調べてみると、どうもfloatとpositionは非常に食い合わせの悪いものらしい。floatはウィキペディア内で非常に多用されているから、positonの方を除去してしまおうという意見。; 問題は、NavFrame関連のCSSが、Monobook.cssからCommon.cssに移植された場合。多くの他言語版では既にCommon.cssに移植済みで、日本語版でも早晩移植が行なわれると思う。そうなると、Common.cssからもposition:absoluteを除去しなければならなくなるが、そうなると他のNavFrame系テンプレートに影響が出てしまう。基本的にNavFrame系テンプレートは横に浮動要素があるときに使うように設計されていない代物なので、SpoilerHだけのエゴでposition:absoluteを除去することは出来ないだろう。
3. div.NetabareSpoiler {clear:both}にする。: 一番楽な方法。浮動要素と被るから問題が起きるのであって、それを取っ払ってしまえば問題は起きない。SpoilerHの過去版でもこのような設定になっていた。他のNavFrame系テンプレートでも、ほとんどがclear:bothになっている。; 但し、記事によっては冒頭に大きな浮動テーブルが存在することもある（例：ドラゴンクエスト）。このような記事内でテーブルと被るようにSpoilerHを用いると、表示が酷く崩れる。現在のところ苦情が出ていないのは、IE6の使用者が多いことと、たまたま浮動するテーブルや画像などと被るような位置にSpoilerHに使われていないだけに過ぎない。; 他のNavFrame系テンプレートがほとんどページ下部でナビゲーションとしてのみ使われているのに対し、SpoilerHは横に浮動要素があるような場所でも用いられる可能性が高い。「clear:bothを入れると表示が崩れるどうしよう」というのは、SpoilerH固有の問題だと言えるだろう。
4. zh:Template:SpoilerH（中国語版SpoilerH）で用いられているスクリプトを日本語版にも適用する。: 中国語版ではa.NavToggleを用いず、SpoilerH専用の独自のスクリプトを使っているようだ。スクリプトはzh:MediaWiki:Common.jsの「增加折疊功能」部分だと思う。これをGFDLの元で導入し、さらに中国語版を参考に日本語版のSpoilerHを書き換えてしまおうという案。; ただ、スクリプトということで、導入した場合にどのような現象が起こるのか予測がし辛い。最悪の場合、他のスクリプトと干渉して全てを駄目にしてしまう可能性もある。俺はスクリプトが読めないので修整できない。
5. table要素で囲う: div.NetabareSpoiler全体をtableで囲う、あるいは、div.NetabareSpoilerをtable.NetabareSpoilerに変えてしまう。簡単だが、XHTMLとして全く汚い手段であり、インターネット普及期の段組ソースの悪夢を見ているようで気持ち悪いので、個人的にはあまりやりたくない。; どうしてもtableとして扱いたいのならば、div.NetabareSpoiler {display:table}としてCSSを用いてtableを偽装する方がまだマシだろう。但しこれも、あくまでも「マシ」というだけだ。tbodyとtr、tdを設定するためにまた余計なdiv要素を増やさなければならなくなる。これはこれでソースが汚くて気持ち悪い。; また、tableで囲う・display:tableにするのどちらの方法を取ったとしても、tableとして扱われるので、[表示]ボタンを押したときに「横方向に弾ける」という問題が発生する。文字でいうと何のことやらさっぱりだが、見れば一目瞭然。詳しくは以下を参照。上側がdisplay:tableを用いた方法、下側がtable要素を用いた方法となっている。下側のtable要素を用いた方では、IE6でも「横方向に弾ける」。

ネタばれに注意：ここには、作品の核心に至る内容が、詳細に記述されています。

-- 以下ネタばれ --

折り返しが不可欠な長文が第1行目に書かれた場合のテスト（Alphabetはどのように表示されるかのtestも兼ねる）。

2行目

記号/ギリシア文字(´･ω･`)/キリル文字(ﾟдﾟ)

ネタばれに注意：ここには、作品の核心に至る内容が、詳細に記述されています。

-- 以下ネタばれ --

折り返しが不可欠な長文が第1行目に書かれた場合のテスト（Alphabetはどのように表示されるかのtestも兼ねる）。

2行目

記号/ギリシア文字(´･ω･`)/キリル文字(ﾟдﾟ)

長文になってしまったが、以上の通りだ。意見をお願いする。俺自身の意見は、簡単だがあまり気乗りしないのが3番と5番、論外が1番、個人的に惹かれるが他のテンプレートに迷惑がかかるので躊躇してしまうのが2番、一番道理に適っているがスクリプトということでやはり躊躇してしまうのが4番。このような具合だ。--ラッキースター・キッド ◆Luck.w.AEQ 2007年11月22日 (木) 21:42 (UTC)

（追記）「横方向に弾ける」のを防ぐために、SpoilerCautionに長文を書いておくという手もあるが、非常に醜い。

ネタばれに注意：ここには、作品の核心に至る内容が、詳細に記述されています。テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

-- 以下ネタばれ --

折り返しが不可欠な長文が第1行目に書かれた場合のテスト（Alphabetはどのように表示されるかのtestも兼ねる）。

2行目

記号/ギリシア文字(´･ω･`)/キリル文字(ﾟдﾟ)

このような具合だ。--ラッキースター・キッド ◆Luck.w.AEQ 2007年11月22日 (木) 21:56 (UTC)

（4番に賛成）元々このテンプレートは、スクリプトで開閉しているから、動作確認をした上でこのスクリプトを組み込むのがベストだと思います。理想を言えば、様々な環境を持つ有志にテストしてもらうべきなんですが…。--Game-M 2007年11月23日 (金) 05:27 (UTC)

（2番に近い）テンプレート全体に枠線がついたことですし、そもそも[表示]ボタンを右に寄せる必要は薄いと（私は）思います（CSSが効かなければ枠線が出ないが、そもそも右にも寄らない）。前回私がこのノートに書いたときにきちんと書かなかったので恐縮ですが、そのときに「Monobook以外だと、現行版とノートページの最新版とで[表示]ボタンの位置が異なります。」と書いたのは、右寄せ表示になるか否かの問題でした。この2者の違いは.Spoilerがあるかどうかなので、いずれ.Spolierが削除されればMonobook以外では[表示]ボタン右に来なくなります。繰り返しになりますが、MediawikiでMonobookでも右寄せの設定そのものを削除すればなんら問題ないと思います。（そこで提案していたのが.NavHeadの"position:relative"の削除でした。Monobookでも効果があるはずです。）いかがでしょう。（もともと、このテンプレート関連のCSSは他言語版からの移植の際、本来Common.cssに移されるべきところをMonobook.cssに移されたため、2者の編集は双方をよく見比べる必要があります。）

ちなみに、.NetabareSpoiler a.NavToggle {position:static}といった感じで記述すれば、他のテンプレートにも影響を与えません。--BBB-liner 2007年11月23日 (金) 09:13 (UTC) -一部追記2007年11月23日 (金) 09:22 (UTC)

（BBB-liner氏へ）実は、2007年11月18日 (日) 21:50 (UTC) の俺の発言「後ほど管理者へ〜他の箇所で少し案があり」の「他の箇所」というのは、現在 Monobook.css にのみ適用されている NavFrame 関連 CSS を Common.css に移して全スタイル共通にしようというものなのだ。例えばTemplate:週刊少年ジャンプ連載中など、monobook では綺麗に表示されるが他のスキンではスタイルが完全に破壊されているテンプレートもあるが（今のところ文句等が無いのは、それだけ monobook 使用者が多いということなのだろう）、これは Common.css に CSS を移動すれば解決する。他言語版では既に多くのところで Common.css への移動が行なわれていることもあり、それに倣い日本語版でも CSS を移動することには反対も出ないだろうから依頼してしまおうと思っていたのだが、その矢先にこの「浮動被り」を見つけてしまったというわけだ（この問題が片付かないと依頼もできない）。

今まで、この SpoilerH はウィキペディアにさまざまな迷惑をかけてきた。例えば、NavFrame 系テンプレートのデフォルトを「隠す」にしてしまったなど（Wikipedia‐ノート:ネタばれに注意#折りたたみ式のTemplateの提案が諸悪の根源。この頃は俺もまだ初心者で、このような議論が行なわれていることを知らなかった。これを止められなかったのは今でも悔いている）。「テンプレートはデフォルト状態では表示されていた方が良い」という意見もある（Template‐ノート:Navigation）のに、それを無視し（というより、諸悪の根源を見る限りでは、最初から最後まで他への影響を考えていなかったように思える）折り畳みを強行してしまった。これ以上、元々必要の無いこのようなテンプレート一つのために、ウィキペディアに迷惑をかけることは許されないだろうと、俺は強く思っている。SpoilerH だけのエゴで SpoilerH だけに都合の良い CSS に変更することは、絶対に駄目だ（断定する）。

俺はこのテンプレートが大嫌いだ。可能なら削除依頼を出したいくらいだが、もはや多用され過ぎ、また「邪魔」以外のの削除理由が明確にできずにいるので依頼を提出していないだけだ。このテンプレートの修正に尽力しているのも、邪魔で見辛いものであるから、せめて邪魔は邪魔なりにできるだけ見易いものにしようとしているだけに過ぎない。--ラッキースター・キッド ◆Luck.w.AEQ 2007年11月23日 (金) 22:06 (UTC)

（Game-M氏へ）中国語版のスクリプトをそのまま輸入できれば良いのだが、どうも中国語版の NavFrame のスクリプトは独自の改良が行なわれているらしく、基本的には英語版からの輸入である日本語版のスクリプトの中にそのまま突っ込むことはできないようだ。もしうまく輸入できれば、SpoilerH で「隠す」機能を維持したまま Template:Navigation などのデフォルトを「表示」に戻すことも可能になると思うので、願ったり適ったりなのだが、中国語版と日本語版（英語版）のスクリプト構造の違いは大きく、かなり詳しい人でないと機能輸入のためのスクリプト改良は不可能だろう。下手にいじると他のスクリプトに悪影響が出、またしても SpoilerH がウィキペディアに迷惑をかけることになってしまう。

誰か協力してくれるプログラマが居れば良いのだが、こんな不要なテンプレートのために協力してくれる人は居ないだろう。--ラッキースター・キッド ◆Luck.w.AEQ 2007年11月23日 (金) 22:55 (UTC)

en:MediaWiki:Common.jsがいつの間にか変更されていました。NavigationBarShowDefaultは廃止されて、初期状態で隠したいNavContentのほうにdisplay: noneを設定する仕様に変わったようです。これを導入してSpoilerHにスタイルを設定すれば解決しないでしょうか。--emk 2007年11月24日 (土) 00:12 (UTC)

上記はデフォルトで他のNavFrameも隠されてしまう問題についてです。floatかぶりについては、BBB-linerさんがおっしゃっている通り「.NetabareSpoiler a.NavToggle { position:static }」のようにすれば他のテンプレートには影響を与えませんが、それでも反対でしょうか。--emk 2007年11月24日 (土) 00:21 (UTC)

（emk氏の案に賛成）動作確認は必要ですが、これが一番無難な気がします。SpoilerHは、私にとってはとても便利なので、できる事ならば回りに悪影響を与えないように修正した上で、使い続けたいです。スクリプトに詳しいので、emk氏の案が使えない場合は、暇があれば中国版スクリプトを改良して機能輸入ができるかどうか調べられるかもしれません。もっとも、自分の私物の環境はWin98+IE6のみなので、どこにでもあるWinXP+IE6ならとにかく、他のOSやブラウザでの動作確認はできませんが…。--Game-M 2007年11月24日 (土) 09:03 (UTC)

emk氏の「初期状態で隠したい NavFrame に display:none を設定する」というのは良い案だとは思うのだが、それだと「JavaScript がオフで CSS がオン」という環境では表示が隠されたままになってしまうのではなかろうか。

英語版では文句が出ていないのかとも思うが、おそらく、英語版では NavFrame はその名の通りナビゲーションにしか使われず、ナビゲーションは記事の行き来を助けるためにあり極論を言えば無くても困らないものなので、そう大きな問題は出ていないのだろう。つまり「あると便利だが、たとえ display:none 固定で表示されない状態になっても困らない」というものだ。

ところが日本語版 SpoilerH はそうではなく「display:none 固定で表示されない状態になると困る」ものだ。ナビゲーションでないものに NavFrame を使ってしまった弊害だろう。「JavaScript がオフで CSS がオン」というのがどのような環境か分からないが、どのような環境においても、本文が見えないままそれを表示させる手段が無いというのは如何にも不味い。

「.NetabareSpoiler a.NavToggle { position:static }」は Common.css に迷惑かけるのであまり積極的には賛同できないが、おそらく最善の案の一つだろうとは思うので、反対はしない。--ラッキースター・キッド ◆Luck.w.AEQ 2007年11月24日 (土) 22:55 (UTC)

確かにJavaScriptオフでCSSオンだと問題が出ますね。IEなどはCSSをオフにできないのでごく普通にあり得る環境ではないかと思います。

NavFrame系がデフォルトで隠れる問題はNavFrame関連CSSのCommon.cssとは関係ありませんし動作確認が必要なので、とりあえず棚上げにして、floatかぶりの問題にだけ対策してから改めて検討するということでいかがでしょうか。--emk 2007年11月25日 (日) 03:44 (UTC)

私のスタンスは「[表示]を右寄せしても正しく表示できるのであればそれに従いますが、そうでなければ右寄せをする必要がない。」というものです。そして、他言語版のものを改変流用するのではなく、日本語版の事情に合わせて独自に作っていく方が良いです。LuckyStar Kidさんが「 NavFrame 関連 CSS を Common.css に移す」ことでどのような挙動をするのかが、私には正確には見えませんが、Emkさんの言うように右寄せでの問題が「.NetabareSpoiler a.NavToggle { position:static }」的なCSSにより解決されるのであれば、これを含めて変更依頼するのが良いのではないでしょうか。--BBB-liner 2007年11月25日 (日) 09:45 (UTC)

先日は「本文が見えないままそれを表示させる手段が無いというのは如何にも不味い」と言ったが、よくよく考えてみると、元々ネタバレはいけないとして隠すくらいの項目だから、「jsオフ・CSSオン」の環境で見えなくてもそれはそれで構わないのではないかと思うようになった。極論を言えば、SpoilerH を <div style="display:none"> に、SpoilerF を </div> にして、「ネタバレを読みたい方は、お使いのブラウザの『ソースを表示』などでソースを読んで下さい。」としても何ら問題ないわけだ（ソースビュー機能の無いブラウザもあるが、そういったブラウザは大抵CSSにも対応していないので、そもそも dispaly:none とならない）。ネタバレというより単なるゲームの裏技や単なるキャラクターの裏設定などを隠すために使われるのを抑制することもできる（「ネタバレを隠すのは結構だが、環境によっては全く表示されなくなるが、それでも使うのか？」）し、何よりデフォルトを「表示」に戻せるのは SpoilerH/F を破棄してでも手に入れたい魅力的なものだ。

とはいえ、スクリプトということで簡単に扱えるものでもないし、そもそもここで話し合う範疇を超えてしまう。とりあえず棚上げして、まずは .NetabareSpoiler a.NavToggle {position:static;} で浮動被りだけでも直すという案に賛成する。デフォルト表示問題については、そのうちHelp‐ノート:ダイナミック・ナビゲーション・ボックスかWikipedia‐ノート:ウィキプロジェクトテンプレートあたりで、他のテンプレートとも調整しながら議論を進めようかと思っている（予定は未定）。

なお、現在 SpoilerH の「-- 以下ネタばれ --」部分がセンタリングされているが、これは Common.css が意味も無く変更されたためだ。これからTemplate‐ノート:Navigationに文句を言ってくる。--ラッキースター・キッド ◆Luck.w.AEQ 2007年11月26日 (月) 21:30 (UTC)

浮動要素が干渉する問題の暫定的な対処として「.NetabareSpoiler a.NavToggle { position:static; }」をCommon.cssに追加することについては、反対意見がないため依頼をしておきました。また、「-- 以下ネタばれ --」がセンタリングされる問題は、下の節で提案されている display:none を追加すると同時に解決されるため、そのように変更しました。--BBB-liner 2007年12月1日 (土) 10:20 (UTC)