路線テンプレートボックス単語

ロセンテンプレートボックス
5.2千文字の記事
  • 1
  • 0pt
掲示板へ

路線テンプレートボックスとは、鉄道路線の情報を掲載するためのテンプレートです。

更新2024年1月28日

テンプレートの使い方

  1. 該当の編集ページを開く。
  2. htmlエディタの有効と効を切り替える】をクリック
  3. 編集したい記事にソースコードコピー
  4. 【<h2>概要</h2>】のあとに、コピーしたソースコードペーストする。
  5. 再度【htmlエディタの有効と効を切り替える】をクリック
  6. 右に出てきたボックス内の情報をお好みで編集。(改行したいときはShift押しながら)
  7. 投稿内容を実際に表示してみる】をクリックし確認する。

もし失敗したら?

  1. 元に戻す(Ctrl+Z)を試してみる。
  2. ソースコードを全てコピー出来ているか確認する。
  3. 挿入場所を確認する。
  4. 取り返しがつかないくらいページが乱れたら、一旦、記事の編集のページを閉じる。

使い方とソースコード

日比谷線
東京メトロ03系 ニコニ・コモンズより
基本情報
運行事業者 東京地下鉄(東京メトロ)
総路線距離 20.3km
22
路線記号
軌間 1067mm
電化方式 直流1500V
電車線方式
使用車両 東京メトロ13000系
東武70000系
最高速度 80km/h
部分開業日 1961年3月28日
(南千住駅-仲御徒町駅)
全線開業日 1964年8月29日
備考
路線テンプレート
<div style="margin: 0px 0px 0.5em 0.5em; border: 1px solid #999; padding: 4px; float: right; background-color: #ffffff;">
<table width="208" style="font-size: 13px; background-color: white; color: #333; text-align: center;">
<tbody>
<tr><td style="border: 1px solid #fff; font-weight: bold; color: #000; font-size: 16px; background: linear-gradient(#89a1ad, #edffff, #89a1ad);" colspan="2">
○○線</td></tr>
<tr><td style="border: 1px solid #fff; font-size: medium; vertical-align: middle;" colspan="2">
<div style="overflow: hidden; height: 110px;">ここに画像を貼付</div></td></tr>
<tr><th style="background: linear-gradient(#89a1ad, #edffff, #89a1ad); padding: 1px; border: 1px solid #ffffff; vertical-align: middle; color: #000;" colspan="2">基本情報</th></tr>
<tr><th style="border: 1px solid #fff; background: linear-gradient(90deg, #cccccc, #f5f5f5, #cccccc); color: #000000; padding: 1px; width: 75px; vertical-align: top;">運行事業者</th><td style="border: 1px solid #fff; text-align: left; padding: 1px;">
--</td></tr>
<tr><th style="border: 1px solid #fff; background: linear-gradient(90deg, #cccccc, #f5f5f5, #cccccc); color: #000000; padding: 1px; width: 75px; vertical-align: top;">総路線距離</th>
<td style="border: 1px solid #fff; text-align: left; padding: 1px;">
---km</td></tr>
<tr><th style="border: 1px solid #fff; background: linear-gradient(90deg, #cccccc, #f5f5f5, #cccccc); color: #000000; padding: 1px; width: 75px; vertical-align: top;">駅数</th><td style="border: 1px solid #fff; text-align: left; padding: 1px;">
--駅</td></tr>
<tr><th style="border: 1px solid #fff; background: linear-gradient(90deg, #cccccc, #f5f5f5, #cccccc); color: #000000; padding: 1px; width: 75px; vertical-align: top;">路線記号</th><td style="border: 1px solid #fff; text-align: left; padding: 1px;">
--</td></tr>
<tr><th style="border: 1px solid #fff; background: linear-gradient(90deg, #cccccc, #f5f5f5, #cccccc); color: #000000; padding: 1px; width: 75px; vertical-align: top;">軌間</th><td style="border: 1px solid #fff; text-align: left; padding: 1px;">
----mm</td></tr>
<tr><th style="border: 1px solid #fff; background: linear-gradient(90deg, #cccccc, #f5f5f5, #cccccc); color: #000000; padding: 1px; width: 75px; vertical-align: top;" rowspan="2">電化方式</th><td style="border: 1px solid #fff; text-align: left; padding: 1px;">
----V</td></tr>
<tr><td style="border: 1px solid #fff; padding: 1px; font-size: 12px; text-align: left;">
空電車線方式/第三軌条方式</td></tr>
<tr><th style="border: 1px solid #fff; background: linear-gradient(90deg, #cccccc, #f5f5f5, #cccccc); color: #000000; padding: 1px; width: 75px; vertical-align: top;">使用車両</th><td style="border: 1px solid #fff; text-align: left; padding: 1px;">
----系</td></tr>
<tr><th style="border: 1px solid #fff; background: linear-gradient(90deg, #cccccc, #f5f5f5, #cccccc); color: #000000; padding: 1px; width: 75px; vertical-align: top;">最高速度</th><td style="border: 1px solid #fff; text-align: left; padding: 1px;">
--km/h</td></tr>
<tr><th style="border: 1px solid #fff; background: linear-gradient(90deg, #cccccc, #f5f5f5, #cccccc); color: #000000; padding: 1px; width: 75px; vertical-align: top;">部分開業日</th><td style="border: 1px solid #fff; text-align: left; padding: 1px;">
yyyy年mm月dd日<br /> (○○-△△)</td></tr>
<tr><th style="border: 1px solid #fff; background: linear-gradient(90deg, #cccccc, #f5f5f5, #cccccc); color: #000000; padding: 1px; width: 75px; vertical-align: top;">全線開業日</th><td style="border: 1px solid #fff; text-align: left; padding: 1px;">
yyyy年mm月dd日</td></tr>
<tr><th style="color: #000; background: linear-gradient(#89a1ad, #edffff, #89a1ad); padding: 1px; border: 1px solid #ffffff; vertical-align: top;" colspan="2">備考</th></tr>
<tr><td style="border-color: white; border-style: solid; padding: 1px; font-size: 12px; text-align: left;" colspan="2">
<ul><li>-</li></ul></td></tr>
<tr><td style="color: #000; font-size: 10px; background: linear-gradient(#89a1ad, #edffff, #89a1ad); padding: 1px; border: 1px solid #ffffff; vertical-align: top;" colspan="2">
路線テンプレート</td></tr>
</tbody></table></div>

