スマートフォン版ニコニコ大百科単語

これはスマホ版に切り替えるまでもなく容易に再現できる。この枠内は幅350pxなのだが、そこで幅300pxの表をフロートさせると非常に読みにくいことが分かるだろう。

ニコニコ大百科の限られた仕様の中でこれに対応したい場合、中身は空だが幅だけ指定されたdiv要素を挟むというテクニックが考えられる。この枠内でそれを実行している。画面が狭くなって回り込むスペースが指定した幅以下になると、自動的に下へ押しやられることになる。

[修正済]見出し（<h2>、<h3>など）の仕様変更

※この問題は2020年8月18日に修正された。

これまでのスマートフォン版では、見出しの体裁はPC版とほぼ同じだった。すなわち、背景画像として黄緑色のマーカーを表示し、見出しの直下に黄緑の線を引くというものである。

ところがリニューアル後は全ての下線が消えており、

<h2>（見出し2）では左にオレンジ色の線があり、

■<h3>（見出し3）では左にオレンジの四角があり、

■<h4>（見出し4）では左に灰色の四角があり、

<h5>（見出し5）と<h6>（見出し6）では何もない

状態となった。

以下に https://dic.nicovideo.jp/css/style.css から当該のスタイル指定を抜粋する（長いのでスクロールすること）。

.sw-Article_Body-inner h2 {

border-left: solid 8px #ffaf19;

padding-left: 10px;

font-size: 20px;

/*color: #222;*/

font-weight: bold;

margin:30px 0 10px;

}

.sw-Article_Body-inner h2:first-child {

margin-top: 0;

}

.sw-Article_Body-inner h3 {

position: relative;

font-size: 18px;

padding-left: 1em;

margin:30px 0 10px;

}

.sw-Article_Body-inner h3:before {

content: '■';

position: absolute;

top: 4px;

left: 2px;

color: #ffaf19;

font-size: 12px;

}

.sw-Article_Body-inner h3:first-child {

margin-top: 0;

}

.sw-Article_Body-inner h4 {

position: relative;

font-size: 16px;

padding-left: 1em;

margin:30px 0 10px;

}

.sw-Article_Body-inner h4:before {

content: '■';

position: absolute;

top: 4px;

left: 2px;

color: #999;

font-size: 10px;

}

.sw-Article_Body-inner h4:first-child {

margin-top: 0;

}

.sw-Article_Body-inner h5 {

position: relative;

font-size: 14px;

margin:30px 0 10px;

}

.sw-Article_Body-inner h5:first-child {

margin-top: 0;

}

これ単体で見れば「見やすくなった」という評価もできるかもしれないが、黄緑のPC版とオレンジ主体のスマホ版とは文字通り異なるカラーとなってしまった。たとえ見出し自体をいじっていなくても、ページが黄緑を主体としていることを念頭に記事をデザインしていた場合はちぐはぐになってしまう可能性がある。

さて、この仕様による一番の問題は、従来（背景画像）とは全く異なる方法でマーカーを表示している点にある。見出しのデザインをいじっていた場合、従来のマーカーを消すための処理しかしていないことがほとんどなので「自分で設定したマーカー」と「スマホ版のデフォルトのマーカー」が干渉してしまうのだ。

具体的には、<h2>タグには border-left によってオレンジ色の左枠が設定されている。従って見出しのスタイルに border-left: none; を加えれば対処可能だ。

ところが<h3>と<h4>は before 擬似要素で■をねじ込んでいる。現在の大百科の仕様では擬似要素を編集者が設定することは一切できないので、この■をどけるのは容易ではない。今のところできる対処としては、姑息ではあるが margin-left の値を大きなマイナス（-999pxとか）にして padding-left に同じ絶対値の＋を設定して■を画面外に飛ばす方法が考えられる。ただし、見出しに下線が設定されているとその下線も左に突き出てしまう。どうしても見出しに下線を表示させたい場合には、<h3>や<h4>自体は border-bottom:none;として、直下に border-top を設定した div などの要素をあてがうしかない。

また、背景画像に関するスタイルの指定がリセットされた結果 background-repeat の値が repeat となっている。そのため見出しのマーカーを背景画像として指定し、かつ background-repeat: no-repeat; の指定をしていなかった場合、背景画像が縦横に繰り返してしまう。

参考までに

PC版でご覧の方は、上のように背景画像のURLを指定しただけの<h4>見出しがスマートフォンでどのように表示されるか、ここをクリックして確かめていただきたい。

[修正済]番号付きリスト<ol>と定義リスト<dl>の仕様変更（というか除去？）

※番号付きリスト<ol>の問題は2018年4月に、定義リスト<dl>の問題は同年8月24日に修正されている。

