「テンプレート:右」の版間の差分
提供: Yourpedia
| 1行目: | 1行目: | ||
| − | <noinclude> | + | <includeonly><table align="right" class="floatright" style="clear:both; float:right; text-align:{{ #if: {{{2|}}} | {{{1}}} | center }}"><tr><td>{{ #if: {{{2|}}} | {{{2}}} | {{#if:{{{内容|}}} | {{{内容}}} | {{{1}}} }} }}</td></tr></table></includeonly><noinclude> |
| − | ==用途== | + | == 用途 == |
| − | + | このテンプレートはひとかたまりの文章、画像、表などをページの右側に寄せたいときに使います。ただし、画像や表はこのテンプレートを使用しなくてももっとスマートな方法で同じ効果を得られる場合もあります。 | |
* 画像に使用する場合の注意点。 | * 画像に使用する場合の注意点。 | ||
| − | ** 以前は複数の画像をページの右側に縦1列に並べるにはこのテンプレートを使用するしか方法はありませんでしたが、現在はこのテンプレートを使用しなくても普通に"right"または"thumb"オプションをつけるだけで可能になりました。詳しくは[[ | + | ** 以前は複数の画像をページの右側に縦1列に並べるにはこのテンプレートを使用するしか方法はありませんでしたが、現在はこのテンプレートを使用しなくても普通に"right"または"thumb"オプションをつけるだけで可能になりました。詳しくは[[Wikipedia:画像の表示]]をご覧下さい。 |
| − | ** | + | ** ただしサイズ指定をする場合は上に置く画像の横幅を下に置く画像の横幅よりも狭く指定すると、閲覧環境によっては本文の文字と下側の画像の上部フレームとが重なる不具合が生じます。対策法は以下の4つがあります。どれがよいかは、記事ごとに異なります。不用意にテンプレを外すことだけはないよう注意して下さい。 |
**# このテンプレを使用する。 | **# このテンプレを使用する。 | ||
**# 上下の横幅を同じにする。 | **# 上下の横幅を同じにする。 | ||
| − | **# | + | **# 上下を入れ替える（上が広く、下が狭い場合は、問題ありません）。 |
**# 両者を離す。 | **# 両者を離す。 | ||
| − | ** このテンプレートを使用する際に中に入れる画像に"none"オプションまたは"center" | + | ** このテンプレートを使用する際に中に入れる画像に"none"オプションまたは"center"オプションをつけると、上下の画像の間隔が若干狭まります（表示サンプルの例2を参照。外装がSimpleの場合を除く。なお以前は"none"オプションをつけないとうまく機能しませんでしたが、現在は改善されています）。このため多くの画像を表示する際はスペースの節約になるため、このテンプレートを積極的に使用すべきだという意見もあります。これに対し、スペースの節約をする必要はないという意見もあります。いずれにせよ、1枚や2枚の画像についてこのテンプレートを使用する必要はないという点では異論はでていません。個々の記事においてこのテンプレートを使うか否かは記事ごとに事情が異なりますので、編集者が各自で判断してください。もしも編集者同士で意見が分かれるようであれば、冷静に話し合って解決するようにしてください。 |
| − | * | + | * 現時点でこのテンプレートは、<table>タグを使用しています。つまり、このテンプレートを使用することはいわゆる「テーブルレイアウト」と呼ばれ、賛否両論のある手法をとることになります。それを避けたい場合は、<div>タグを使用している[[Template:Right]]を使用して下さい。 |
| − | * このテンプレートは<pre>タグとの相性が悪く、<pre>タグで表示される枠の上にこのテンプレで指定された要素が重なって表示されます。本文に<pre>タグを使う場合は、<pre>の手前に<br clear="all" /> | + | * このテンプレートは<pre>タグとの相性が悪く、<pre>タグで表示される枠の上にこのテンプレで指定された要素が重なって表示されます。本文に<pre>タグを使う場合は、<pre>の手前に<br clear="all" />を入れるか、このテンプレートを</pre>の後ろに移す必要があります（表示サンプルの例3が参考になります）。 |
==使用法== | ==使用法== | ||
* <code>'''<nowiki>{{</nowiki>右|'''オプション'''|'''右寄せしたい要素'''<nowiki>}}</nowiki>'''</code> | * <code>'''<nowiki>{{</nowiki>右|'''オプション'''|'''右寄せしたい要素'''<nowiki>}}</nowiki>'''</code> | ||
* <code>'''<nowiki>{{</nowiki>右|'''右寄せしたい要素'''<nowiki>}}</nowiki>'''</code> | * <code>'''<nowiki>{{</nowiki>右|'''右寄せしたい要素'''<nowiki>}}</nowiki>'''</code> | ||
| − | ; | + | ; オプション |
| − | {| | + | : ページの右側に配置された文章などの水平方向の位置を指定します。省略した場合は、センタリングになります。画像で使用する際は、このオプションは無関係です。 |
| + | {| class="wikitable" | ||
|指定値||効果 | |指定値||効果 | ||
|- | |- | ||
| 27行目: | 28行目: | ||
|} | |} | ||
| − | ==表示サンプル== | + | == 表示サンプル == |
| − | ===例1=== | + | === 例1 === |
{{右|right|ここに書いた文章がページの<br />右側に配置されます。<br />オプションで"right"を指定している<br />ので文章自体も<br />右寄せになっています。}} | {{右|right|ここに書いた文章がページの<br />右側に配置されます。<br />オプションで"right"を指定している<br />ので文章自体も<br />右寄せになっています。}} | ||
| − | + | テンプレートの下に置いた本文は、左側に配置されます。 | |
右側に表示されているソースの内容は次のようになっています。 | 右側に表示されているソースの内容は次のようになっています。 | ||
<code><nowiki>{{右|right|ここに書いた文章がページの<br />右側に配置されます。<br />オプションで"right"を指定している<br />ので文章自体も<br />右寄せになっています。}}</nowiki></code> | <code><nowiki>{{右|right|ここに書いた文章がページの<br />右側に配置されます。<br />オプションで"right"を指定している<br />ので文章自体も<br />右寄せになっています。}}</nowiki></code> | ||
| + | <br style="clear:both" /> | ||
| − | ===例2=== | + | === 例2 === |
| + | このテンプレートを使わない場合。 | ||
| + | ==== 例2.1 ==== | ||
| + | [[画像:Yokohama_station.jpg|thumb|横浜駅]] | ||
| + | [[画像:みなとみらい21.jpg|thumb|みなとみらい]] | ||
| + | 画像の横幅が同じ場合。 | ||
| + | |||
| + | <code><nowiki>[[画像:Yokohama_station.jpg|thumb|横浜駅]]</nowiki></code><br /> | ||
| + | <code><nowiki>[[画像:みなとみらい21.jpg|thumb|みなとみらい]]</nowiki></code><br /> | ||
| + | <br style="clear:both" /> | ||
| + | |||
| + | ==== 例2.2 ==== | ||
| + | [[画像:Yokohama_station.jpg|thumb|横浜駅]] | ||
| + | [[画像:みなとみらい21.jpg|thumb|100px|みなとみらい]] | ||
| + | 下の画像の横幅が狭い場合。 | ||
| + | |||
| + | <code><nowiki>[[画像:Yokohama_station.jpg|thumb|横浜駅]]</nowiki></code><br /> | ||
| + | <code><nowiki>[[画像:みなとみらい21.jpg|thumb|100px|みなとみらい]]</nowiki></code><br /> | ||
| + | <br style="clear:both" /> | ||
| + | |||
| + | === 例3 === | ||
| + | ==== 例3.1 ==== | ||
{{右| | {{右| | ||
[[画像:Yokohama_station.jpg|thumb|横浜駅]] | [[画像:Yokohama_station.jpg|thumb|横浜駅]] | ||
[[画像:みなとみらい21.jpg|thumb|100px|みなとみらい]] | [[画像:みなとみらい21.jpg|thumb|100px|みなとみらい]] | ||
}} | }} | ||
| − | + | "none"または"center"オプションを使わない場合。 | |
| + | |||
<code><nowiki>{{右|</nowiki></code><br /> | <code><nowiki>{{右|</nowiki></code><br /> | ||
<code><nowiki>[[画像:Yokohama_station.jpg|thumb|横浜駅]]</nowiki></code><br /> | <code><nowiki>[[画像:Yokohama_station.jpg|thumb|横浜駅]]</nowiki></code><br /> | ||
<code><nowiki>[[画像:みなとみらい21.jpg|thumb|100px|みなとみらい]]</nowiki></code><br /> | <code><nowiki>[[画像:みなとみらい21.jpg|thumb|100px|みなとみらい]]</nowiki></code><br /> | ||
<code><nowiki>}}</nowiki></code> | <code><nowiki>}}</nowiki></code> | ||
| + | |||
| + | この指定方法（"none"オプションをつけない場合）は、[[Opera]]など一部のウェブブラウザで正常に表示することができません。 | ||
| + | <br style="clear:both" /> | ||
| + | |||
| + | ==== 例3.2 ==== | ||
{{右| | {{右| | ||
[[画像:Yokohama_station.jpg|thumb|180px|none|横浜駅]] | [[画像:Yokohama_station.jpg|thumb|180px|none|横浜駅]] | ||
[[画像:みなとみらい21.jpg|thumb|100px|none|みなとみらい]] | [[画像:みなとみらい21.jpg|thumb|100px|none|みなとみらい]] | ||
}} | }} | ||
| − | + | "none"オプションを使った場合。 | |
| + | |||
<code><nowiki>{{右|</nowiki></code><br /> | <code><nowiki>{{右|</nowiki></code><br /> | ||
<code><nowiki>[[画像:Yokohama_station.jpg|thumb|180px|none|横浜駅]]</nowiki></code><br /> | <code><nowiki>[[画像:Yokohama_station.jpg|thumb|180px|none|横浜駅]]</nowiki></code><br /> | ||
| 57行目: | 87行目: | ||
上のオプションを使わない場合と比べて、2枚の画像の間隔が狭まってます。上下の画像のサイズが違う場合は、横幅の狭い方の画像の右側が空きます。 | 上のオプションを使わない場合と比べて、2枚の画像の間隔が狭まってます。上下の画像のサイズが違う場合は、横幅の狭い方の画像の右側が空きます。 | ||
| + | <br style="clear:both" /> | ||
| + | |||
| + | ==== 例3.3 ==== | ||
{{右| | {{右| | ||
[[画像:Yokohama_station.jpg|thumb|center|横浜駅]] | [[画像:Yokohama_station.jpg|thumb|center|横浜駅]] | ||
[[画像:みなとみらい21.jpg|thumb|100px|center|みなとみらい]] | [[画像:みなとみらい21.jpg|thumb|100px|center|みなとみらい]] | ||
}} | }} | ||
| − | + | "center"オプションを使った場合。 | |
| + | |||
<code><nowiki>{{右|</nowiki></code><br /> | <code><nowiki>{{右|</nowiki></code><br /> | ||
<code><nowiki>[[画像:Yokohama_station.jpg|thumb|center|横浜駅]]</nowiki></code><br /> | <code><nowiki>[[画像:Yokohama_station.jpg|thumb|center|横浜駅]]</nowiki></code><br /> | ||
<code><nowiki>[[画像:みなとみらい21.jpg|thumb|100px|center|みなとみらい]]</nowiki></code><br /> | <code><nowiki>[[画像:みなとみらい21.jpg|thumb|100px|center|みなとみらい]]</nowiki></code><br /> | ||
<code><nowiki>}}</nowiki></code> | <code><nowiki>}}</nowiki></code> | ||
| + | <br style="clear:both" /> | ||
| − | === | + | === 例4 === |
{{右|left| | {{右|left| | ||
<gallery> | <gallery> | ||
| 96行目: | 131行目: | ||
</pre> | </pre> | ||
| − | == | + | == 関連項目 == |
| − | + | *[[Template:左]] | |
| − | + | *[[Template:Vertical images list]] | |
| − | + | ||
| − | + | [[Category:レイアウト用テンプレート|みき]]</noinclude> | |
| − | [[Category:レイアウト用テンプレート]]</noinclude> | + | |
2008年9月8日 (月) 20:52時点における版
目次
用途
このテンプレートはひとかたまりの文章、画像、表などをページの右側に寄せたいときに使います。ただし、画像や表はこのテンプレートを使用しなくてももっとスマートな方法で同じ効果を得られる場合もあります。
- 画像に使用する場合の注意点。
- 以前は複数の画像をページの右側に縦1列に並べるにはこのテンプレートを使用するしか方法はありませんでしたが、現在はこのテンプレートを使用しなくても普通に"right"または"thumb"オプションをつけるだけで可能になりました。詳しくはWikipedia:画像の表示をご覧下さい。
- ただしサイズ指定をする場合は上に置く画像の横幅を下に置く画像の横幅よりも狭く指定すると、閲覧環境によっては本文の文字と下側の画像の上部フレームとが重なる不具合が生じます。対策法は以下の4つがあります。どれがよいかは、記事ごとに異なります。不用意にテンプレを外すことだけはないよう注意して下さい。
- このテンプレを使用する。
- 上下の横幅を同じにする。
- 上下を入れ替える（上が広く、下が狭い場合は、問題ありません）。
- 両者を離す。
- このテンプレートを使用する際に中に入れる画像に"none"オプションまたは"center"オプションをつけると、上下の画像の間隔が若干狭まります（表示サンプルの例2を参照。外装がSimpleの場合を除く。なお以前は"none"オプションをつけないとうまく機能しませんでしたが、現在は改善されています）。このため多くの画像を表示する際はスペースの節約になるため、このテンプレートを積極的に使用すべきだという意見もあります。これに対し、スペースの節約をする必要はないという意見もあります。いずれにせよ、1枚や2枚の画像についてこのテンプレートを使用する必要はないという点では異論はでていません。個々の記事においてこのテンプレートを使うか否かは記事ごとに事情が異なりますので、編集者が各自で判断してください。もしも編集者同士で意見が分かれるようであれば、冷静に話し合って解決するようにしてください。
- 現時点でこのテンプレートは、<table>タグを使用しています。つまり、このテンプレートを使用することはいわゆる「テーブルレイアウト」と呼ばれ、賛否両論のある手法をとることになります。それを避けたい場合は、<div>タグを使用しているTemplate:Rightを使用して下さい。
- このテンプレートは<pre>タグとの相性が悪く、<pre>タグで表示される枠の上にこのテンプレで指定された要素が重なって表示されます。本文に<pre>タグを使う場合は、<pre>の手前に<br clear="all" />を入れるか、このテンプレートを</pre>の後ろに移す必要があります（表示サンプルの例3が参考になります）。
使用法
-
{{右|オプション|右寄せしたい要素}} -
{{右|右寄せしたい要素}}
- オプション
- ページの右側に配置された文章などの水平方向の位置を指定します。省略した場合は、センタリングになります。画像で使用する際は、このオプションは無関係です。
| 指定値 | 効果 |
| right | 右寄せ |
| left | 左寄せ |
| center | センタリング |
表示サンプル
例1
| ここに書いた文章がページの 右側に配置されます。 オプションで"right"を指定している ので文章自体も 右寄せになっています。 |
テンプレートの下に置いた本文は、左側に配置されます。
右側に表示されているソースの内容は次のようになっています。
{{右|right|ここに書いた文章がページの<br />右側に配置されます。<br />オプションで"right"を指定している<br />ので文章自体も<br />右寄せになっています。}}
例2
このテンプレートを使わない場合。
例2.1
ファイル:みなとみらい21.jpg
みなとみらい
画像の横幅が同じ場合。
[[画像:Yokohama_station.jpg|thumb|横浜駅]]
[[画像:みなとみらい21.jpg|thumb|みなとみらい]]
例2.2
ファイル:みなとみらい21.jpg
みなとみらい
下の画像の横幅が狭い場合。
[[画像:Yokohama_station.jpg|thumb|横浜駅]]
[[画像:みなとみらい21.jpg|thumb|100px|みなとみらい]]
例3
例3.1
|
ファイル:みなとみらい21.jpg みなとみらい |
"none"または"center"オプションを使わない場合。
{{右|
[[画像:Yokohama_station.jpg|thumb|横浜駅]]
[[画像:みなとみらい21.jpg|thumb|100px|みなとみらい]]
}}
この指定方法（"none"オプションをつけない場合）は、Operaなど一部のウェブブラウザで正常に表示することができません。
例3.2
|
ファイル:みなとみらい21.jpg みなとみらい |
"none"オプションを使った場合。
{{右|
[[画像:Yokohama_station.jpg|thumb|180px|none|横浜駅]]
[[画像:みなとみらい21.jpg|thumb|100px|none|みなとみらい]]
}}
上のオプションを使わない場合と比べて、2枚の画像の間隔が狭まってます。上下の画像のサイズが違う場合は、横幅の狭い方の画像の右側が空きます。
例3.3
|
ファイル:みなとみらい21.jpg みなとみらい |
"center"オプションを使った場合。
{{右|
[[画像:Yokohama_station.jpg|thumb|center|横浜駅]]
[[画像:みなとみらい21.jpg|thumb|100px|center|みなとみらい]]
}}
例4
|
このテンプレートと<gallery>を使って、画像をページ右側に縦2列で並べることができます。ただし、<gallery>自体がHTMLの<table>タグを使った画像配置法です。つまり、このテンプレートと組み合わせることで二重テーブルの状態になっています。したがって、Template:Rightとの組み合わせをおすすめします。
{{右|left|
<gallery>
画像:Nara Pref Route Sign 0001.svg|奈良県道1号奈良生駒線。奈良西部の高速道路的存在。
画像:Nara Pref Route Sign 0044.svg|奈良県道44号奈良加茂線。大仏鉄道の路線を踏襲。
</gallery>
<gallery>
画像:Nara Pref Route Sign 0007.svg|奈良県道7号枚方大和郡山線。大阪口と傍示越は非常に狭隘。
画像:Nara Pref Route Sign 0052.svg|奈良県道52号奈良精華線。終点は関西文化学術研究都市。
</gallery>
}}
本文をここに書きます。
<br clear="all" />
ここからの要素は回り込みされません。
