Template‐ノート:ウィキポータルボックスヘッダ

デザイン変更検討

mizusumashiです。Wikipedia:表示改善依頼#Portal:天文学での要望から、デザイン変更の検討を提案します。

まず、現在のデザインは次のようなものになっています：

現状

[編集] 内容・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○

いままでこれでとくに問題も指摘されずに運用されてきたのだと思いますが、Wikipedia:表示改善依頼#Portal:天文学で指摘され、私自身も確認したところ、Windows XP + mozilla 3.0.4、及び Windows XP + Safari 3.1.2で表示が乱れます：

現状

[編集]

ファイル:ExampleImage.PNG

ファイル:ExampleImage.PNG

内容・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○

これに対処する方法はいくつかあります。まず、画像をサムネイル表示にすれば、いちおう文字が表示されるスペースは確保されます：

現状

[編集]

ファイル:ExampleImage.PNG

ファイル:ExampleImage.PNG

内容・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○

また、内容の先頭に<div style="clear: both"></div>を挿入しても解決します（コードを確認してください）：

現状

[編集]

ファイル:ExampleImage.PNG

ファイル:ExampleImage.PNG

内容・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○

この二つは、画像の表示によって問題をおこしているものだけ変更し、それ以外のものは表示を全く変更せずにすむので現状を尊重した解決になりますが、テンプレートの設計で解決できないもない問題をテンプレートの利用者側に負担と困惑を与えることになります。

他方、Template:ウィキポータルボックスヘッダに手を加え、画像の表示によって問題をおこしているもの以外にも影響を及ぼしますが、テンプレートの利用者側に負担を与えない解決としては、この<div style="clear: both"></div>を、Template:ウィキポータルボックスヘッダに組み込んでしまう方法があります（「[編集]」の位置は調整可能）：

<div style="clear: both"></div>組み込み

[編集]

ファイル:ExampleImage.PNG

ファイル:ExampleImage.PNG

内容・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○

また、別の方法として、「[編集]」をヘッダの位置に持ってくることもできます：

[編集]

「[編集]」をヘッダの位置へ

ファイル:ExampleImage.PNG

ファイル:ExampleImage.PNG

内容・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○

個人的には、設計上の美しさとしては、「[編集]」をヘッダの位置にもってくるのが最も良いのではないかと考えていますが、一つ問題があります。それはタイトルの背景色によっては、「[編集]」が見づらくなることです。例えば、Portal:建築で採用されている色を使用すると、次のようになります：

[編集]

「[編集]」をヘッダの位置へ

ファイル:ExampleImage.PNG

ファイル:ExampleImage.PNG

内容・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○

これは、「[編集]」の色をタイトルの文字色と一致させることによって、いちおう解決できます：

[編集]

「[編集]」をヘッダの位置へ・文字色調整

ファイル:ExampleImage.PNG

ファイル:ExampleImage.PNG

内容・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○

整理します：

1. 現状 - 画像の表示のさせ方によっては、一部のブラウザで表示が乱れる。しかし、これは個別に対処することは可能。
2. Template:ウィキポータルボックスヘッダに<div style="clear: both"></div>を組み込む - 一部のブラウザで表示が乱れる問題を解決。また、全体的な表示はほとんど変わらない。
3. 「[編集]」をヘッダの位置へ移動 - 一部のブラウザで表示が乱れる問題を解決。テンプレートの設計上の大きな変更となる。一部の色使いの場合に、見づらくなる。
4. 「[編集]」をヘッダの位置へ移動 + 文字色調整 - 一部のブラウザで表示が乱れる問題を解決。テンプレートの設計上の大きな変更となる。「[編集]」の色が通常と異なることになる。

この四つの選択肢について、私自身は4.が最も優れているのではないかと思いますが、皆様のご意見をお聞かせください。--mizusumashi（月間感謝賞を応援します） 2008年12月3日 (水) 13:03 (UTC)[返信]

表示改善依頼で問題提起した者です。mizusumashi様、こんなに早く改善案まで作っていただいて驚いています。ありがとうございます。僕としても4.が一番良いと思います。蛇足ですが、昨日僕が原因を突き止めようと足掻いていたときに作ったテストケース用ページがあります。参考には全くならないはずですが、何か役に立ちそうであれば書き換えて使ってください。--きたし 2008年12月3日 (水) 14:04 (UTC)[返信]

