「小説家になろう」におけるＨＴＭＬタグの使い方について

　こんにちは、赤い酒瓶です。

　初のエッセイとなりますが、今回は私が少々手を焼いた「ＨＴＭＬタグ」についてお話しさせて頂こうと思います。私同様、「利用してみたいけれど、いまいちどうしたらよいのかわからない」という方向けの説明でもあります。ただ、あくまで小説家になろう内での利用の話ですが。

　「いろんなサイトの説明を見てきたけど、正直もうわけがわからないよ……」、「もう説明を聞く気にもならない」、「どうせ『ＨＴＭＬタグを設置、利用するためにはＨＴＭＬとは何か、その基本から理解する必要が～』とか言い出すんでしょ。そんなものは余所でも聞けるんだよ」という方にもお付き合いいただければと思います。

　むしろそういった方々向けに書くよう善処するつもりでありますし、ページの最後に奥の手も用意しておきますので。

　では、本題に入りますが、注意として一つ。今回は乱暴な物言いも含みますが、あくまでも一つのネタとしてそう言っているだけです。それと、かくいう私もきちんとＨＴＭＬについて理解しきっているわけでもありません。

　かねてより、小説各話や目次ページの下に何かしら設置されている光景自体は目にしていました。記憶にある範囲では、アルファポリスのランキングタグが最も多かった気がします。目次や各話の下の方でちょこんとしてる黄色いあれです。

　あれが小説管理ページからランキングタグ設定によって設置できることは前から存じていたのですが、最近あのスペースにランキングタグのみならず、文章やほかの小説、ホームページへのリンクまで設置できることを遅まきながら知りました。

　よくよく記憶を探ってみると、確かにあの部分に何かしらのメッセージが置かれているのを昔にも拝見したこともあるような気がしますので、正確には思い出したでしょうか。

　ほかの方の小説で新作へのリンクや感想等の誘導、読んでくださった方へのお礼のメッセージが設置されているのを目にしたのが切欠だったのですが、素直に「私もやりたい」と思いまして、すぐにやり方を調べました。

　初めにＨＴＭＬが一体何なのか、某知恵袋などのサイトをいくつか見て回ったのですが理解できたという感覚は得られず、その後とあるサイトの存在を知って覗いてみたところ、一つの結論を得ることができまして、

「これ全部読んで理解するくらいなら、もう分かんないままでいいや！　めんどくせぇし」

　口調のみ冗談です。

　そもそも、そのサイトに行きつく少し前から、私は次のようなことを考え始めていました。

「なろうでＨＴＭＬ使うったって、使用できるタグは限られてるんだし、ＨＴＭＬを利用してやりたいことだって限られてんのに、何でわざわざ一から理解なんてする必要があるんだよ。何をどう打ち込んだら、『文字が大きくなって』、『文字が太くなって』、『文字に色がついて』、『任意のページに飛ばせるようになって』、『文章を中央に寄せる』ことができるようになるんだっつーの。こっちはそれだけ知られればいいのに、『基本から理解』だの『～も知らないようでは』だの、どこに行ってもくどくどくどくどと……」

　このような感じです。ちなみに後で改行の仕方も必要だったと知りました。

　そんなわけで、このエッセイは正確に言い表すとＨＴＭＬタグを利用するための方法ではなく、ページ下部に張り付ける文章に対し、『文字を大きくし、色を付ける』、『文字を太くする』、『クリックすると任意のページに飛ぶようにする』、『文章を中央に寄せる』、『改行する』方法を紹介するものになります。

　『文字を大きくする』と『文字に色を付ける』が一纏めになっているのは、実際に一つの作業として行うためです。

　以下では『文字を太くする方法』、『文字を大きくし、色を付ける方法』、『改行する方法』、『任意のページに飛ぶようにする方法』、『これらを合わせて使う方法』、最後に『文章を中央に寄せる方法』の順で説明いたします。

　また、以下においては作品の小説管理ページにあるランキングタグ設定をクリックした先の、設定欄での入力における話をしております。

　まずは『文字を太くする方法』から説明いたします。