関連項目

関連記事

親記事

子記事

  • なし

兄弟記事

【スポンサーリンク】

  • 1
  • 0pt
記事編集 編集履歴を閲覧

ニコニ広告で宣伝された記事

天星 癒唖 (生) 記事と一緒に動画もおすすめ!
提供: 豆腐
もっと見る

この記事の掲示板に最近描かれたお絵カキコ

お絵カキコがありません

この記事の掲示板に最近投稿されたピコカキコ

ピコカキコがありません

路線テンプレートボックス

1 ななしのよっしん
2020/11/08(日) 00:53:02 ID: rPKrWFKNBK
ああこれ鉄道路線用か。
しかしソースコードの高さが高過ぎだと思う。
👍
高評価
0
👎
低評価
0
2 ななしのよっしん
2020/11/08(日) 03:08:58 ID: J2fCub9wNi
<ul>~</ul>のリストスマートフォン版だと変なスペースができてしまいます。
普通に使うなら気にならないけど、tableのセルに入れると上に偏って表示される感じ?で地味に気になる)
たしかmargin-bottomをいじれば調整できたと思うので、そうしたほうがいいかなと思います。
👍
高評価
0
👎
低評価
0
3 ななしのよっしん
2020/11/08(日) 03:16:13 ID: J2fCub9wNi
ああ、でも>>2について気にするなら、画像の上下のスペースのほうも気になってくるかな。
消せなくもないけど、慣れてない方には使いづらくなりますね。
あんまり気にしても大変ですので、>>2についても気にしなくても大丈夫です。お騒がせしました。
👍
高評価
0
👎
低評価
0
4 ななしのよっしん
2020/11/09(月) 15:15:09 ID: TUoWkWnG7V
>2-3
その辺りに詳しい人です。
ulについて…他のテンプレ系でもそうなんですが、根本的にはスマホ版余白の取り方がPC版と違うので起こってます。
margin-bottomだけでは上に詰まった形自体が解決しないので
<ul style="margin-bottom: 0; padding-top: 0.7em; padding-bottom: 0.5em;">
<li>-</li>
</ul>
という形に変更するとPC版の見たを変えることなくスマホ版での見たを改善することができます。
👍
高評価
0
👎
低評価
0
5 ななしのよっしん
2020/11/09(月) 15:51:45 ID: TUoWkWnG7V
続けて画像部分ですが、>>1の言っている高さというのもこの部分かと思います。
コモンズの画像は長辺を400pxに縮小して短辺側に余白を持たせた400×400の正方形の画像になります。
ですので
(表示サイズ-(表示サイズ÷横幅×高さ))÷2
で上下の余白サイズを算出できます。このテンプレの画像の場合
(200−(200÷3,264×1,840))
÷2=43.6274509804となります。
囲っているdivのheightを取り除いてimgネガティブmarginでその値を付与すると余白部分が見えなくなります。※小数点以下は切り捨てるのが
<div style="overflow: hidden;">
<a style="background-image: none;" href="https://commons.nicovideo.jp/material/nc107971exit_nicocommons"
(省略しています。全て読むにはこのリンクをクリック!)
👍
高評価
0
👎
低評価
0
6 ななしのよっしん
2020/11/09(月) 15:55:03 ID: TUoWkWnG7V
ってレス書いてる間に編集されてた…Orz
一応、>>4-5の表示例
https://twitter.com/gimmickgang/status/1325662968088948739exit
👍
高評価
0
👎
低評価
0