1. この両者は<ul>とは逆の方向で悲惨なことになっている。
2. 今あなたはこの記事をスマートフォンで閲覧しているだろうか。
3. もしそうなら、この文章を見て何かに気づいただろうか。
4. 実はさっきから<ol>番号付きリストで書いているのだ。
5. パソコンで閲覧していて何のこっちゃと思った方はここをクリックしてスマホ版で表示してみよう。
6. そう、見事に番号が消えているのだ。ご丁寧に余白も全て削除である。理由は考えるまでもなく、reset.cssで全てのスタイルをまっさらにした後何ら上書きされていないからだ。
7. どうしてもスマートフォン版で番号付きリストを使いたければ、list-style-type: decimal; とスタイルを指定しよう。もちろん全ての<li>タグに。
8. これに加えて余白、特に左側の余白を確保する必要がある。幸い、これは全ての<li>に指定せずとも<ol>タグに padding-left: 2em; くらいを指定しておけば良い感じになる。
9. しかし、いくら目に付く<ol>を修正しても、記事の最後に絶望が待っている。脚注もまた<ol>リストなのだ。これに関しては本当に諦めるしかない。

定義リスト<dl>

それは見出し<dt>とその定義<dd>からなるリストである。

発生している問題

これも<ol>同様、<dl><dt><dd>全ての装飾が引っぺがされている。

本来あるべき装飾

まず<dt>は太字で<dd>は左に一文字分くらいのインデントが挿入されるのが一般的である。

対処法

とりわけ<dt>が太字でなくなるのが著しく可読性を下げてしまう。残念ながら一つ一つの要素にスタイルを再指定するしかない。

[修正済]表の枠線が消えて余白がない

※この問題は2018年8月28日に修正された。

[修正済]上/下付き文字<sup><sub>の仕様変更

※この問題は2018年8月28日に修正された。

<span style="vertical-align: top; font-size: 75%;">上付き文字</span>

<span style="vertical-align: bottom; font-size: 75%;">下付き文字</span>

[修正済]最終更新日の誤表記

※この問題は2018年6月ごろに修正された。

スマートフォン版の記事上部にある「…その他」をタップすると、本来「最終更新日」と表記すべきところが「初版作成日」となっており、本来の「初版作成日」と見分けが付きづらくなっている（スマホ版での表示を確認する）。

ただその性質上、「最終更新日」は「初版作成日」と同じかそれよりあとの日時にしかなりえないため、今現在に近いほうが「最終更新日」、もう片方が「初版作成日」と一応の区別はできる。また上記の「掲示板でのお絵カキコの表示」と同様に、PC版で閲覧することで対処ができる。

[修正済]大百科トップページにおけるユーザ記事等へのリンク

※この問題は2018年4月18日に修正された。

大百科トップページにユーザ記事があった場合、それをタップしてもユーザ記事ヘは行かず、そのユーザのIDの単語記事へ行ってしまう。同様の症状は動画記事でも確認されており、おそらく商品記事やコミュニティ記事でも起こるとみられる。

対処法としては、その記事名をヘッダーの検索欄に入れて検索し、該当の記事カテゴリタブをタップすることがあげられる。

[修正済]編集時にスマホ版の表示が確認できない

※この問題は2018年6月13日に修正された。

この点は引き続き未解決のままである。現状では、とりあえずパソコン上から記事を編集してアップロードしてしまい、それをスマートフォンで確認するのが手っ取り早い。ただ試行錯誤しながら更新を試みると編集履歴が無駄に膨らんでしまって他の編集者の利便性を損なうので、やり直しが予想される場合は自分のユーザー記事で表示を確認するなどの工夫が必要となるだろう。

別な方法としては、Google ChromeやFirefoxなどのブラウザに備わっている開発者ツールを利用することがあげられる。このTwitterモーメントでわかりやすく説明されているので、詳しくはそちらを参照のこと。

ユーザスクリプトでスマホ版を確認しながら編集する方法

有志（本記事掲示板の>>8に降臨）によってスマホ版プレビュー機能が搭載できる Greasemonkey のユーザスクリプトが公開されている。

• Greasy Fork: Nicopedia-Smartphone-Previewer

このスクリプトを入れると、記事の編集画面上部（プレビュー部分の真上）に「スマホ版プレビュー」という枠が自動的に生成され、最新のスマートフォン版ニコニコ大百科と同じスタイルシートを適用したレイアウトが確認できる。各種iPhone、Nexus 7、iPadに対応したサイズの画面を指定でき、それを回転させることも可能である。

ユーザスクリプトを使ったことのない方は Greasemonkey の記事を参考にして導入されたい。ただし、一般論としてスクリプトの利用はリスクを伴う（アドオンなどと違って公開されているスクリプトは基本的に審査されていないので、悪意のあるスクリプトを入れてしまうとセキュリティ上とてもまずい）ことを承知の上で操作すること。

この文章を書いている編集者は実際に Nicopedia-Smartphone-Previewer を導入してみて大きな問題が発生しないことを確認している。ただし、MacOS の Firefox 最新版で Greasemonkey 4 を使ってこのスクリプトを読み込んだところ正常に動作しなかった。同様の問題が発生した場合、Tampermonkey を使うことを推奨する。

[修正済]番号なしリスト<ul>の仕様変更

[修正済]番号なしリスト<ul>の仕様変更

※この問題は2020年10月6日に修正された。

