スマートフォン版ニコニコ大百科とは (スマートフォンバンニコニコダイヒャッカとは) [単語記事]

スマートフォン版ニコニコ大百科とは、スマートフォン向けに表示がカスタマイズされたニコニコ大百科のコンテンツである。

概要

パソコンでのURLが https://dic.nicovideo.jp/○○○ であれば、ほとんどのページに関しては https://dic.nicovideo.jp/t/○○○ を指定すればスマートフォン版につながる。

基本的にパソコンのウェブブラウザで見られる内容とほぼ同じ物をスマートフォンで見させるだけなので、サービス名としては「ニコニコ大百科」そのものであり、スマートフォン版が独立して正式名称をつけられているわけではない。

公式発表の文面では「ニコニコ大百科スマートフォン版」「スマホ版ニコニコ大百科」などと表記が揺れている。本記事では2018年 4月5日現在で最新のお知らせ（4月2日発表）で使われていた「スマートフォン版ニコニコ大百科」を記事名として採用した。この記事の中でも表記の統一性はないに等しいけど。

従来の携帯電話向け表示である「ニコニコ大百科モバイル」とは異なる。各記事末尾の「携帯版URL」と書かれたQRコードはスマートフォン版ではなくモバイル版記事につながるので注意。モバイル版では画像がサムネイル化したり、一定容量を超えたページは閲覧できなかったりするなどの制限があるが、スマートフォン版の記事ではコンテンツを制限することなく、文字を大きくするなどしてスマートフォンの画面に最適化がなされている。

2020年 6月24日現在、ニコニコ大百科に関してPC ブラウザ版でできてスマートフォン版でできないことは以下のとおり。

記事の編集
ピコカキコの投稿
「各種設定」（主にマイページの表示に関するもの）
トップページからは「最近更新された記事」「最近レスが書かれた掲示板」は全カテゴリ合わせて10件までしかたどれない。PC版ではどちらも（記事はカテゴリ別に）好きなだけ確認できる。
記事を検索した際に、各記事の掲示板へのレス数以外に情報が表示されない。2018年 4月2日のリニューアルまでは「最終更新日時」と「最新レス日時」が確認できるようになっていた。

逆にスマートフォン版にしかない機能として

ほめられた記事の統計
自分が初版を作成した記事、お絵カキコ、ピコカキコがそれぞれほめられた数の確認

がある。どちらも2018年 4月2日のリニューアルで追加されており、今後PC版に導入される可能性もある。

この他に細かな仕様や表示の違いがある。表示に関してはこの後の項目で詳しく取り上げる。

簡単な歴史

「ニコニコ大百科」の記事も参照。

2008年にニコニコ大百科が立ち上がり、2009年末には携帯電話向けにニコニコ大百科モバイルが提供されるようになったが、スマートフォンから閲覧するとPC版では文字が小さすぎて操作しづらく、モバイル版では文字が無駄に大きくて機能が少なく、痛し痒しであった。

そんな状態が長いこと続いたが、2014年 2月5日に全記事の冒頭に「この記事をスマートフォン版で見る」という大きなボタンが出現して、ようやくスマホの画面に最適化されたデザインで記事を読むことができるようになった。その後6月には自動的にスマホ版記事に誘導されるようになる。この間の経緯は「この記事をスマートフォン版で見る」の単語記事に詳しい。

待望のスマホ版大百科ではあったものの、いくつかの問題点を抱えていた。具体的に挙げると、

