Template‐ノート:Vertical images list

不具合報告

利用者オプションで外装に標準を選んでいると、変数「寄せ」を省略あるいは右を指定しても右寄せになりません。すべて左寄せになります。それと画像と説明の変数名は「画像1」「説明1」「画像2」「説明2」…としたほうが使い方が分かりやすいと思います（テンプレート名が英語で変数名が日本語なのですね）。--210. 2007年11月29日 (木) 21:07 (UTC)[返信]

不具合修正しました。変数名は言われてみればその通りですね。今なら修正も利きますが、英語変数名に直した方が良いでしょうか？--福太郎 2007年11月30日 (金) 10:22 (UTC)[返信]

修正ありがとうございます。変数名は分かりやすさからいえば日本語でもいいと思います。他言語に輸出されたらそちらのほうでローカライズするでしょうし。--210. 2007年11月30日 (金) 21:05 (UTC)[返信]

変数名、了解いたしました。他に外装の違いで出る不具合、テンプレを並べると縦に並ばない不具合も消化、もついでにキャプションの左右字詰め設定も可能に。よろしければどうぞ。--福太郎 2007年12月1日 (土) 03:40 (UTC)[返信]

変更の詳細

このテンプレートは外観が通常の画像の表示とは著しく異なるため、外観を統一する目的で修正しました。CSSで画像用に定義されているクラスを適用し、あと条件文も短くしようと試みました。再発したのはどのようなバグでしょうか。 --fryed-peach 2007年12月14日 (金) 01:57 (UTC)[返信]

ご報告有り難うございます。とりあえず確認済みなのは「外装＝MySkin」を選んだ時に「floatright」が機能せず画像が左寄せ、テンプレート前後の内容が改行されて表示される事です（OSX Safari）。class="thumbcaption"は選ぶ外装によりpadding値が違う、class="thumbinner"は機能したりしなかったり、margin値が違ったりするようです。利用者:福太郎/Template:Inbox 題字に戻す前のソースを置いておきましたのでご確認下さい。画像が左寄せになってしまう、テンプレートを並べた時に横並びになってしまう事を解消する為に右寄せにする際はclass="infobox"とfloat:rightの両設定をしておりました。