• 単刀直入に、実物をご覧いただこう。
• パソコンから閲覧中の方はここをクリックしてスマホ版で表示されたし。
• PC版及び従来のスマホ版では list-style: url(/img/li1.gif) outside; を使って画像（黄緑の丸）をマーカーとして指定していた。これは容易に編集者サイドで上書きできるので、箇条書きの<ul>は見出しと並んで装飾されることの多い要素である。
• ところがスマートフォン版の新仕様では、<h3>や<h4>と同じくbefore 擬似要素で灰色の●が付け足されている。画像ではなく文字の●である。しかも位置が中心線から微妙に下にずれている。
  • ついでに言えば階層を下げると今度はマーカーに背景画像（>みたいな）を使っている。

以下に https://dic.nicovideo.jp/css/style.css から<ul>と<li>のスタイル指定を抜粋する（長いのでスクロールすること）。

.sw-Article_Body-inner ul {

margin-bottom: 20px;

}

.sw-Article_Body-inner ul > li {

position: relative;

margin-bottom: 10px;

padding-left: 18px;

}

.sw-Article_Body-inner ul > li:before {

content: '●';

display: block;

position: absolute;

left: 0;

top:3px;

font-size: 10px;

color: #999;

}

.sw-Article_Body-inner ul > li > ul {

margin-top: 10px;

}

.sw-Article_Body-inner ul > li > ul > li {

position: relative;

margin-bottom: 10px;

padding-left: 18px;

background: url(/img/icon_arrow-right.png) left -5px top -2px no-repeat;

background-size: 20px;

list-style: none;

}

.sw-Article_Body-inner ul > li > ul > li:before {

content: '';

display: none;

}

• また、厄介なことにli要素に前述の reset.css によって list-style: none; などが指定されているので、いくらulに対してスタイルを指定しても反映されない。自分でマーカーを指定するには全てのliタグにスタイルを指定しなければいけない。
• そしてマーカーを指定するなら、当然その前に邪魔な●をどけなければいけない。だがh3やh4のようにマイナスの margin-left とプラスの padding-left を使う作戦はさらなる問題を引き起こしてしまう。list-style-position が outside である限り、マーカーは margin-left に引っ張られて●と共に葬り去られてしまうからだ。
• これに対処できる最善（と思われる）手段は list-style-position: inside; と指定することである（繰り返すまでもないが全てのliタグに）。その場合、項目が長くなってしまって改行が発生すると、今ご覧いただいているとおり、字下げが働かずに二行目以降の行頭がマーカーと同じ位置になってしまうことに注意しなければいけない。

上のli項目のサンプル

<span style="margin-left: -999px; padding-left: 999px; list-style: url('https://dic.nicovideo.jp/oekaki/759664.png') inside;">

• それが嫌なら、さらなる邪道に手を染める必要がある。マーカーを背景画像にしてしまうのだ。これなら改行にも強いが、各種数値の指定で微調整を要求される。background-position の上からの位置をpxで指定してもemで指定してもスマホとPCとでデフォルトのフォントサイズが異なる以上、どちらかではマーカーが少し中心線から上下に移動してしまうのは避けられない。それでもスマートフォンのデフォルトで下にずれている●よりはマシかもしれないが。

上のli項目のサンプル

<li style="margin-left: -979px; padding-left: 999px; list-style: none; background: url('https://dic.nicovideo.jp/oekaki/759664.png') 979px 5px no-repeat;">

だがこのサンプルを適用する前に少し待ってほしい。こんな長ったらしい指定を全てのliタグに付けてまでして、その表示を維持する必要があるだろうか？ 本当にやってしまったら、その後のメンテナンスがとても面倒になってしまうだろう。仕様が元に戻ることを期待して根気強く待つのも一つの手である。

一文字の単語記事への自動リンク

※この問題は2020年10月6日に修正された。

PC版では、一文字の単語記事への自動リンクが存在しても本文（#4c4c4c）とほとんど変わらない色（#444444）であるため邪魔になりにくい。これは従来のスマートフォン版でも同様だった。ところが仕様変更後は二文字以上の記事へのリンクと同じ色（#1e7dc0）となってしまった。

これによって文章の中に青と黒が入り乱れて、単純に読みづらいだけでなく、シロナガスクジラ現象が起きやすく誤タッチを誘発しやすい。マウスを重ねればリンクの範囲が分かるパソコンのブラウザとは違って一度触ったら基本的にそのページに遷移してしまうスマートフォンの仕様が仇となっている。

禁則処理がなされていない

※この問題は2020年10月6日に修正された。

スマートフォン版ニコニコ大百科では句読点や閉じ括弧が行頭に来てしまう状況がしばしば見られる。言い方を変えれば、禁則処理がなされていない。どうやらbody要素に word-break: break-all;（一切の禁則処理をしない設定）が指定されているようだ。

無論、これも一般編集者が手出しをできる設定ではない。

編集履歴

※この問題は2020年10月6日に修正された。

スマホ版の編集履歴でフッターの「PC版」ボタンを押しても、PC版編集履歴には飛ばずPC版トップページに飛ばされてしまう。

現状、URLの「dic.nicovideo.jp/t/revs/～」を「dic.nicovideo.jp/revs/～」に直す、あるいはPC版の記事経由で編集履歴を閲覧することで対処可能。