初期は一々PC版サイトのボタンを押さなければスマホ版の表示ができず面倒だった。自動誘導されるようになってからも、一旦PC版サイトにアクセスしてからスマホ版に転送するという仕様が続き閲覧に時間がかかっていた。
また、逆にスマホでの表示が嫌なのでPC版の記事を見たくても強制転送される仕様が、特に（PC用記事の閲覧に何ら支障がない）タブレットの使用者に嫌がられた。
ニコニコ大百科掲示板への投稿さえできなかった。記事をほめたりウォッチリストに追加したりすることも不可能だった。
行間が全般的に詰まりすぎていた。特に段落（<p>タグ）同士の間にはPC版では一文字分のスペースがあるのにスマートフォン版では全くスペースが存在しないことが著しく可読性を阻害していた。
横幅が狭い故に、大きな画像などによってレイアウトが圧迫されてしまいがちだった。一般的なウェブサイトではCSSやJavascriptを駆使してこれに対応しているのだが、ニコニコ大百科ではJavascriptが使えずCSSも著しく制限されている（特に編集者の間で要望が多いのは max-width と min-width の解禁）ため対策が困難だった。
画像の横幅だけが圧縮されて縦長に表示されてしまうことが多かった。
スマートフォンの仕様上、ネタバレ防止のためによくある白文字は選択しても反転せず、コピペするなどの手間が必要。
上記のような違いがあるにも関わらず、スマートフォンから記事の編集はできず、PCの画面で編集中にスマホにおける表示を（有志が作ったスクリプトの力を借りない限り）確認することもできなかった。そのため折角凝ったデザインの記事を作ってもスマホでは崩壊してしまい、分かっていても対応できないまま放置されてしまった例も散見された。

2017年 3月21日のアップデートで掲示板への投稿、さらにお絵カキコの登録やほめる・ウォッチリスト追加などの機能が追加された。

そして2018年 4月2日、スマートフォン版サイトのデザインを根本から変えるリニューアルがなされた。

仕様変更によって掲示板にワンタップでアクセスできるようになり、「ほめる」「編集履歴を見る」などといった機能も格段に使いやすくなった。さらに、ほとんどの要素（一部除く）でPC版と同様に行間や要素間に適度な空白が入るようになったため、可読性も向上している。

また、ほめられた記事の統計情報などといったPC版にはない機能も追加された。

このように数多くの改善点があるものの、本リニューアルは利用者の間で賛否両論となっている。特に編集者からは否定的な意見が多い。そこで次の項目では現在スマートフォン版のニコニコ大百科が抱える問題点を主に編集者の目線から列挙し、可能な対策についても言及する。

現在のニコニコ大百科スマートフォン版における問題点

このアップデートが多くの閲覧者にとっては恩恵をもたらすものであり、編集者の中にも歓迎されている方がいらっしゃることを本記事の中で否定する意図は一切ないことを先に述べておきたい。

また、いくらかのHTML及びCSSに関する知識をお持ちであることを前提とした記述が多いこともご容赦願いたい。本記事と併せて「ニコニコ大百科:HTMLタグ一覧」及び「ニコニコ大百科:HTML各要素のデフォルトCSS」もご覧いただくことをお勧めする。

さて、そもそもの問題として、数多くの記事が影響を受ける大きな仕様変更が予告なく投下された上、それに伴う対応がユーザーに丸投げされている点に触れなければならない。仮に全ての記事が現在の仕様に合わせたならば可読性は向上するかも知れないが、それに必要な労力を考慮すれば当面は崩壊してほとんど読めない状態のまま放置される記事が多いことは想像に難くない。

編集者がHTMLとCSSを駆使して、かなり自由にレイアウトを変更することができる点は、他の百科事典サイトではあまり見られないニコニコ大百科独自の面白さである。しかし今回の変更でPC版とスマートフォン版の表示が著しくかけ離れてしまったこと、その中には後述するように対策が困難または不可能なものがあることで、（片方を切り捨てない限り）デザインの自由度が著しく下げられてしまった。

またこうした問題以前にバグとしか思えない仕様も存在する。これについては、全てのタグの装飾をリセットしてまっさらな状態にするCSS（https://dic.nicovideo.jp/css/reset.css）を適用してしまったことで生じているのだと思われる。

ここに挙げる問題の大半はサポートに改善を働きかけるべきものであり、既にそうした動きも見られるが、すぐには修正されない可能性もある。そこで具体的にどんな表示上の問題が発生していて、どう対応するべきかを考察してみるとしよう。

[一部修正済]大きな要素が右にはみ出る

※この問題は2018年 4月26日ごろに一部修正された。

従来のスマートフォン版サイトでは全要素に max-width: 100%; が効いているため、親要素よりも大きな要素は自動的に親要素と同じサイズまで縮小される仕様だった。ところが新しい仕様ではこれがなくなってしまい、大きな要素、特に画像や表が画面の最大幅を超えて右に突き出てしまいやすくなっている。