と言っても難しいことはなく、例えば「読んでくれてありがとう」という文を太字にしたいのであれば、ランキングタグ設定欄にその文を入力して、その前後を「」と「」で挟むだけであり、

読んでくれてありがとう

　と入力すれば、「読んでくれてありがとう」を太字で、目次なり各話のページの下部に表示できます。

　続いて、『文字を大きくし、色を付ける方法』を説明します。

文字の大きさ、色の設定をしたい部分の前後を「」と「」で挟むだけです。

　前半の「2」となっている部分にほかの数字を打ち込むことによって文字の大きさを調整できます。「2」の状態で、大体普通に打ち込んだ文字と同じ大きさです。

　「gray」の部分にほかの色を入力すれば、こちらも任意の色に変更できます。たとえば赤なら「red」、青なら「blue」です。

　ここで「2」や「gray」になっていることに意味はありません。例として私が使用した数値、色を入力しておいただけです。ちなみにすべて半角で打ち込むことと、スペースの存在にご注意ください。

　「感想をくれると嬉しいよ！」という文において「感想」の部分だけ、周囲と同じ大きさかつ赤色で表示したければ、

感想をくれると嬉しいよ！

　と入力します。

　この際、他と文字の大きさが同じでよいのなら「size="2"」を入力しなくていいという情報などもあるのですが、そういった作業量を減らすための話は省きます。読み手にとって不慣れな話題を扱っている前提ですので、作業量よりも頭に入れる情報量を少なくする方を優先しようと思うためです。

　とにかく、「数字」、「色」の部分に任意の情報を入れることで挟んだ文字を操れるのです。

　また、「！」の部分にも同様の処置を施したければ、

感想をくれると嬉しいよ！

　とするだけで足ります。一文の中で複数の箇所を個別に操作できるということです。

　『改行』の説明ですね。

読んでくれてありがとう

感想をくれると嬉しいよ！

　と入力したとしましょう。文字の太さや色などはここでは表現しかねますが、実際のページ下部に現れる文章は次のようになってしまいます。

読んでくれてありがとう感想をくれると嬉しいよ！

改行のために必要な情報を入力していないからです。文の末尾に「<びーあーる>」（「びーあーる」には「br」と入力）と入力すればその部分で改行がなされます。なぜに「<びーあーる>」なんてふざけた表記をしているのかと申しますと、この小説本文できちんと入力した場合、どうやら普通に改行されてしまって「<びーあーる>」が表示されないようだからです。

読んでくれてありがとう<びーあーる>

感想をくれると嬉しいよ！

　のようにすれば、

読んでくれてありがとう

感想をくれると嬉しいよ！

　のようになり、

読んでくれてありがとう<びーあーる>

<びーあーる>

感想をくれると嬉しいよ！

　とすれば

読んでくれてありがとう

感想をくれると嬉しいよ！

　のようにできます。ちなみに

読んでくれてありがとう<びーあーる><びーあーる>感想をくれると嬉しいよ！

　のように入力しても結果は同様とか、それ以外の話もあるのですが、どうでもいいことです。あくまでも小説ページ下部にメッセージとリンクを用意することが目的ですから、必要なことだけ覚えましょう。

　『任意のページに飛ばす方法』を説明します。たとえば、自分が現在連載中の作品にクリック一つで飛べるリンクを古い作品や短編小説に張りたいとします。私、赤い酒瓶の場合ですと、連載中の作品である「エルフの少女に恋した少年は永遠の命を追い求めました」へのリンクを短編小説「チワワの話：パパとママはお留守」のページ下部に張り付けたいときにどうしたらよいか、といった感じですね。

故郷を目指し、ヒロインたちと旅する冒険ファンタジー<びーあーる>

<a href="http://ncode.syosetu.com/n3482cx/">エルフの少女に恋した少年は永遠の命を追い求めました</a><びーあーる>

連載中です<びーあーる>

よろしくお願いします！

　といった文章を短編小説「チワワの話：パパとママはお留守」のランキングタグ設定ページの設定欄に入力してやったとします。

　すると

故郷を目指し、ヒロインたちと旅する冒険ファンタジー