Windows Vista + Safari 3.1.2でも画像上辺が文章に重なる（かする）という不具合を確認いたしました。Windows Vista + IE7ではそのような不具合は生じませんが、画像があると（上の例示では上から2 - 5番目、選択肢でいえば1と2）ボックス下部（内容・○・○・…・○ の部分）が不自然に左に延びて表示されるという、別の不具合が生じています。双方の不具合を解消させるとしたら、3か4の選択肢になるわけですが、「[編集]」リンクが見にくくなってはいけないので、4が最も良いと思います（なお、「[編集]」リンクの文字色を変更させるという手法は、{{Navbox}}の{{Tnavbar}}でも採用されています）。--新幹線 2008年12月4日 (木) 08:28 (UTC)[返信]

（インデント戻します）
新幹線さんのご指摘された不具合を、Window XP + IE7でも確認いたしました。試行錯誤してみたところ、これは、{{ウィキポータルボックスヘッダ}}から{{ウィキポータルボックスフッタ}}全体を「<div style="width: 100%"></div>」で囲んでやれば、抑制できるようです（次の表示のコードを確認してみてください）：

現状

[編集]

ファイル:ExampleImage.PNG

ファイル:ExampleImage.PNG

内容・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○

なぜこのような動作になるのかは、よく分かりません（IE7のバグではなかろうかという気はします）。ただ、このような抑制の方法があるとはいえ、不可解な不具合に対抗するために不可解なコードを付加する必要がでてくるわけで、やはりこの問題は選択肢4.を支持する理由にはなるだろうと考えます。

1週間待ってみて、とくに異論がなければ、ひとまず4.に変更しようと思います。--mizusumashi（月間感謝賞を応援します） 2008年12月4日 (木) 11:31 (UTC)[返信]

（追記）別のブラウザでも確認しました。Google Chromeは、現状のテンプレートだと、Mozillaと同じように表示が乱れる、つまり文字が画像と重なります。Operaは、IEと少し違ったクセを感じますが、文字が画像と重なるということはありません（左へのはみ出しもありません）。--mizusumashi（月間感謝賞を応援します） 2008年12月4日 (木) 16:35 (UTC)[返信]

まず、上記のボックスについてですが、Windows Vista + IE7でも左へのはみ出しが抑制されているようです。

ちなみに、4.の案なのですが、個人的には「[編集]」リンクのせいでタイトルが少し左に寄ってしまうことが気になります。そこで、「[編集]」リンクに「width:2.5em」を指定して、タイトルの左paddingに2.5emを指定したものをTemplate:ウィキポータルボックスヘッダ/sandboxに作成しました（以下、4'とでもしましょうか）。現状のテンプレートと4、4'の表示の比較は以下をどうぞ。

中央寄せ中央寄せ中央寄せ

内容・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○

[編集]

中央寄せ中央寄せ中央寄せ

内容・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○

[編集]

中央寄せ中央寄せ中央寄せ

内容・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○・○

--新幹線 2008年12月5日 (金) 05:55 (UTC)[返信]

（追記）「[編集]」リンクの折り返しを未然に防ぐため「white-space:nowrap」も追加しました。--新幹線 2008年12月5日 (金) 06:18 (UTC)[返信]

Portal:天文学を作成したものです。Windows XP + Firefox 3.0.4 で問題の発生を確認しました。というより、当初から問題の発生を認識していたのですが、解決方法が分からず今まで放置していました。Firefox 3.0.4の他にIE 6.0.2900.2180、Google Chrome 0.4.154.29でも確認してみましたが、選択肢4'ならばどの環境でも問題なく表示されるようですので、4'への変更に賛成致します。Enirac Sum 2008年12月11日 (木) 18:23 (UTC)[返信]

新幹線さんの案（4'）に規定値を付け加えるなど少し変更して、反映しました。また、その規定値も新幹線さんの例示のものを使いました。皆様、とくに新幹線さん、ありがとうございます。各ポータルへ連絡を入れておきますが、もしポータルに反映された変更をみて異議があるようであれば、また考えることにさせてください。--mizusumashi（月間感謝賞を応援します） 2008年12月12日 (金) 19:25 (UTC)[返信]

Portal:Box-header との違い

Portal:Box-header との機能面の違いを教えてください。--Aotake 2009年5月12日 (火) 17:38 (UTC)[返信]