テンプレートとは
テンプレートとは、いろいろなページで共通に使う「定型文」のことです。
たくさんのページを作成していると、「これっていつも作っているなぁ」「また繰り返しだ」と思うことがあるでしょう。
そのようなときにあらかじめ「定型文」を作っておいて、それを再利用する、というのがテンプレートの考え方です。
利用のパターンには以下の2つがあります。
1. テンプレートをあちこちのページに置いて、それらの修正は一括で行う。
あちこちのページに置かれた定型文の修正が一度で行えるので効率が良い。
→ #テンプレートの利用 その1で説明しています。
2. テンプレートを「定型文例」として貼り付け、それを修正して使う。
似たような文章を作成するときに、定型文を貼り付けてそれを修正すれば早く完成する。
→ #テンプレートの利用 その2で説明しています。
テンプレートの作成
- どちらの利用パターンを使うにしても、まずは元となる「定型文」を作成して、保存しておく必要があります。
- 「作成」は以下の手順となります。
- 1. テンプレートを作成する
- 右上の検索窓に「Template:サンプル名」と入力する。
- これで、「サンプル名」という名前のテンプレート作成画面となります。
- 実際には、定型文の「中身がよく分かる名称」を付けましょう。
- 編集終了後、下にある「変更を保存」ボタンクリック
- 2. テンプレートを編集する
- 一度保存した「テンプレート」を修正する場合は、右上の検索窓に作成済みの「Template:作成したテンプレートの名前」と入力する。
- 作成済みの「テンプレート」ページが表示される。
- 編集タブをクリックして、編集を行う。
- 終了後、下にある「変更を保存」ボタンクリックで、編集内容が保存される。
- 3. テンプレートを使用しているページから編集する方法
- テンプレートを使用しているページを編集モードにして、ページの一番下にある「このページで使われているテンプレート:」をクリック
- ページで使用しているテンプレート一覧が下に表示される[1]。
- 編集したいテンプレート名をクリック
- テンプレートページが表示される。
- 「ソースを編集」タブをクリックして、編集を行う。
- 終了後、下にある「変更を保存」ボタンクリックで、編集内容が保存される。:
テンプレートの利用 その1
- 以下の説明は、テンプレートをあちこちのページに置いて、それらの修正は一括で行うという使い方です。
- 1. テンプレート呼び出し
- 編集しているページで
<div style="max-width=520px; margin="0 0 0 26px;""
{{テンプレート名}}
- と記入する。
- その後、「変更を保存」をクリックすると、テンプレートの内容が呼び出されて表示される。
- 2. テンプレート内容の変更とその影響
- テンプレートの内容変更は、「 2. テンプレートを編集する」で行います。
- テンプレートを編集すると、その結果は、同じテンプレートを使用している複数のページに及びます。
- 多数のページに使用しているテンプレートの編集は慎重に行いましょう。
テンプレートの利用 その2
- 以下の説明は、テンプレートを「定型文例」として貼り付けて、それを修正して使う場合の方法です。
- 1. テンプレート内容の貼り付け
- テンプレートを使いたいページに、 {{subst:テンプレート名}} と記載。
- 一番下の「変更を保存」をクリック。
- 保存することで、「テンプレート名」という名前のテンプレートの「内容」がページに展開される。
- 「編集モード」にして、中身を修正。
- この場合は、元のテンプレートを修正・変更しても、その内容は、こちらのページには反映されません。
- 2. テンプレートを修正して、新たなテンプレートを作成
- 「1. テンプレート内容の貼り付け」と同じ方法で、新たなテンプレートを作れる。
- 「テンプレートの作成」の「1. テンプレートを作成する」で新たなテンプレートを作成
- 編集画面で、 {{subst:テンプレート名}} と記載。
- 一番下の「変更を保存」をクリック。
- 保存後、「編集モード」にして、貼り付けられたテンプレートの「内容」を修正して、新たなテンプレートとして保存。
テンプレートの展開テスト
- {{subst:年度別一覧}} で、貼り付けとその後の編集を試してみた。
- うまくできました。
トランスクルージョンについて
- テンプレート作成の際の記述方法と似ているのですが、「あるページ」をそのまま持ってきて表示させる「トランスクルージョン」という機能があります。
- 試しに「色見本」というページをそのまま表示してみます。
- 以下のように記述すればOK
- 以下に「色見本」のページがそのまま表示されます。
- ごちゃごちゃするので、最初は折り畳んでいます。
| 「色見本」のページ (最初は折り畳んでいます)
|
テキストに色を付ける
- テキストや背景 (バックグラウンド)に色を付ける際の参考です。
- 「色の名前」で指定
- 文字の色を指定するには、spanタグのstyle属性に「色名」を記載します。
- 例えば、
- <span style="color:red;">赤字</span>
- とすると赤字になります。
- 「red」のような「色名」には以下のものがあります。
- 記述例
- <span style="color:black;">黒</span>
- <span style="color:gray;">灰色</span>
- <span style="color:silver;">銀色</span>
- <span style="background:black; color:white;">白</span>
- <span style="color:blue;">青</span>
- <span style="color:navy;">濃紺</span>
- <span style="color:teal;">青緑</span>
- <span style="color:green;">緑</span>
- <span style="color:lime;">黄緑</span>
- <span style="color:aqua;">水色</span>
- <span style="background:navy; color:yellow;">黄色</span>
- <span style="color:fuchsia;">マゼンタ</span>
- <span style="color:olive;">オリーブ</span>
- <span style="color:purple;">紫</span>
- <span style="color:maroon;">茶色</span>
- 脚注：「teal[2]」「fuchsia[3]」
- 表示
黒
灰色
銀色
白
青
濃紺
青緑
緑
黄緑
水色
黄色
マゼンタ
オリーブ
紫
茶色
- 「白」と「黄色」の文字には、それぞれ「黒："background:black;"」、「濃紺："background:navy;"」の背景色を付けています。
その他の色の名前
- 色の名前にはまだまだあります。例えば、
- <span style="background:lemonchiffon;">浅黄色 </span>
浅黄色
- なんて色も出せます。「色名」には、全部で140色あるそうです。
- 詳しくはこちらを → 「カラーサンプル」
「色名」に無い色は「16進カラーコード」で指定
- また色を「名前」で指定する代わりに「#F5F5F5」のような16進カラーコードで指定することもできます。
- これを使えば「色名」に無い色「1677万色」が使えます。
- しかし、MediaWikiでは派手な色使いは推奨されませんので、控えめに、そしてスマートに作りましょう！
- 記入例
- <span style="color:#8D6449">枯茶色</span>
- <span style="color:#FFD900">蒲公英(たんぽぽ)色</span>
- <span style="color:#7058A3">菫(すみれ)色</span>
- 背景色を羊羹(ようかん)色に設定
- <span style="background:#383C3C;color:#DBD0E6">白藤色 </span>
- 表示
- 枯茶色
- 蒲公英(たんぽぽ)色
- 菫(すみれ)色
- 背景色を羊羹(ようかん)色に設定
- 白藤色
カラーサンプル
- MediaWikiでは派手な色使いは推奨されませんとは言うものの、個性的な色使いをしたい方もいらっしゃるでしょう。
- そのような方のために以下に「色名(Color Name)」と「16進カラーコード」の一覧表です。
- 一覧表を表示するには、下のボタンをクリック
一覧表の表示/非表示
色名(Color Name)と16進カラーコードに対応する色(背景色)
black
#000000 |
aliceblue
#F0F8FF |
darkcyan
#008B8B |
lightyellow
#FFFFE0 |
coral
#FF7F50
|
dimgray
#696969 |
lavender
#E6E6FA |
teal
#008080 |
lightgoldenrodyellow
#FAFAD2 |
tomato
#FF6347
|
grey
#808080 |
lightsteelblue
#B0C4DE |
darkslategray
#2F4F4F |
lemonchiffon
#FFFACD |
orangered
#FF4500
|
darkgray
#A9A9A9 |
lightslategray
#778899 |
darkgreen
#006400 |
wheat
#F5DEB3 |
red
#FF0000
|
silver
#C0C0C0 |
slategray
#708090 |
green
#008000 |
burlywood
#DEB887 |
crimson[4]
#DC143C
|
lightgray
#D3D3D3 |
steelblue
#4682B4 |
forestgreen
#228B22 |
tan
#D2B48C |
mediumvioletred
#C71585
|
gainsboro[5]
#DCDCDC |
royalblue
#4169E1 |
seagreen
#2E8B57 |
khaki[6]
#F0E68C |
deeppink
#FF1493
|
whitesmoke
#F5F5F5 |
midnightblue
#191970 |
mediumseagreen
#3CB371 |
yellow
#FFFF00 |
hotpink
#FF69B4
|
white
#FFFFFF |
navy
#000080 |
mediumaquamarine
#66CDAA |
gold
#FFD700 |
palevioletred
#DB7093
|
snow
#FFFAFA |
darkblue
#00008B |
darkseagreen
#8FBC8F |
orange
#FFA500 |
pink
#000000
|
ghostwhite
#F8F8FF |
mediumblue
#0000CD |
aquamarine
#7FFFD4 |
sandybrown
#F4A460 |
lightpink
#FFB6C1
|
floralwhite
#FFFAF0 |
blue
#0000FF |
palegreen
#98FB98 |
darkorange
#FF8C00 |
thistle[7]
#D8BFD8
|
linen
#FAF0E6 |
dodgerblue
#1E90FF |
lightgreen
#90EE90 |
goldenrod
#DAA520 |
magenta
#0000FF
|
antiquewhite
#FAEBD7 |
cornflowerblue
#6495ED |
springgreen
#00FF7F |
peru[8]
#CD853F |
fuchsia
#FF00FF
|
papayawhip
#FFEFD5 |
deepskyblue
#00BFFF |
mediumspringgreen
#00FA9A |
darkgoldenrod
#B8860B |
violet
#EE82EE
|
blanchedalmond
#FFEBCD |
lightskyblue
#87CEFA |
lawngreen
#7CFC00 |
chocolate
#D2691E |
plum
#DDA0DD
|
bisque[9]
#FFE4C4 |
skyblue
#87CEEB |
chartreuse
#7FFF00 |
sienna
#A0522D |
orchid
#DA70D6
|
moccasin[10]
#FFE4B5 |
lightblue
#ADD8E6 |
greenyellow
#ADFF2F |
saddlebrown
#8B4513 |
mediumorchid
#BA55D3
|
navajowhite[11]
#FFDEAD |
powderblue
#B0E0E6 |
lime
#00FF00 |
maroon
#800000 |
darkorchid
#9932CC
|
peachpuff
#FFDAB9 |
paleturquoise
#AFEEEE |
limegreen
#32CD32 |
darkred
#8B0000 |
darkviolet
#9400D3
|
mistyrose
#FFE4E1 |
lightcyan
#E0FFFF |
yellowgreen
#9ACD32 |
brown
#A52A2A |
darkmagenta
#8B008B
|
lavenderblush
#FFF0F5 |
cyan
#00FFFF |
darkolivegreen
#556B2F |
firebrick
#B22222 |
purple
#800080
|
seashell
#FFF5EE |
aqua[12]
#00FFFF |
olivedrab
#6B8E23 |
indianred
#CD5C5C |
indigo
#4B0082
|
oldlace
#FDF5E6 |
turquoise[13]
#40E0D0 |
olive
#808000 |
rosybrown
#BC8F8F |
darkslateblue
#483D8B
|
ivory
#FFFFF0 |
mediumturquoise
#48D1CC |
darkkhaki
#BDB76B |
darksalmon
#E9967A |
blueviolet
#8A2BE2
|
honeydew
#F0FFF0 |
darkturquoise
#00CED1 |
palegoldenrod
#EEE8AA |
lightcoral
#F08080 |
mediumpurple
#9370DB
|
mintcream
#F5FFFA |
lightseagreen
#20B2AA |
cornsilk
#FFF8DC |
salmon
#FA8072 |
slateblue
#6A5ACD
|
azure[14]
#F0FFFF |
cadetblue
#5F9EA0 |
beige[15]
#F5F5DC |
lightsalmon
#FFA07A |
mediumslateblue
#7B68EE
|
色名について：
- ↑ テンプレートが1個しか使用されていない場合は1つのみ表示。複数使用されている場合は全てが一覧表示される。
- ↑ マガモの頭の羽の色からとられた名前。近年、組織のあり方を色分けした最上位の「ティールな組織」という言葉をお聞きになられた方もいらっしゃるでしょう。
- ↑ 赤紫色のことである。アカバナ科の植物フクシアの花の色にちなんで名づけられたが「フューシャ」と呼ばれることも多い。色の三原色の一つ「magenta：マゼンタ」とも呼ばれる。マゼンタの由来：1859年のマジェンタの戦い (サルデーニャ王国とフランスの連合軍が、オーストリア＝ハンガリー帝国軍に勝利をおさめた戦い)とほぼ同時期に発見された染料だったためこの名が付いた。
- ↑ 地中海の国々で樫の木の一種ケルメス・オーク (Kermes oak)に住むカイガラムシから取られた赤い染料の色であった。「ケルメスの」を意味するスペイン語"cremesi"が由来。 赤とマゼンタの中間色。
- ↑ ゲーンズボロ(淡い灰色)。英国の画家Thomas Gainsborough(1727-1788)の絵のスタイル(軽く繊細なタッチ)から来たようだ。米国の地名から来たという説もある。
- ↑ カーキ色:ヒンディー語の土埃(ホコリ)色から来ている。しかし、この色「カーキ色」と言うには少々明る過ぎる感じもしますね。
- ↑ Thistle：スィスルは植物の薊 (アザミ：スコットランドの国花)。花弁は細い棒状の集まりで針山のような形。その花弁の青紫色に由来する。非常に薄い青紫色。
- ↑ ペルーブラウン：南米ペルーの国旗や国章にアンデス原産キナの木があり、このキナの木の樹皮から抗マラリア薬のキニーネが得られる。この樹皮の色から来たようだ。黄土色というかアンバーというか、明るい茶色。
- ↑ Wikipedia参照：https://ja.wikipedia.org/wiki/%E3%83%93%E3%82%B9%E3%82%AF
- ↑ アメリカ先住民が履いていた、鹿などの一枚革で作られたスリッポン形式の靴の色から来た。靴はその後U字型の甲革がモカシン縫いという方法で縫い合わされたのでこの名がある。薄い茶色。
- ↑ 北米先住民族ナバホの国旗の背景色に由来する、薄いイエロー・オレンジ色。出典：https://en.wikipedia.org/wiki/Navajo_white
- ↑ aque は、上の cyanと同じです。
- ↑ ターコイズブルーとは、トルコ石 (turquoise：ターコイズ)を原料とする青緑色。ペルシャで採掘された石がトルコ経由で地中海地方にもたらされたため名づけられた。青と緑の中間色で、青みが強いトルコ石をターコイズブルー、緑が強いとターコイズグリーンと呼ばれる。
- ↑ 現在のトルキスタンにある地名lazhwardが語源。当地で産出する青色の宝石「ラピスラズリ：lazhwardの石(lapis)」を意味するようになり、色の名前となった。元来、明るく鮮やかな青を表すが、Webで規定されるアジュール(azure)は「淡い青色」で元の色と異なる。
- ↑ 染めていない羊毛の毛織物をベージュと言った。そこから「ベージュ」はその織物の色、つまり極めて薄い黄色または茶色のことを言う。
色に関する情報について
- 「色名」に無い色を使いたい
- 「色名」に無い色を指定したい場合は、「16進カラーコード」を組み合わせて作成します。
- 「16進カラーコード」については、以下のリンク先情報を参照ください。
- この16進コードはどんな色かな？
- 「16進カラーコード」に対する実際の色を確認したい場合は、https://www.peko-step.com/tool/tfcolor.html
- この色を使いたいが、16進コードは？
- 逆に、好きな色からカラーコードを知りたい場合は「HTML Color Code」https://html-color-codes.info/japanese/ が便利。
- また、「原色大辞典」https://www.colordic.org/ というサイトも参考になります。
質問・ご意見はこちら
- お問い合わせ・ご意見のメールはこちら
- 上記リンクをクリックしてもメールソフトが起動しない場合は、以下のアドレスをコピーしてメールソフトの「宛先」に貼り付けてください。
- 【担当者メールアドレス】wiki_admin@koyamadai100.jp
- ←「3. テキスト整形方法について」 ←「4. テキスト編集ツール」 →「6. 【重要】ログアウトに注意！」 →「7. リンク作成方法について」
- ↑ページトップへ ↑↑「メインページ」の「編集者のためのヘルプ」に戻る ↑↑「メインページ」トップに戻る
脚注：
･
2022年6月6日：直近編集者：Adminkoyama100
TimeStamp：20220606095515
|
- 参考URL
- https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9%E3%82%AF%E3%83%AB%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3
- https://en.wikipedia.org/wiki/Help:Transclusion
質問・ご意見はこちら
- お問い合わせ・ご意見のメールはこちら
- 上記リンクをクリックしてもメールソフトが起動しない場合は、以下のアドレスをコピーしてメールソフトの「宛先」に貼り付けてください。
- 【担当者メールアドレス】wiki_admin@koyamadai100.jp
- ←「12. 動画・音声を再生する 」 ←「13. コメント(編集時のみ表示)」 ←「14. Marginを使った表示位置の微調整」 →「16. ファイルアップロードと削除」 →「18. 管理者用ヘルプ」
- ↑ページトップへ ↑↑「メインページ」の「編集者のためのヘルプ」に戻る ↑↑「メインページ」トップに戻る
脚注：
･
2022年6月6日：直近編集者：Adminkoyama100
TimeStamp：20220606095515