テンプレート:右/doc

提供: Yourpedia
2018年8月16日 (木) 12:18時点における由亜辺出夫 (トーク | 投稿記録)による版 (テンプレート:右より一部修正して転記)

(差分) ←前の版 | 最新版 (差分) | 次の版→ (差分)
移動: 案内検索
Tech Doc このページは、テンプレートの解説ページです。このページを直接参照すると、リンク先のページ名やURLを変数で指定しているリンク赤リンクになる場合がありますが、リンク先を指定し直さなくてよい場合もあります。リンクの設定の不具合に関する質問等は親ページの会話ページに投稿して下さい。

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

使用法[編集]

引数(名省略時) 引数(名指定時) 意味 既定値 入力の要否
1,2 内容 テーブルの内容(文章、画像、表など) なし 必須
なし text-align テーブルの内容の水平方向の位置指定 center 省略可
  • {{右|右寄せしたい要素|align=オプション}}
  • オプション
ページの右側に配置された文章などの水平方向の位置を指定します。省略した場合は、センタリングになります。画像で使用する際は、このオプションは無関係です。
指定値 効果
right 右寄せ
left 左寄せ
center センタリング

表示サンプル[編集]

例1[編集]

  • 入力例:{{右|いろはにほへとちりぬるをわかよたれそつねならむ|text-align=right}}


  • 出力例:
いろはにほへとちりぬるをわかよたれそつねならむ

画像に使用する場合の注意点[編集]

  • 複数の画像をページの右側に縦1列に並べたい場合、このテンプレートを使用しなくても、画像(ファイル)のオプションとしてrightまたはthumbを指定する方法があります。詳しくはYourpedia:画像利用の方針をご覧下さい。
  • 画像を両側に回り込ませたい場合、rightleftオプションだけでは両列の上端を揃えることができません。このテンプレートと{{}}を使って回りこませてください。
  • ただしサイズ指定をする場合は上に置く画像の横幅を下に置く画像の横幅よりも狭く指定すると、閲覧環境によっては本文の文字と下側の画像の上部フレームとが重なる不具合が生じます。対策法は以下の4つがあります。どれがよいかは、記事ごとに異なります。不用意にテンプレを外すことだけはないよう注意して下さい。
    1. このテンプレを使用する。
    2. 上下の横幅を同じにする。
    3. 上下を入れ替える(上が広く、下が狭い場合は、問題ありません)。
    4. 両者を離す。
  • このテンプレートを使用する際に中に入れる画像に"none"オプションまたは"center"オプションをつけると、上下の画像の間隔が若干狭まります。

現時点でこのテンプレートは、<table>タグを使用しています。つまり、このテンプレートを使用することはいわゆる「テーブルレイアウト」と呼ばれ、賛否両論のある手法をとることになります。それを避けたい場合は、<div>タグを使用している{{Right}}を使用して下さい。

このテンプレートは<pre>タグとの相性が悪く、<pre>タグで表示される枠の上にこのテンプレで指定された要素が重なって表示されます。本文に<pre>タグを使う場合は、<pre>の手前に<br clear="all" />を入れるか、このテンプレートを</pre>の後ろに移す必要があります(表示サンプルの例3が参考になります)。

例2[編集]

このテンプレートを使わない場合。

例2.1[編集]

画像の横幅が同じ場合。

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

例2.2[編集]

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

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

例3[編集]

例3.1[編集]

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

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

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

例3.2[編集]

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

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

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

例3.3[編集]

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

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

例4[編集]

このテンプレートと<gallery>を使って、画像をページ右側に縦2列で並べることができます。ただし、<gallery>自体がHTMLの<table>タグを使った画像配置法で、二重テーブルの状態になっています。二重テーブルになることを避けたい場合は、{{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" />
ここからの要素は回り込みされません。

関連項目[編集]