「テンプレート:右」の版間の差分

提供: Yourpedia
移動: 案内、 検索
1行目: 1行目:
−
<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>
+
<includeonly><table style="float:right; 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"オプションをつけるだけで可能になりました。詳しくは[[Wikipedia:画像の表示]]をご覧下さい。
+
** 以前は複数の画像をページの右側に縦1列に並べるにはこのテンプレートを使用するしか方法はありませんでしたが、現在はこのテンプレートを使用しなくても普通に"right"または"thumb"オプションをつけるだけで可能になりました。詳しくは[[Yourpedia:画像の表示]]をご覧下さい。
 +
** 画像を両側に回り込ませる場合、"right"や"left"オプションだけでは両列の上端を揃えることができません。このテンプレートと{{tl|左}}を使って回りこませてください。
 
** ただしサイズ指定をする場合は上に置く画像の横幅を下に置く画像の横幅よりも狭く指定すると、閲覧環境によっては本文の文字と下側の画像の上部フレームとが重なる不具合が生じます。対策法は以下の4つがあります。どれがよいかは、記事ごとに異なります。不用意にテンプレを外すことだけはないよう注意して下さい。
 
** ただしサイズ指定をする場合は上に置く画像の横幅を下に置く画像の横幅よりも狭く指定すると、閲覧環境によっては本文の文字と下側の画像の上部フレームとが重なる不具合が生じます。対策法は以下の4つがあります。どれがよいかは、記事ごとに異なります。不用意にテンプレを外すことだけはないよう注意して下さい。
 
**# このテンプレを使用する。
 
**# このテンプレを使用する。
13行目: 14行目:
 
* このテンプレートは&lt;pre&gt;タグとの相性が悪く、&lt;pre&gt;タグで表示される枠の上にこのテンプレで指定された要素が重なって表示されます。本文に&lt;pre&gt;タグを使う場合は、&lt;pre&gt;の手前に&lt;br clear="all" /&gt;を入れるか、このテンプレートを&lt;/pre&gt;の後ろに移す必要があります（表示サンプルの例3が参考になります）。
 
* このテンプレートは&lt;pre&gt;タグとの相性が悪く、&lt;pre&gt;タグで表示される枠の上にこのテンプレで指定された要素が重なって表示されます。本文に&lt;pre&gt;タグを使う場合は、&lt;pre&gt;の手前に&lt;br clear="all" /&gt;を入れるか、このテンプレートを&lt;/pre&gt;の後ろに移す必要があります（表示サンプルの例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>
 
; オプション
 
; オプション
 
: ページの右側に配置された文章などの水平方向の位置を指定します。省略した場合は、センタリングになります。画像で使用する際は、このオプションは無関係です。
 
: ページの右側に配置された文章などの水平方向の位置を指定します。省略した場合は、センタリングになります。画像で使用する際は、このオプションは無関係です。
−
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9"
+
{| class="wikitable"
−
|-style="background:#f2f2f2"
+
 
|指定値||効果
 
|指定値||効果
 
|-
 
|-
42行目: 42行目:
 
このテンプレートを使わない場合。
 
このテンプレートを使わない場合。
 
==== 例2.1 ====
 
==== 例2.1 ====
−
[[画像:Yokohama_station.jpg|thumb|横浜駅]]
+
[[ファイル:Yokohama station.jpg|thumb|横浜駅]]
−
[[画像:みなとみらい21.jpg|thumb|みなとみらい]]
+
[[ファイル:Yokohama MinatoMirai21.jpg|thumb|みなとみらい]]
 
画像の横幅が同じ場合。
 
画像の横幅が同じ場合。
  
−
<code><nowiki>[[画像:Yokohama_station.jpg|thumb|横浜駅]]</nowiki></code><br />
+
<code><nowiki>[[ファイル:Yokohama station.jpg|thumb|横浜駅]]</nowiki></code><br />
−
<code><nowiki>[[画像:みなとみらい21.jpg|thumb|みなとみらい]]</nowiki></code><br />
+
<code><nowiki>[[ファイル:Yokohama MinatoMirai21.jpg|thumb|みなとみらい]]</nowiki></code><br />
 
<br style="clear:both" />
 
<br style="clear:both" />
  
 
==== 例2.2 ====
 
==== 例2.2 ====
−
[[画像:Yokohama_station.jpg|thumb|横浜駅]]
+
[[ファイル:Yokohama station.jpg|thumb|横浜駅]]
−
[[画像:みなとみらい21.jpg|thumb|100px|みなとみらい]]
+
[[ファイル:Yokohama MinatoMirai21.jpg|thumb|100px|みなとみらい]]
 
下の画像の横幅が狭い場合。
 
下の画像の横幅が狭い場合。
  
−
<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>[[ファイル:Yokohama MinatoMirai21.jpg|thumb|100px|みなとみらい]]</nowiki></code><br />
 
<br style="clear:both" />
 
<br style="clear:both" />
  
62行目: 62行目:
 
==== 例3.1 ====
 
==== 例3.1 ====
 
{{右|
 
{{右|
−
[[画像:Yokohama_station.jpg|thumb|横浜駅]]
+
[[ファイル:Yokohama station.jpg|thumb|横浜駅]]
−
[[画像:みなとみらい21.jpg|thumb|100px|みなとみらい]]
+
[[ファイル:Yokohama MinatoMirai21.jpg|thumb|100px|みなとみらい]]
 
}}
 
}}
 
"none"または"center"オプションを使わない場合。
 
"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>[[ファイル:Yokohama MinatoMirai21.jpg|thumb|100px|みなとみらい]]</nowiki></code><br />
 
<code><nowiki>}}</nowiki></code>
 
