6
＜＜
＜
＞
＞＞
1/1
-
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. nicovide o.jp/mat erial/nc 107971 
" target="_blank" rel="nofollow">
<img alt="東京メトロ03系 ニコニ･コモンズより" src="https://deliver. commons. nicovide o.jp/thu mbnail/n c81349?s ize=l 
" width="200" height="200" style="margin-top: -43px; margin-bottom: -43px;"></a>
</div>
とすることで余白分をほとんど表示しない形にできます。 -
👍0👎0
-
6 ななしのよっしん
2020/11/09(月) 15:55:03 ID: TUoWkWnG7V
ってレス書いてる間に編集されてた…Orz
一応、>>4-5の表示例
https://twitter. com/gimm ickgang/ status/1 32566296 80889487 39
-
👍0👎0
＜＜
＜
＞
＞＞
1/1