Wikipedia:井戸端/subj/Firefoxでの閲覧時、節編集ボタン移動について
|
Firefoxでの閲覧時、節編集ボタン移動について
[編集]Araisyoheiと申します。私は通常、WinXP+Mozilla Firefoxを使用して閲覧・編集を行っているのですが、「この編集」によって、節編集のリンクが移動してしまう・引用枠がはみ出してしまうという状況になってしまってしまいました(ギャラリー化によって改善済み)。Opera・Safariも同様ですが、IEにおいては、節ボタン移動はありませんでした。他「駅」など画像が多いところ・テンプレートを使用しているところなどで発生しています。(一部テンプレートでは発生しない場合もありました。)全体に関わることだと思いこちらにも投稿をさせていただきました。みなさんの知恵を拝借させていただけたらと思います。⇒ここまでの話 --S.Arai (talk) / Commons!! 2009年1月9日 (金) 07:53 (UTC)
- まず、CSSの仕様を完全に理解しているわけではないので強い自信はありませんが、この問題の原因は、CSSの仕様から連続する右フロートはおおざっぱに言って逆L字型に配置されなくてはならない、ということに起因するようです(これの「フロートの外上辺は,ソース上の先行要素が生成したブロックまたはフロートの外上辺より,上に来てはならない」を参照。少なくともIEの動作のほうが、この制約に違反しているように思えます)。
- 解決策というのはいくつも考えられますが…
- 自分がこの問題を解消したいというだけであれば、ユーザースキンを設定することによって解決できます。これかこれと同じ内容を、ユーザースキン(Araisyoheiさんであれば、利用者:Araisyohei/monobook.cssなど)に書き加えれば解決できるはずです。
- 私自身は、ユーザースキンを設定していない状態も確認できるように、ユーザースクリプトによって切り替えられるようにしています。同じようにする場合は、ユーザースクリプト(Araisyoheiさんであれば、利用者:Araisyohei/monobook.jsなど)に「importScript("User:Mizusumashi/Script/ToggleEditSectionLink.js");」を書き加えてください。
- 自分自身だけではなく、またユーザースキンやユーザースクリプトを設定できないIP利用者・非ログイン閲覧者にとっても問題を解決するようにということであれば、たぶん、先ほどのCSSをMediaWiki:common.cssかMediaWiki:monobook.cssに設定してしまうのが、もっとも手っ取り早いと思います(先ほどのスクリプトを設定することもできますが、デフォルトを変更してしまえば、切り替え機能を提供する必要はないように思います)。
- 記事のレベルでということであれば、CSSで「<div style="clear: both" ></div>」「<div style="clear: right" ></div>」を節の前に挿入するのがもっとも汎用性がある方法だと思いますが(私はこれを未完成発明で採用しました)、左に配置して回避したほうが良い場合やギャラリーを使ったほうが良い場合もあり、あらゆる場合にベストな方法というのはなさそうに思えるので、結局、Firefoxなどを使いながら、草取りしていくほかはないように思います。
- また、この問題の解説・原因・いくつかの対処法の説明を書いたページをWikipedia名前空間に作るのは、良いことだろうと思います。--mizusumashi(月間感謝賞を応援します) 2009年1月11日 (日) 21:08 (UTC)--修正:2009年1月12日 (月) 20:28 (UTC)
- 状況は確認していますが、原因がよくわからない状況です。駅情報テンプレートはTemplate:infoboxを使用していますので、そちらのノートで相談した方がいい知恵が集まるかもしれません。--ikaxer 2009年1月12日 (月) 02:49 (UTC)
- Frozen-mikan です。根本的な解決にはなりませんが、ヘッダ要素 h1-h6 に "clear:both" を付けることに賛成します。以下は、この現象だと思われる原因。まず、条件として、
- 「"clear:right;" があり、"float:right;" がある」ブロック要素が二つ以上存在する
- ソース上、1の要素群以降に「"clear:right;" がなく "float:right;" がある」要素がある
- この状況で、2に該当する要素の前後が、1の要素群にある最後の要素より上に表示される場合、最後の要素の左側にまとめて表示される現象が起きる。以上、色々醜い点はご容赦願います。--Frozen-mikan 2009年1月12日 (月) 05:03 (UTC)
- (補足)Template:右 などを用いて前述1番に該当する要素を一つに纏めることで、今回のような問題は発生しないと思われます。--Frozen-mikan 2009年1月12日 (月) 06:32 (UTC)
- Frozen-mikan です。根本的な解決にはなりませんが、ヘッダ要素 h1-h6 に "clear:both" を付けることに賛成します。以下は、この現象だと思われる原因。まず、条件として、
(インデント戻します)
{{基礎情報 会社}}では起きないということで、利用者:Mizusumashi/Template/基礎研究室4[1]で実験してみましたが、このように節編集リンクが押し下げられることを問題とされているのではないのでしょうか?--mizusumashi(月間感謝賞を応援します) 2009年1月12日 (月) 05:38 (UTC)
- コメント Frozen-mikan です。会社の場合は、目次が長かったり、フロート指定要素が一つしかなかったりするだけだと思います。テンプレートの下に画像を配置している関西国際空港で目次の [非表示] をクリックすると違いが良くわかると思います。(手元の IE6 では、右フロート指定の画像位置に本文が従属する、という別の問題が発生していますが。)--Frozen-mikan 2009年1月12日 (月) 06:32 (UTC)
原因があまり共有されていないようなので、実例を作りました(Frozen-mikanさんにはお分かりいただけていると思います)。ただし、Firefoxで閲覧しないと何の話をしているのか、全く分からないかもしれません:
閲覧環境に大きく依存しますが、私の環境でFirefoxだと、赤いボックスが、逆L字型に配置されます。
「1」のボックスよりも上に「2」はこれないし、「2」のボックスよりも上に「3」はこれないし… と、フロート要素は先行するフロート要素より上に来ることはできません。やや分かりにくいですが、「3」は「2」に押し下げられている、かつ「4」は「3」よりも上に来ることはない、よって「4」は「2」に押し下げられる、ということになります。そして、「4」「5」のボックスにあたるところに節編集リンクが来てしまっており、これが本文(節タイトルを含む)の配置を無視して強制されていることが、問題の原因です。この問題の発生はCSSの仕様上正しく、むしろIE(少なくともIE7)はこの制約に従っていないがために一見意図どおり見えてしまう、ということになっているのだと思います。
そして、{{右}}などで解決するというのは、次のように処理することによって解決しているのだと思います:
「1」「2」「3」のボックスを緑のボックスでまとめて、一つのボックスにしてしまっています。こうすることによって、「4」のボックスは緑のボックスよりも上にくることはできませんが、緑のボックスには先行するボックスがないためにもともと一番上に配置されているので、事実上、「4」のボックスの配置に制約かかりません(ここで説明している制約については)。これは、「1」「2」「3」のボックスを調整して問題に対処しているというよりも、「1」「2」「3」のボックスの外側でトリックを使っているわけです。
en:Wikipedia:How to fix bunched-up edit links#Using a floated divは、この技法を説明しており、en:Template:FixBunchingもこれにTable要素を組み合わせたものに過ぎないようです。--mizusumashi(月間感謝賞を応援します) 2009年1月12日 (月) 20:28 (UTC)
- 問題の内容が判らない方が多いかもしれませんので百聞は一見にしかず。どのようになるかキャプチャしたものをアップロードしました。
- --𪚥𪚥 2009年1月13日 (火) 01:49 (UTC)
- キャプチャの提示いただきましてありがとうございます。IEにおいては空白ができる。とか関連したエラー?がありましたら引き続き教えていただけたら幸いです。--S.Arai (talk) / Commons!! 2009年1月13日 (火) 09:49 (UTC)
- Windows 7 beta に含まれている IE8 も Firefox と同様のレイアウトで表示されました。beta 版なので正式版で変更されている可能性は無くはないですが、マイクロソフトは正式版ではベータ版の不具合は修正しても仕様は滅多に変更しないので、このままリリースされる公算が高いかと。 --屏風に坊主が上手にジョーズの絵を描いた 2009年1月13日 (火) 10:02 (UTC)
- もう少し議論がまとまったら最下部に状況を箇条書きで書こうと思いますが、結構複雑な問題(私でも改善方法が理解できない;)なので、難しいなら諦めますが・・・;--S.Arai (talk) / Commons!! 2009年1月13日 (火) 10:36 (UTC)
- いまいち状況がつかめないのですが、これはWikipedia:バグの報告/MediaWiki1.9#複数の画像があるページで[編集]ボタンがずれると同様の事例ですかね。もしそうであれば、現状を維持しての解決は無理ですよ。色々試してみましたから分かります。
- 私自身は、ユーザサイドCSSで
span.editsection {float:none; font-size:12px; background-color:#666; color:#fff;}
等書いて(実際はもう少し複雑にしていますが)使っています。慣れれば節編集ボタン左寄せでも何ら問題ないですよ。わざわざ右に行かずにクリックできるので楽なくらいです。どこだか忘れましたが、デフォルトで左寄せしている言語版もありましたしね。--ラッキースター・キッド ◆Luck.w.AEQ 2009年1月13日 (火) 20:43 (UTC)
- ということは、Firefox系?ユーザーはIP利用者を含めて設定をしなければいけないのかな・・・・--S.Arai (talk) / Commons!! 2009年1月16日 (金) 07:31 (UTC)
- これらのスキンを編集するのは管理者でないと不可能だと思うのですが、実際には個人レベルでの対応に任せる方法なのでしょうか・・--S.Arai (talk) / Commons!! 2009年1月20日 (火) 10:09 (UTC)
- 基本的にはそうなるでしょうね。もっとも、Firefox使いは自分で設定をいじるのが好きな人が多いと思うので、そんなに大問題ではない気もしますが(アドオンの「stylish」が便利すぎる)。ただ、随分先だとは思いますがWin7/IE8が正式販売された時が心配ですね。やはり最大シェアOSに同梱されているブラウザが、何だかんだで一番普及するでしょうから。最終的には直したほうが良いのでしょうが、私は困っていないし音頭を取る気力も無いので、何もしません。
- 先日「デフォルトで左寄せしている言語版もありましたしね」と発言しましたが、具体的にはドイツ語版やスペイン語版ですね。ただこの2言語版は、英語版や日本語版とは違って「editsectionが、節内容の後にある」んですよ。MediaWiki設定をいじっているのでしょうけれど、ここまで来ると一般利用者はおろか管理者にも手を出せない領域でしょう(システムメッセージの変更ではないため)。--ラッキースター・キッド ◆Luck.w.AEQ 2009年1月20日 (火) 17:36 (UTC)
- mizusumashiです。
- (S.Araiさんへ)現状は「実際には個人レベルでの対応に任せる」ことになっていますが、「実際には個人レベルでの対応に任せる」べきであるという合意があるかといえば、それはたぶんないだろうと思います。単純に、いままでこの問題をウィキペディア日本語版側の設定を変更することによって解決
変更するというのを精力的に提案する人がいなかっただけだろうと思います。 - この問題の解決を精力的に推し進める人がいなかったというのは、たぶん、この問題を分かりやすく定式化して提示するのが難しく、議論が錯綜しがちなのが予見できるからでしょう(実際、私も上で技術的な詳細を説明しようとして、かえって錯綜させてしまったかもしれません)。
- ただ、いまなら、IE8が普及すれば頻繁に同じ問題提起が起きるだろうことが予見できること、ドイツ語版という先行事例があることなどから、「ドイツ語版と同じ解決をしましょう」という提案で押し切れるかもしれません。もし、S.Araiさんに任せていただけるなら、私が改めて提案を行ってみたいとも思っています。
- (ラッキースター・キッドさんへ)ドイツ語版は、de:MediaWiki:Monobook.jsでeditsectionの位置を変更しているようなので、同様のことは日本語版でも管理者権限でできます(User:Mizusumashi/Script/MoveEditsection.jsで試しました)。--mizusumashi(月間感謝賞を応援します) 2009年1月20日 (火) 22:34 (UTC)
- ご意見いただきまして有難うございます!私としては、事前予防で行きたいと考えていますのでできればmizusumashiさん中心に(私はCSS基礎しかわかりませんので)解決に向けて動き出したいのですが、そのような感じでいかがでしょうか・・・ーーS.Arai (talk) / Commons!! 2009年1月21日 (水) 00:00 (UTC)
- 成る程、確かに節編集のeditsectionはjs生成でしたね(jsをオフにすると節編集が表示されないことを失念していました)。どうせやるならばcommon.jsで全スキン一括の方が良い気もします。
- ただし、ドイツ語版はいわゆる既定のスタイルシートshared.css(管理者でも弄れない……はず)で右フロートになっているものを、直接記述で左に「ねじ伏せ」ているため、節編集リンクが「ページ読み込みが完全に終了されるまで右に表示された後、左に飛ぶ」という現象が発生しています(ドイツ語版で長いページを低速回線で見ればよく分かります)。節編集リンクはよく見るものですから、違和感を感じる人も多いかもしれません。commom.cssなりmonobook.cssなりに書いた場合はまた違う結果になるかもしれませんが、試してみないことには何とも言えません。結構、左寄せは諸刃なんですよ。単純にcssとjsを書き換えれば済むというものでもない。
- それに、私などは別に左寄せで不便を感じない(むしろ視線とマウスの移動が少ないので楽なくらい)のですが、中には右にフロートしていないと使い辛いという人もいるでしょうし、現状で特に不便を感じないのにわざわざ変更することに反発する人もいるでしょう(私は基本的にこのタイプです)。右寄せ左飛びが発生するとすればなおさらです。
- 過去ログを漁っていたら、Wikipedia:表示改善依頼#サッカー選手テンプレートと他のテンプレートの競合というのを見つけ、そこからWikipedia:バグの報告/MediaWiki1.11#画像thumbというのも見つけました。前者はMizusumashi氏も議論に参加されていますね。散発的に議題にはなるようですが、そのままお蔵入りが多い様子。--ラッキースター・キッド ◆Luck.w.AEQ 2009年1月21日 (水) 15:59 (UTC)
- (節編集リンクが "float:right" になった経緯はわかりませんが)この問題の根源的な部分として、記事本文の流れから浮いて右の流れに外れた「画像やテンプレートボックス」に「節編集リンク」を混ぜている現状が、少々やりすぎてる、ということなのではないか、もしくはその状態を認識できなかったことが、問題に繋がっているのではないか、と。これを解決するには、「混ぜない」か「断ち切る」だと思います。
- さて、繰り返しになりますが、以前は見出しのスタイルに "clear:both" を付ける事に賛成しました(これは「断ち切る」方)。仮に本文の流れを見出しの位置で「断ち切る」方向が無理ならば、せめて「混ぜない」方向で進めて欲しいです。最低でも節編集リンクのスタイルに手を加え、"float:right" を "float:none" へ上書きして欲しいと思います(左寄せではない。念のため)。--Frozen-mikan 2009年1月21日 (水) 17:42 (UTC)
フロートを使わず右寄せ + マージン調整で何とかなりそうな感じ。
.editsection {
float: none;
display: block;
text-align: right;
margin-bottom: -1em;
}
デモを作ってみました。フロートした時と大体同じ見た目になるんじゃないかと思います。--cpro 2009年1月22日 (木) 00:59 (UTC)
- 見出し文字列が長すぎると節編集リンクと重なってしまいますね。mw-headline クラスに padding-right を設定すると Firefox では回避できますが、IE だとだめです(これはたぶんIEの方が正しいと思う)。うーん、ままならない。--cpro 2009年1月22日 (木) 05:49 (UTC)
- cproさんの案は、すばらしいと思ったのですが、むぅ…
- いろいろ考えてみたところ、まず、H1~H6に「clear: both」(「clear: right」はうまくないことに気がついた)を設定した場合のメリット・デメリットと、それをMediaWiki:common.cssに設定するかどうか、というところから話し合ってみるのが良いように思います。というのは、この問題への対処は、(1)H1~H6に「clear: both」、(2)editsectionのfloatをnoneにする、(3)記事レベル・利用者レベルで頑張る、という三種類に区別できて、(2)の細部を話しあうよりは、この三つの大枠でまず話し合ったほうが良いだろうと思うからです。
- さて、H1~H6に「clear: both」を適用すると、記事の冒頭、最初の節の前に設置されたinfoboxなどによって、いわば最初の節が押し下げられるという結果が帰結します(これを設定して、サウスカロライナ州を観てみてください)。また、最初の節以外でも、本文が少なく画像などが多い節は、次の節が画像などによって押し下げられます。そのため、たぶん、かなり多くの記事で見た目が変化するでしょう(表マークアップによって回避することは可能ではあります)。この変化を、歓迎ないしは甘受するかどうか、ということが問題です。個人的には、これはこれで悪くはないという気はしますが、広く受け入れられるかというとよく分かりません。--mizusumashi(月間感謝賞を応援します) 2009年1月22日 (木) 11:24 (UTC)
- 個人的には、やるのであれば「clear:both」作戦が良いと思います。便利なので多用されすぎている(日本語版だけではなく全言語版において!)「float:right」ですが、それがレイアウトの破壊を招き、それに対処するためにXHTML/ウィキテキスト構造の破壊を引き起こしている記事もあるようで、それに対処するには「clear:both」が一番楽です(例えば夜行列車#日本の夜行列車。酷い)。
- ただし、この方法だとWP:CP、P:Gのような構造のページだと各所にズレが発生します。破壊的なズレこそ無いのですが、対処法も無く、レイアウトを変えるしかありません(!importantを上手く使えばなんとかなるかも?)。Template:TOCrightの使用されているページは漏れなく死にます。
- cpro氏のCSSも悪くはないと思うのですが、marginのマイナス指定は環境によっては文字被りが発生しやすいので、なるべく避けた方が良いと考えています。全ての環境をチェックするのは不可能ですし。
- 結局のところは、変われば反発も出るがそのうちみんな慣れるだろうというのが私の考えです。
- さて、何か決めるとするならば、そろそろ井戸端から他の適当な場所に移動して、広く意見を募るべきかと思いますが、どうしましょうか(音頭を取る気は無いのですが乗りかかった船なので一応乗ったまま居ます)。少人数クローズドで決めれば後からのブーイングは必至ですが、かといって大々的に意見を募った末に大混乱いつの間にか議論霧散では困りますし。最近は声の大きいだけの場を引っ掻き回す荒らし染みた困った方が多いでしょう、ありとあらゆる人から意見を聞くというのは抵抗があるんですよ。cpro氏やmizusumashi氏もいらっしゃることですし、Wikipedia:表示改善依頼あたりでやった方が良いのかも……ところでWikipedia:表示改善依頼もeditsectionズレが発生しているみたいですよ。灯台下暗し。--ラッキースター・キッド ◆Luck.w.AEQ 2009年1月22日 (木) 23:00 (UTC)
- では、このサブページにおいて「clear:both」で異議がないようでしたら、今月27日ころに「clear:both」案をMediaWiki‐ノート:Common.cssに提出し、Wikipedia:お知らせで告知して、異議を2週間ほど待ち、なければ実行という手順でどうでしょうか。--mizusumashi(月間感謝賞を応援します) 2009年1月24日 (土) 05:17 (UTC)
(戻し)よろしくお願いします。言いだしっぺなので何かできることがあればお手伝いさせていただきます。--S.Arai (talk) / Commons!! 2009年1月24日 (土) 12:42 (UTC)
- IE8 について。上記で表示が Firefox 等と同じと記述しましたが、本日公開された IE8RC では wikipedia.org が「要互換リスト」にラインナップされておりデフォルトで IE7 と同様のレイアウトで表示される事になりました。
- つまり互換リストに登録されていない外部ミラーサイトと本家で表示されるレイアウトが異なるという事態に。
- もしくは、デフォルトで使用している人と設定をいじくっている人で見た目が異なってしまうという事に。 --屏風に坊主が上手にジョーズの絵を描いた 2009年1月27日 (火) 10:56 (UTC)
MediaWiki‐ノート:Common.css#H1~6に「clear: both」を設定する提案で提案を行い、Wikipedia:お知らせにその告知を行いました。
(屏風に坊主が上手にジョーズの絵を描いた さんへ)IE8の変更について、ご教示ありがとうございます。IE8はβ版ですから、もともとその機能についてなんらかの期待や予測をするほうが悪いわけですが、それにしても私たちにとっては間の悪い変更ですね… いずれにせよ、H1~H6に「clear:both」を設定してしまえばこの問題は抜本的に解決されるので、ひとまず、この案で合意ができるか見てみたいと思います。--mizusumashi(月間感謝賞を応援します) 2009年1月27日 (火) 11:56 (UTC)
- まあIE8(及びIE7以前)はともかく、合計シェアが25%を超えていることはほぼ確実なFirefox・Opera・Safari・Google Chrome大連合で表示が崩れる(WinXPでしか確認していませんが)わけで、無視できない数が表示崩れに遭遇しているということですから、他の解決法が無い限りは何かしら変更が必要ということになります。とりあえず変えてみて、意見や文句が飛んできるのを待つのが最善ではないかと思います。
- このあたり、諸外国語版ではどうなっているのか(どのような議論が起きているのか)気になりますね。ドイツ語版やスペイン語版の変更はどのようにして起きたのかとか、英語版は誰も気にしていないのかとか。欧州はFirefox利用率が高いと聞くのでその関係かなとか、文字どおり全世界規模の英語版はプレインストールのIE利用者が多いのかなとか考えたりはしますけれど。
- とりあえず、ウィキペディアは何でもかんでも右寄せしすぎで、infoboxも無意味に長すぎるものが多い。その辺の問題も適当に解決に向かうとよいなと考えたりします(全言語版が抱える問題なので完全に解決するとは思っていませんが)。--ラッキースター・キッド ◆Luck.w.AEQ 2009年1月27日 (火) 16:26 (UTC)
このサブページのWikipedia:井戸端への読み込みを解除し、新たにWikipedia:井戸端/subj/節リンク移動問題へのJavaScript方式による対処の提案を提出いたしました。--mizusumashi(月間感謝賞を応援します) 2009年2月5日 (木) 15:50 (UTC)