<code><nowiki>}}</nowiki></code>
  
77行目: 77行目:
 
==== 例3.2 ====
 
==== 例3.2 ====
 
{{右|
 
{{右|
−
[[画像:Yokohama_station.jpg|thumb|180px|none|横浜駅]]
+
[[ファイル:Yokohama station.jpg|thumb|180px|none|横浜駅]]
−
[[画像:みなとみらい21.jpg|thumb|100px|none|みなとみらい]]
+
[[ファイル:Yokohama MinatoMirai21.jpg|thumb|100px|none|みなとみらい]]
 
}}
 
}}
 
"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 />
−
<code><nowiki>[[画像:みなとみらい21.jpg|thumb|100px|none|みなとみらい]]</nowiki></code><br />
+
<code><nowiki>[[ファイル:Yokohama MinatoMirai21.jpg|thumb|100px|none|みなとみらい]]</nowiki></code><br />
 
<code><nowiki>}}</nowiki></code>
 
<code><nowiki>}}</nowiki></code>
  
90行目: 90行目:
 
<br style="clear:both" />
 
<br style="clear:both" />
  
−
==== 例3.3 ====
+
==== 例3.3 ====
 
{{右|
 
{{右|
−
[[画像:Yokohama_station.jpg|thumb|center|横浜駅]]
+
[[ファイル:Yokohama station.jpg|thumb|center|横浜駅]]
−
[[画像:みなとみらい21.jpg|thumb|100px|center|みなとみらい]]
+
[[ファイル:Yokohama MinatoMirai21.jpg|thumb|100px|center|みなとみらい]]
 
}}
 
}}
 
"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>[[ファイル:Yokohama MinatoMirai21.jpg|thumb|100px|center|みなとみらい]]</nowiki></code><br />
 
<code><nowiki>}}</nowiki></code>
 
<code><nowiki>}}</nowiki></code>
 
<br style="clear:both" />
 
<br style="clear:both" />
106行目: 106行目:
 
{{右|left|
 
{{右|left|
 
<gallery>
 
<gallery>
−
画像:Nara Pref Route Sign 0001.svg|奈良県道1号奈良生駒線。奈良西部の高速道路的存在。
+
ファイル:Nara Pref Route Sign 0001.svg|奈良県道1号奈良生駒線。奈良西部の高速道路的存在。
−
画像:Nara Pref Route Sign 0044.svg|奈良県道44号奈良加茂線。大仏鉄道の路線を踏襲。
+
ファイル:Nara Pref Route Sign 0044.svg|奈良県道44号奈良加茂線。大仏鉄道の路線を踏襲。
 
</gallery>
 
</gallery>
 
<gallery>
 
<gallery>
−
画像:Nara Pref Route Sign 0007.svg|奈良県道7号枚方大和郡山線。大阪口と傍示越は非常に狭隘。
+
ファイル:Nara Pref Route Sign 0007.svg|奈良県道7号枚方大和郡山線。大阪口と傍示越は非常に狭隘。
−
画像:Nara Pref Route Sign 0052.svg|奈良県道52号奈良精華線。終点は関西文化学術研究都市。
+
ファイル:Nara Pref Route Sign 0052.svg|奈良県道52号奈良精華線。終点は関西文化学術研究都市。
 
</gallery>
 
</gallery>
 
}}
 
}}
119行目: 119行目:
 
{{右|left|
 
{{右|left|
 
<gallery>
 
<gallery>
−
画像:Nara Pref Route Sign 0001.svg|奈良県道1号奈良生駒線。奈良西部の高速道路的存在。
+
ファイル:Nara Pref Route Sign 0001.svg|奈良県道1号奈良生駒線。奈良西部の高速道路的存在。
−
画像:Nara Pref Route Sign 0044.svg|奈良県道44号奈良加茂線。大仏鉄道の路線を踏襲。
+
ファイル:Nara Pref Route Sign 0044.svg|奈良県道44号奈良加茂線。大仏鉄道の路線を踏襲。
 
</gallery>
 
</gallery>
 
<gallery>
 
<gallery>
−
画像:Nara Pref Route Sign 0007.svg|奈良県道7号枚方大和郡山線。大阪口と傍示越は非常に狭隘。
+
ファイル:Nara Pref Route Sign 0007.svg|奈良県道7号枚方大和郡山線。大阪口と傍示越は非常に狭隘。
−
画像:Nara Pref Route Sign 0052.svg|奈良県道52号奈良精華線。終点は関西文化学術研究都市。
+
ファイル:Nara Pref Route Sign 0052.svg|奈良県道52号奈良精華線。終点は関西文化学術研究都市。
 
</gallery>
 
</gallery>
 
}}
 
}}
133行目: 133行目:
  
 
== 関連項目 ==
 
