小説家になろうの活動報告を作るうえでの注意点。これを知っておくといいよ。
今回は活動報告を作るうえで注意すること。知らなくてもいいですけど、知っておくと納得できることも多いのでは。
小説家になろうの活動報告は厳密にいうと4つの種類があります。
特に装飾をしない場合はあまり関係ないですが、装飾をする場合はそれぞれで効果が違いますので必ず知っておきましょう。
知らないと認識に齟齬が発生する恐れがあります。
全般的に言えるのですが、小説家になろうのレイアウト設定はPC版とスマホ版で分かれています。
また、誰でも見られるページ（読者ページ）と、作った人しか見られないページ（作者ページ）があります。
そのため計4つのページが存在します。普段1つのデバイスでしか見てない人はあまり意識することはないですが、PC版とスマホ版では同じ装飾を使っても違うように見えることがあります。
装飾の仕方によっては片側では見やすくても、もう片側では見づらいこともよくあります。
まずはそこを理解しましょう。図にするとこんな感じです。
なお見分け方は、作者ページでは編集や削除メニューが表示されます。読者ページでは表示されません。またURLも異なります。
作者ページ：https://syosetu.com/userblogmanage/view/blogkey/～
読者ページ：https://mypage.syosetu.com/mypageblog/view/userid/～
この作品内では、誰でも見られるページを読者ページ、作った人しか見られないページを作者ページと呼ぶことにします。
なお、作者ページは作った人しか見られないのでこの作品内では無視します。多少レイアウトが崩れる場合もありますが、読者ページではきちんとなるので無視します。
よく、活動報告のリンク先として作者ページのURLを教える人がいますが、自分しか見ることができないのでやめましょう。
ということで次にPC版とスマホ版の読者ページの注意点を説明します。
- - - ✂ 切り取り ✂ - - -
■PC版読者ページでの注意点
特定のHTMLを打ち込んだ後の文字が小さくなる
よく見かけます。
これの原因として、PC版の活動報告欄が<p></p>で構成されていることに起因しています。
HTML5ではpタグ内にフローコンテンツ（divなど）を含むことは許されていません。
そのため、活動報告内でdiv, center, hr, h, preのようなタグを使った場合、それ以前のところで<p>タグが閉じて（ブラウザ側で自動的に処理されます）pタグのClassにかかった装飾が打ち消されます。
このpタグに活動報告のデフォルト文字サイズ情報が含まれているので、それ以降の文字サイズが小さくなります。（デフォルトでは文字サイズを1.2倍していますので、相対的に1/1.2倍になります。まぁ大体0.8倍です）
これを防ぐには一番最初に活動報告の文字サイズを規定する必要があります。
活動報告の全体に<div style="font-size:120%;line-height:1.7;"></div>を使うと解決します。もしくは好きなフォントサイズを指定 (14px~16pxくらい)するのがいいと思います。<div style="font-size:14px;line-height:1.7;"></div>
意味が分からなかった人は、とりあえず活動報告全体を<div style="font-size:120%;line-height:1.7;"></div>または<div style="font-size:14px;line-height:1.7;"></div>でくくってください。それで解決します。
ちなみにスマホ版はどうかというと、きちんと<div>でくくられているため、このようなことが起きません。PC版作者ページも大丈夫です。PC版読者ページでのみ生じます。
小説家になろうのHTML/CSSを作った人のミスなのか、暗に特定のタグを使うなということなのか、タグを使う人はスマホで見ることを推奨しているのかは不明です……。
正直、HTMLタグを入れられるページをpタグでくくることは通常ありえないので、最初に活動報告の仕様を決めた時にはタグを使えないようにしていたのかなと思ったり。(とはいえpタグ3連もあり得ないので単なるミスだとは思います)
昔はHTMLも迷走している時期だったので仕方ないのかもしれません。
■スマホ版読者ページの注意点
文字色を変更しても文字色が変わらない。
文字色を変えても途中から文字色が元に戻る。
<div style="color:red;">これはテスト、<strong>テスト</strong>です。</div>
これを活動報告に入れるとどうなるでしょうか。
全体を赤色にして、テストのところを太字にしているだけですが、実はPC版とスマホ版では結果が異なります。
あれ？ スマホだけ、文字色が変わってますね。どういうことでしょう。
これはスマホ版のCSS設定のせいです。
スマホ版のCSSではユニバーサルセレクタに色が設定されています。ユニバーサルセレクタというのは、該当ページすべての要素に適用される装飾を設定するものです。明示的に装飾が指定されていない限りこの設定が適用されます。
*{
margin: 0px;
padding: 0px;
color: #333333;
}
要するにどういうことかというと
<div style="color:red;">これはテスト、<strong>テスト</strong>です。</div>
と打ち込みましたが、スマホではユニバーサルセレクタのせいでこうなっています。
<div style="color:red;">これはテスト、<strong style="color: #333333;">テスト</strong>です。</div>
こんな感じにユニバーサルセレクタ先輩が気を利かせてスタイルを適用してくれているので、このような現象が発生しています。
これの解決策としては、明示的にスタイルを指定すればいいのでこうなります。
<div style="color:red;">これはテスト、<strong style="color: red;">テスト</strong>です。</div>
スマホ版で色を変える場合はご注意ください。
なお、作者ページやPC版ページではユニバーサルセレクタに色設定はないのできちんと表示されます。
スマホ版の読者ページでのみ発生します。
作者ページだけで確認していると、気づかないものです。
ちなみにですが、ユニバーサルセレクタの設定は遅くなるのと予期せぬ不具合が発生する可能性があるので使用することはあまり推奨されていません。
- - - ✂ 切り取り ✂ - - -
■PC版読者ページの注意点
活動報告全体にdivタグで文字サイズ、行間を設定すること。
■スマホ版読者ページの注意点
色を変えるときは中に含める要素に色の設定を加えるもしくは中の要素に余計なタグを付けない。
ということで2点の注意事項でした。
活動報告の装飾の難易度の高さは、この仕様（バグ？）に集約されていると思います。
どちらのCSSにも対応できるようにしなければいけません。せめてCSSが集約されていればよかったのですが……。
まぁ小説家になろうは技術負債が多そうなので、緊急性がない場合は直さないと思いますね。これが問題になるほど装飾する人の割合は少ないので直す場合は恐らく、全面的なリニューアル時になりそうです。
ただ、その場合は活動報告で自由に装飾できなくなる可能性も高いので自分としては現状維持が無難なところ。