この問題は記事の冒頭で大きな画像を使っていたりテンプレートボックスの表組み（ほとんどのテンプレが横幅 600px）を使っていたりする場合に顕著だ。

対処法はpxの代わりに%で横幅を指定することである。もし画像や表の横幅が 600px であれば、(600÷720)×100 ≒ 83% に変えればPC版での表示をほとんど損なうことなくスマートフォン版の枠内に収めることができる。

2018年 4月26日ごろに「max-width」「max-height」属性が解禁された。これにより、<table><div><img>といったタグのstyleに「max-width: 100%」と入れるだけで上記問題が軒並み解決するようになった。ただし<img>についてはそのまま入れると画像が縦長になってしまう恐れがあるので、heightの属性を削除する必要がある。

フロートさせた画像や表が文章を圧迫する

幅720pxのPC版の画面では、標準的なサイズである横幅317px前後の画像を style="float: left;" や style="float: right;" で左右にフロート（画面の片側に寄せた上で続きの文章を反対側に回り込ませる）させると文章が良い感じに反対側に配置される。スペースが半分以上あまっているからだ。

ところがスマートフォンの画面では横幅が狭いので、2-3文字分の余白しか残っていなくて読みにくいこと極まりないことがある。似たような問題は表でも発生しやすい。

これは2018年 4月2日のリニューアル以前からも起きえたことであり、狭い画面でウェブサイトを表示させるときの宿命とも言うべき問題なので、できれば対処したい。

この表は	確認用のダミーです。
横幅は	300pxです。
右側に	フロートさせてます。
左側が	悲しいことになってますね？

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

この表は	確認用のダミーです。
横幅は	300pxです。
右側に	フロートさせてます。
左側に	何もありませんね？

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

以下がサンプルのコードである。空のdiv要素は画像または表と反対方向にフロートさせ、直後の文章でそれを解除するのがミソ。サンプルでは幅を150pxにしているが、好みに合わせて調整するといいだろう。

[左にフロートした要素に続ける場合]

<div style="width: 150px; height: 0; float: right;"></div>

<p style="clear: right;">回り込む（または回り込まない）文章</p>

[右にフロートした要素に続ける場合]

<div style="width: 150px; height: 0; float: left;"></div>

<p style="clear: left;">回り込む（または回り込まない）文章</p>

掲示板でのお絵カキコの表示

掲示板に画像サイズの小さなお絵カキコがあった場合、それが極端に拡大された状態で表示される不具合（仕様？）が確認されている。無理やり引き伸ばされているため、目の粗いモザイク画像のように見えてしまう。

現状、URLの「dic.nicovideo.jp/t/b/～」を「dic.nicovideo.jp/b/～」に直す、あるいは掲示板下部の「PC版」ボタンをタップすることで対処可能。

修正済みの問題点

[修正済]見出し（<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日に修正されている。

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

定義リスト<dl>: それは見出し<dt>とその定義<dd>からなるリストである。
発生している問題: これも<ol>同様、<dl><dt><dd>全ての装飾が引っぺがされている。
本来あるべき装飾: まず<dt>は太字で<dd>は左に一文字分くらいのインデントが挿入されるのが一般的である。
対処法: とりわけ<dt>が太字でなくなるのが著しく可読性を下げてしまう。残念ながら一つ一つの要素にスタイルを再指定するしかない。

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

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

表<table>も大きな問題を抱えている。何がどうまずいかは、PC版で以下の表を読んでいただくかスマホ版で以下の表の惨状をご覧いただくかすればご理解いただけるだろう。なおこの表には文字色以外一切のスタイルを指定していない。

	PC版の仕様	スマホ版の仕様
枠（border）	全セルに `1px solid #d1d1d1`	一切なし
余白（padding）	`<th>`は`2px`、`<td>5px`	一切なし
背景色	`<th>`のみ `#F1F1F1;`	一切なし
その他	`<th>`が太字、中央揃え（`text-align: center;`）