エルフの少女に恋した少年は永遠の命を追い求めました

連載中です

よろしくお願いします！

　とページ下部に表示され、「エルフの少女に恋した少年は永遠の命を追い求めました」の部分をクリックすると、その目次ページに飛ばされるようになります。

リンクとしたい文言にあたる部分を「<a href="リンク先のURL">」と「</a>」で挟むのです。

　これだけです。まさか、「びーあーる」の話をもう忘れていたりしませんね？

　また、これを利用すればツイッターや自身のホームページへのリンクも設置できます。

　次は『これらを合わせて使う方法』です。簡単に例を示させて頂きますと、

感想をくれると嬉しいよ！

　この「感想」と「！」が赤文字で表された文。これの全体を太文字にしたいとします。

感想をくれると嬉しいよ！

　こうすることで文全体が太字に、「感想」、「！」は赤い太字になります。

　注意として、より広い範囲に作用する方を外側に記すという点があり、

感想をくれると嬉しいよ！

　のような記載にならないように注意してください。

　また、

<a href="http://ncode.syosetu.com/n3482cx/">エルフの少女に恋した少年は永遠の命を追い求めました</a>

　のようにしておくと、リンクとなっている部分を太字で強調できます。

　うまく組み合わせて利用してください。

　『文章を中央に寄せる方法』、これで最後のはずですよね。思ったより長くなってしまっています。申し訳ありません。

これのやり方は至って単純で、「<div align="center">」と「</div>」を用いて、設置したい文章全体を挟んでください。

　例を示します。

故郷を目指し、ヒロインたちと旅する冒険ファンタジー<びーあーる>

<a href="http://ncode.syosetu.com/n3482cx/">エルフの少女に恋した少年は永遠の命を追い求めました</a><びーあーる>

連載中です<びーあーる>

よろしくお願いします！

</div>

　これで間にある文章すべて、中央に寄せて表示することができます。

　以上で、説明は終わりです。どうでしょうか？　最低限の話とはいえ、素人が半端な知識で説明しているため分かり辛い個所もあったかと思います。

　一応、このエッセイは私が自分でＨＴＭＬに関する情報を検索していた時に、「これだけ教えてくれればそれでいいのに……」と思った情報を中心に構成しておりますので、ＨＴＭＬを利用してページ下部に「読者の方々へのメッセージ」、「新作へのリンク」、「評価や感想への誘導」などを設置するのに必要な要素は大体乗せたつもりです。

　文字の大きさ、色、太さ、リンク、中央での表示、改行。多分、これだけあれば十分なはずとは思うのですが……。あとは何があった方が良いですかね？

　さて、では『奥の手』のご紹介です。ここまでの文章に対して「駄目だ分からん」といった方のためのものです。

旧作から新作小説へ誘導したい場合

お読みいただき有難うございます！<びーあーる>

<a href="新作のURL">新作小説のタイトル</a><びーあーる>

連載中です！<びーあーる>

気に入ってくれた方は『ブックマーク』、『評価』、『感想』をいただけると嬉しいです

</div>

新作小説においてメッセージ、ツイッターや旧作品等への誘導を行いたい場合

お読みいただき有難うございます<びーあーる>

<びーあーる>

こちらも覗いていただけたら幸いです<びーあーる>

<a href="誘導先のURL">誘導先の名前</a>

</div>

　これらをコピーし各小説のランキングタグ設定ページに張り付け、「びーあーる」の部分を「br」と表記し、上のパターンであれば「新作のURL」と「新作小説のタイトル」の部分に対応したものを入力、下のパターンであれば「誘導先のURL」と「誘導先の名前」の部分に対応したものを入力するだけで済むはずです。

　以上、ここまでお付き合いくださった方が居りましたら、ありがとうございます。

2017年1月11日追記

　ＨＴＭＬタグを利用の際にはマニュアルの確認を怠らないように気をつけて下さい。アフィリエイト等、禁止されている事項もあります。

　一応、本ページの下部にもリンクを貼っておきます。

少しでも誰かの足しになればよいのですが……。

それと、連載中の小説の方も読んで頂けたら幸いです。