また「<span style="display:block; height:2px; font-size:1px"> </span>」これは画像間にすき間を開ける為の物なのでしょうが、経験上この設定は条件によってはPC環境差が激しいはずです（タグにスタイルシートを埋め込む際はそもそもdeisplayプロパティは使用しない）。「画像2=」以降で「<div class="thumbimage" style="margin: {{#if:{{{説明1|{{{2|}}}}}|0|5px 0 0}};">[[画像:{{{画像2|〜」とした方が外装差による表示の違いも吸収出来るでしょう。ソースがすっきり整理されている事は非常に有り難いのですが、意図と表示とソースのマッチがまずは肝要と考えますのでfryed-peachさまの編集意図を尊重する為にも不具合Fixまで今しばらくお付き合い下さい。まだ他に不具合の可能性もありますが、取り急ぎここまで。--福太郎 2007年12月14日 (金) 11:09 (UTC)[返信]

追記：気が早いとは思いましたが利用者:福太郎/Template:Inbox 題字にて再発した問題点Fix。現時点で確認済みの問題点は「注意事項：左寄せについて」節に説明されている事のみ。「MySkin」は元々独自スタイルシートの仕様を前提としたスキンの様なので、class="thumbcaption"、class="thumbinner"が効かないのは仕様のようです。以上、ご確認頂ければと思います。--福太郎 2007年12月14日 (金) 22:08 (UTC)[返信]

丁寧なご説明をありがとうございます。テストのために利用者:福太郎/Template:Inbox 題字を使わせていただきました。ご容赦ください。

MySkin ですが、[[Image:Aletschgletscher.jpg|right|200px]]のような通常のマークアップでも右寄せにならないので、このテンプレートで特別に考慮する必要はないんじゃないかと思います。そういうスキンなのでしょう。あと、画像間の隙間については、どちらの方法でもかまいません。私は特に意見を持っておりませんので、福太郎さんが決めていただいて結構です。 --fryed-peach 2007年12月15日 (土) 00:36 (UTC)[返信]

ご確認有り難うございます。当方が施した具体的変更点は画像間隔と文字サイズを0.9emに設定しました（やや大きく感じたので）。これで特に問題が無いようであれば、改めてソース差し替えという事でよろしいでしょうか？--福太郎 2007年12月15日 (土) 15:55 (UTC)[返信]

異存ありません。よろしくお願いします。 --fryed-peach 2007年12月15日 (土) 21:45 (UTC)[返信]

度々すいません。ちょっと意図したところとは違う動作があって、変更を加えてみました。問題なかったでしょうか。 --fryed-peach 2007年12月16日 (日) 14:42 (UTC)[返信]

各スキンで確認しましたが問題ありません。意図しなかった動作とは？--福太郎 2007年12月16日 (日) 22:19 (UTC)[返信]

キャプションの中央寄せを可能にしたい

キャプションの中央寄せを選択すれば可能にしたいのですが、どのようにしたらよいでしょうか。現状、FireFoxでは個別に＜center＞, ＜/center＞とすれば、個別の画像ごとに中央に寄りますが、IEでは＜center＞は全て無視されるようで、左に寄っています。"text-align: center;"は、FireFox, IEとも無視されます。悪あがきでサンドボックスまで作ったのですが、初心者では手に負えず、全く無意味でした。理想としては、IE, FireFoxとも、画像ごとに　"text-align: center;"　または＜center＞に反応してくれるようになるといいのですが。

なぜかキャプションの中央寄せを敵視する人がいるのですが、Infoboxのトップ画像ではデフォルトで行われている例も多く、見栄え自体はいいので、このテンプレートでも必要に応じて可能になるといいな、と考えています。どなたか知識のある方、よろしくお願いします。--トトト 2011年4月8日 (金) 03:18 (UTC)[返信]

編集提案：タブレット端末などにおけるモバイル版閲覧時の表示幅問題への対応

キャプションの文字数が多い場合にモバイルビューで閲覧すると、文字が適切な位置で折り返されず本テンプレートの幅が広くなってしまう現象が見られます。スマートフォンなど画面幅が狭い場合はfloatが無効になるので、むしろ好ましい表示といえますが、タブレット端末など画面幅が広い場合はfloatが有効であるため、意図しないレイアウトとなっているといえるでしょう。この現象は.content .thumbcaption {width: auto !important;}が指定されていることによるもののようです。サンドボックスで検証してみたところ、<div class="thumb">にスタイルにwidthプロパティを指定することでこの現象が解消されることを確認しました。

提案以上を踏まえ、2014年の編集にてコメントアウトされた<div class="thumb">要素のstyle属性値内のwidthプロパティを復帰することを提案します。なおプロパティ値は現在の版（のコメントアウトされたもの）では{{#if:{{{枠幅|}}}|{{{枠幅}}}|{{{幅|200px}}}}}となっていますが、子要素のmargin等を考慮してcalc({{#if:{{{枠幅|}}}|{{{枠幅}}}|{{{幅|200px}}}}} + 12px)とするのが適当と考えております。モバイルビューでは子要素が若干狭くなるため右側に少し隙間ができますが、そこまで対応する必要はないかなと思います。以下もご参照ください。

~~現在の版とサンドボックスの比較~~現在の版とサンドボックスの比較（9/26修正版）
テストケース
テストケース（モバイルビュー）

この変更にはfloatが無効化される画面幅においてもキャプション幅が狭いまま&画像とキャプションが左に寄るという問題がありますが、極端に狭い幅が指定されかつ文字数が多いという場合以外はさほど閲覧性を損なわないと判断し、タブレット端末等におけるレイアウトを優先した対応となります。双方に対応できるスタイル指定があればいいのですが、いまのところ本テンプレートの編集のみで可能な方策は思いつかないです（おそらくMediaWiki:Mobile.cssあたりでメディア・クエリなど使って指定すれば対応可能だろう思いますが）。

私の方で表示を確認した閲覧環境は以下のとおりです（いずれも最新版かそれに近いバージョン）。

Windows 10 + Chrome
Windows 10 + IE
Windows 10 + FireFox
Android 10（タブレット端末）& 9（スマートフォン）+ Chrome
Android 10（タブレット端末）& 9（スマートフォン）+ FireFox

本テンプレートは500を超える標準名前空間の記事から呼び出されており影響範囲が大きいと考えられ、上記の問題点もあることから、コメント依頼を提出の上2週間の合意形成期間を設けることといたします。--Jutha DDA（会話） 2021年9月25日 (土) 15:23 (UTC)[返信]

報告画面幅が狭い場合にも対応可能なスタイル指定を思いついた（Template:Double image stackを参考にしました）ので、修正しました。上記提案からの変更点は以下のとおりです。

width:calc({{#if:{{{枠幅|}}}|{{{枠幅}}}|{{{幅|200px}}}}} + 12px);を.thumbから.thumbinnerに移動し、.thumbinnerにmargin: 0 auto;を指定することでfloatが無効化時にボックスが中央寄せとなるようにした。
各.thumbimageにwidth: fit-content; margin:3px auto 0;（1つ目のみmargin:0 auto;）を指定し、floatが無効化時に画像位置も中央になるようにした。なお、max-width: 100%;が元から指定されているため、画像幅が広い場合も問題が発生しないことを確認済みです。

以上です。--Jutha DDA（会話） 2021年9月26日 (日) 12:11 (UTC)[返信]

なお、Help:MediaWikiに適応するブラウザに記載の環境のうちIEはwidth: fit-content;に未対応（Cf. MDN）ですが、画像が左によってしまうだけであり、またモバイル版∧ウィンドウ幅が狭い∧IE∧キャプション幅が画像幅を超えるという稀な状況においてしか発生しないため、対応は必要ないと判断しました。--Jutha DDA（会話） 2021年9月26日 (日) 15:35 (UTC)[返信]

済 2週間異論が見られなかったため上記案にて更新いたしました。--Jutha DDA（会話） 2021年10月10日 (日) 19:57 (UTC)[返信]

すでに別の理由により取り消し済みの箇所ですが、メディアクエリを用いたスタイル指定については、MediaWiki:Mobile.cssなどを変更せずともmw:Help:TemplateStyles/jaで対応可能だということに気がついたので、重ねて訂正しておきます。--Jutha DDA（会話） 2021年12月7日 (火) 12:39 (UTC)[返信]