小説家になろう「ランキングタグ」の活用について　～HTMLとCSSを用いる～

作者：すめらぎ

【はじめに】

なろう作家の皆さま、はじめまして。

「異世界ＧＭ」連載中の、すめらぎと申します。

早速ですが「ランキングタグ」という物をご存じでしょうか？

たまに「○○社より出版します」と書かれイラスト付きのリンクが

張られていますが、まさにそれです。

設定画面は以下の赤丸の部分にあります。

毎日見ているのに、スルーしている方が多いのではないでしょうか？

そこで今回は、自称（？）セミプロの私が作ってみたので

参考にして頂ければ、幸いです。

このページの一番最後にサンプルをいくつか載せます。

気に入ったサンプルと同じデザインの物を

コピペで作れる様に、解説をしていきます。

【なろう運営側の説明】

なろう公式のマニュアルから抜粋いたします。

============================================

https://syosetu.com/man/ranktag/

小説閲覧ページには特定のHTMLタグを設置することが出来ます。

小説家になろうでは、投稿小説を外部のランキングサイトに登録したり、ランキングサイトの利用に必要な

ランキングタグを設置することを許可しています。

ランキングの他にも、ウェブリングやご自分の個人サイトへのリンクを貼るなど、様々な用途にご利用いただけます。

設置に関する注意事項

・設置されたタグが無効な形式で記述されている場合、正常にページの閲覧等が行なえない可能性があります。

その為、無効な形式のタグが記述されている場合、システムにより自動で記述形式の修正が行なわれます。

・安全対策としてJavaScriptは利用できません。

・アフィリエイトなど、バナーの表示やクリックで収益が発生するタグの設置は規約違反となります。

・設置されたタグにより利用者もしくは運営が何らかの不利益をこうむる状況が発生した場合は、

緊急対応として即時の小説削除を行う可能性があります。

　（※HTMLタグの記述ミスであっても、早急な解決が必要となるものの場合は対応の対象となります）

============================================

https://syosetu.com/man/senden/

宣伝に関するQ&A

Q.読んでもらいたいけど、宣伝してまで読んでもらうほど素晴らしい作品じゃないです…。

それでも宣伝したほうがいいですか？

A.宣伝はしなければならないものではありません。

必要に応じて適宜行ってください。

Q.出版や電子書籍化の宣伝も同じように行なって大丈夫ですか？

A.外部サイトで有料コンテンツの宣伝を行う際は、外部サイトの規約に従ってください。

小説家になろう内では、「アフィリエイト広告のリンクを貼る」など宣伝活動自体に収益が発生するやり方は

禁止しております。

また、「作品購入ページへのリンクを貼る」行為についても、営利目的の活動として制限しております。

書籍情報の紹介ページへのリンクは問題ございません。

小説家になろうのユーザには未成年の方も多くおられますため、金銭に関する活動は少々厳しく対応を行なっております。

ご協力の程何卒お願い申し上げます。

============================================

【まとめると】

まとめると……

外部ランキングサイトにリンクを張る様に作ったけれど、

個人サイト自分のTwitterとかにリンクしても良いよ。

（自分でガンガン広告してね）

ただし、アフェリエイト広告して稼いだりはダメよ。

変なHTMLは運営側で予め使えなくしてあるけれど、

ユーザー側も運営や利用者に迷惑かけない様に気を付けてね。

営利目的の活動は制限しているので注意してね。

（商用は相談のるよ）

【難しい話】

ここから先は、HTMLをある程度知っている方に向けて話します。

なろうで使えるHTMLタグをジャンルごとにまとめました。

--------------------------------------------

「登録可能タグ一覧」

レイアウト系

段落処理系

表

文字装飾系

外部表示系

フォーム系・その他

--------------------------------------------

【今後の展開】

私は今後、動的なコンテンツを入れたいですね。

例えば、簡単な物ならば

10秒ごとに表示されるイラストが変わるとか、

うちの小説のヒロインのイリーナがたまに瞬（まばた）きするとか。

ちなみに<img>を使ってapngを試してみましたが、

PC版Chrome以外は表示されませんでした。

【さらに難しい話】

さて、DIVとSPANが入っている事に私は、気が付きました！

という事はですが、なんとCSSが使えます！　ただし、一部のみ。

何種類か試してみましたが、

<div style="○○: △△;">で文字装飾系が使えます！

「position:」は、残念ながらタグ投稿時の自動添削で

綺麗に消されてしまいます。下請け会社、良い仕事してますね。

なので<a>によるリンクを簡単にDIV全体には適用させてくれません。

対策として私は20年前のCSS普及前のテクニックを使いました。

他には文字をレイヤー表示させて、ダミーのpngを用意してimgから飛ばす方法などでしょうか？

良い方法を思いついたら、教えてください。

【さいごに】

　異世界転移「ＧＭコールは届きません！」　

　https://ncode.syosetu.com/n7997fc/

　私の連載している小説をお読みいただけたら、とても嬉しいです。

【サンプル１　HTML＋CSS】

「画像掲載し、タップでリンク先へ行ける」

　　▼▼▼　画像をクリックすると、なろう版の「表紙ページ」へとアクセスできます　▼▼▼　　

</font>

</div>

</a>

　　▲▲▲　画像をクリックすると、なろう版の「表紙ページ」へとアクセスできます　▲▲▲　　

</font>

</div>

【サンプル２　HTML＋CSS】

「外部サイトへのリンクを現代風なデザインにアレンジ」

異世界ＧＭ公式 Twitter

</font>

</div>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<br />

https://twitter.com/ikaigm_official

</font>

連載予定などを掲載しています。宜しければフォローをお願いいたします。

</font>

<br/>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<br />

</a>

　　　　<br />

</div>

小説家になろう「ランキングタグ」の活用について ～HTMLとCSSを用いる～

小説家になろう「ランキングタグ」の活用について　～HTMLとCSSを用いる～