表が表としての体裁をなさない。見られる状態にするには全てのセル（<th>と<td>）に枠と余白のスタイルを設定しなければならず、大きな表では大変な労力を要する（せめてテキストエディタで作業したい）。

数十から数百個単位の記事で使われているテンプレートの中にもこの仕様の影響を受けてしまっているものがあり、手動で対応しようものなら必要となる時間は計り知れない。

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

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

ピタゴラスの定理　a²+b²=c²
水の化学式　H₂O

上記は<sup>または<sub>で数字を上/下付きにしているが、スマホ版だと「H2O」のように表示されてしまう（→スマホ版での表示を確認する）。PC版と同様に表示するためには、現状<sup><sub>を使わずに<span>で代用する必要がある。以下にサンプルを掲載。

sup項目のサンプル

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

sub項目のサンプル

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

ちなみに、脚注へのリンク^[1]も<sup>で本来なら上付き文字なのだが、スマホ版では通常のフォントである。そのせいで分かりにくかったり、場合によっては邪魔になってしまったりしている。

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

※この問題は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-Prev iewer を導入してみて大きな問題が発生しないことを確認している。ただし、MacOS の Firefox 最新版で Greasemonkey 4 を使ってこのスクリプトを読み込んだところ正常に動作しなかった。同様の問題が発生した場合、Tampermonkey を使うことを推奨する。

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

新仕様のulは下側に margin-bottom: 20px; が指定されているだけで、実は他の三方は全く余白が確保されていない。↓
そんな中で table などを使って箇条書きを二段組みにするとどうなるかと言えば……↗

こんな風に
左側の行末が右側のマーカーとくっついてしまう。
それでいながらマーカーと文章の間は半端に開いているので、とても見づらい。
要注意。

[修正済]番号なしリスト<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版では、一文字の単語記事への自動リンクが存在しても本文（#4c4 c4c）とほとんど変わらない色（#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版の記事経由で編集履歴を閲覧することで対処可能。

編集者向けページ
マニュアル	記事の編集方法 - HTMLタグ一覧 - HTMLエディタヘルプ - スマホエディタヘルプ - ピコカキコヘルプ - お絵カキコヘルプ - パンくずリスト - パンくずリストのガイドライン
マナー	編集時のマナー - 編集合戦 - 編集競合 - 楽しく過ごすために
素材	素材集 - 素材集2 - ニコニコテレビ君 - キャラアイコン - ドットキャラ - 外字・特殊フォント
テンプレ	お知らせ表示 - ユーザーボックス - テンプレートボックス - 作品テンプレート - HTMLテンプレート集 - Twitter引用
カラー	HTMLカラーコード - CSSでの色指定
仕様	仕様 - デフォルトCSS - 自動リンク - ページ番号 - リビジョン番号 - 初版作成日 - 最終更新日 - 編集履歴
依頼	一般会員依頼スレ - 記事作成依頼 - 記事加筆依頼 - 要編集記事 - 未作成タグ - 話題の単語
公式企画	百チャレ - 大百科グランプリ
ヘルプ	よくある質問 - エラー・不具合情報
編集者	編集者一覧 - ★ - ∞ - ♢
その他	今週のオススメ記事 - おすすめトレンド - 急上昇ワード改
ver20 231215

脚注

*今あなたがクリック（タップ）した奴のこと。

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

概要

簡単な歴史

現在のニコニコ大百科スマートフォン版における問題点

[一部修正済]大きな要素が右にはみ出る

フロートさせた画像や表が文章を圧迫する

掲示板でのお絵カキコの表示

修正済みの問題点

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

参考までに

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

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

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

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

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

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

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

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

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

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

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

編集履歴

関連項目

脚注

親記事

子記事

兄弟記事

おすすめトレンド

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

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

概要

簡単な歴史

現在のニコニコ大百科スマートフォン版における問題点

[一部修正済]大きな要素が右にはみ出る

フロートさせた画像や表が文章を圧迫する

掲示板でのお絵カキコの表示

修正済みの問題点

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

参考までに

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

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

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

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

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

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

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

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

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

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

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

編集履歴

関連項目

脚注

親記事

子記事

兄弟記事

おすすめトレンド

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

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