== 関連項目 ==
−
*[[Template:左]]
+
*{{Tl|左}}
−
*[[Template:Vertical images list]]
+
*{{Tl|Multiple image}}
  
 
[[Category:レイアウト用テンプレート|みき]]</noinclude>
 
[[Category:レイアウト用テンプレート|みき]]</noinclude>

2014年4月27日 (日) 11:20時点における版

用途

このテンプレートはひとかたまりの文章、画像、表などをページの右側に寄せたいときに使います。ただし、画像や表はこのテンプレートを使用しなくてももっとスマートな方法で同じ効果を得られる場合もあります。

  • 画像に使用する場合の注意点。
    • 以前は複数の画像をページの右側に縦1列に並べるにはこのテンプレートを使用するしか方法はありませんでしたが、現在はこのテンプレートを使用しなくても普通に"right"または"thumb"オプションをつけるだけで可能になりました。詳しくはYourpedia:画像の表示をご覧下さい。
    • 画像を両側に回り込ませる場合、"right"や"left"オプションだけでは両列の上端を揃えることができません。このテンプレートと{{左}}を使って回りこませてください。
    • ただしサイズ指定をする場合は上に置く画像の横幅を下に置く画像の横幅よりも狭く指定すると、閲覧環境によっては本文の文字と下側の画像の上部フレームとが重なる不具合が生じます。対策法は以下の4つがあります。どれがよいかは、記事ごとに異なります。不用意にテンプレを外すことだけはないよう注意して下さい。
      1. このテンプレを使用する。
      2. 上下の横幅を同じにする。
      3. 上下を入れ替える（上が広く、下が狭い場合は、問題ありません）。
      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

ファイル:Yokohama station.jpg
横浜駅
ファイル:Yokohama MinatoMirai21.jpg
みなとみらい

画像の横幅が同じ場合。

[[ファイル:Yokohama station.jpg|thumb|横浜駅]]
[[ファイル:Yokohama MinatoMirai21.jpg|thumb|みなとみらい]]

例2.2

ファイル:Yokohama station.jpg
横浜駅
ファイル:Yokohama MinatoMirai21.jpg
みなとみらい

下の画像の横幅が狭い場合。

[[ファイル:Yokohama station.jpg|thumb|横浜駅]]
[[ファイル:Yokohama MinatoMirai21.jpg|thumb|100px|みなとみらい]]

例3

例3.1

ファイル:Yokohama station.jpg
横浜駅
ファイル:Yokohama MinatoMirai21.jpg
みなとみらい

"none"または"center"オプションを使わない場合。

{{右|
[[ファイル:Yokohama station.jpg|thumb|横浜駅]]
[[ファイル:Yokohama MinatoMirai21.jpg|thumb|100px|みなとみらい]]
}}

この指定方法（"none"オプションをつけない場合）は、Operaなど一部のウェブブラウザで正常に表示することができません。

例3.2

ファイル:Yokohama station.jpg
横浜駅
ファイル:Yokohama MinatoMirai21.jpg
みなとみらい

"none"オプションを使った場合。

{{右|
[[ファイル:Yokohama station.jpg|thumb|180px|none|横浜駅]]
[[ファイル:Yokohama MinatoMirai21.jpg|thumb|100px|none|みなとみらい]]
}}

上のオプションを使わない場合と比べて、2枚の画像の間隔が狭まってます。上下の画像のサイズが違う場合は、横幅の狭い方の画像の右側が空きます。

例3.3

ファイル:Yokohama station.jpg
横浜駅
ファイル:Yokohama MinatoMirai21.jpg
みなとみらい

"center"オプションを使った場合。

{{右|
[[ファイル:Yokohama station.jpg|thumb|center|横浜駅]]
[[ファイル:Yokohama MinatoMirai21.jpg|thumb|100px|center|みなとみらい]]
}}

例4

  • 奈良県道1号奈良生駒線。奈良西部の高速道路的存在。

  • Nara Pref Route Sign 0044.svg

    奈良県道44号奈良加茂線。大仏鉄道の路線を踏襲。

  • Nara Pref Route Sign 0007.svg

    奈良県道7号枚方大和郡山線。大阪口と傍示越は非常に狭隘。

  • Nara Pref Route Sign 0052.svg

    奈良県道52号奈良精華線。終点は関西文化学術研究都市。

このテンプレートと<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" />
ここからの要素は回り込みされません。

関連項目

「http://ja.yourpedia.org/mediawiki/index.php?title=テンプレート:右&oldid=225954」から取得