9/13

チャットノベルを作ろう

夕月：「グアアアア」

（なろうのどこか）

A：「夕月がやられたようだな……」

B：「フフフ……奴は割烹芸人四天王の中でも最弱……」

A：「感想やレビュー如きにやられるとは割烹芸人のツラ汚しよ……」

C：「ちくわ大明神」

B：「でも感想もレビューも嬉しいよね……」

A：「まぁな、俺も欲しい……てか誰だ今の」

こんにちは夕月です。書き貯めがなければ即死だった。

ということでレビューによりモチベーションが上がったため更新速度が上がっております。

とある割烹芸人のテンプレートももう終盤。

今回はチャット形式のテンプレートづくりです。

私の割烹見てる人はわかると思いますが、活動報告ではチャット風小説も作ることができます。

あ、チャットといっても、コメント機能を利用するわけではなく、HTMLによって吹き出しなんかを作って実現します。あしからず。

どういう風に実現しているか気になる人も多そうなので、早速説明していきますね。

1.アイコン画像を用意しよう。

チャットノベルにはアイコン画像があると誰が喋ってるかわかりやすいです。

アイコン用に作った画像はみてみんにアップロードしておいてください。

あ、アイコンやキャラ画像はなくても大丈夫ですよ。

まぁあるとちょっと華やかになるかなって気がします。

絵が描けない人は描ける人に依頼してもいいですね。

ただ、最近では色々なツールがあるのでご紹介します。

CHARAT(キャラット)

https://charat.me/

こんな風にパーツを組み合わせてアバターを作ることができます。

FQAを見ると、作品の挿絵として使えることも書かれてます。

https://charat.me/faq/

最終確認日

2019年2月21日

ただ、加工したものを再配布することは禁止されているのでご注意くださいね。

また使用する前には最新の利用規約を読んでください。

他にもdwangoが提供しているカスタムキャストというアプリもあるので絵が描けなくても色々と方法はありますね。

http://customcast.jp/

色々なツールが出てますので試してみてください。

2.チャット用のテンプレートを作ってみよう

ということでチャット欄を作っていきます。

■画像+下文字

一番簡単な形式です。

・左テンプレート

<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i363189/" alt="i363189" width="80" /><div style="background:#eff8fb;padding:10px;font-size:14pt;">Aさんのセリフ

</div>

・右テンプレート

<div align="right"><img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i363190/" alt="i363190" width="80" /></div><div style="background:#f8e0e0;padding:10px;font-size:14pt;">Bさんのセリフ

</div>

img src=　のところにそれぞれのアイコンURLを

background:　で背景を設定します。

width= で画像のサイズなどを調整してください。

サンプルでは枠をあらかじめ入れてますが、必要ならこちらで設定しても大丈夫です。

画像がなくても色分けだけでもいいですね。

■吹き出し

吹き出しを実現するには2つのパーツが必要です。

・三角形

・上三角

・下三角

・右三角

・左三角

最初のborderで三角形の底辺幅を設定。

次のborder-で三角形の高さを設定します。

border-bottomで上向き、border-topで下向き、border-leftで右向き、border-rightで左向きを作れます。

こんな感じに作ります。

詳しくは説明しませんが、こういう仕様だと思ってください。

（私もよくわかってない。なんでボーダーを上書きするとできるんだろう……）

・コメント欄

同じ色合いの■を作ります。

吹き出しはそれを組み合わせて実現してます。

興味がある方は色々とアレンジしてみてください

・上吹き出し

-左テンプレート

<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i363189/" alt="i363189" width="80" /><div style="border:15px solid transparent;border-bottom:15px solid #F78181;width:0%;margin-left:15px;"></div><div style="padding:10px;background-color:#F78181;font-size:12pt;width:80%;"><b>チャット欄</b></div>

-右テンプレート

<div align="right"><img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i363189/" alt="i363189" width="80" /><div style="border:15px solid transparent;border-bottom:15px solid #F78181;width:0%;margin-right:15px;"></div><div style="padding:10px;background-color:#F78181;font-size:12pt;width:80%;"><b>チャット欄</b></div></div>

・下吹き出し

-左テンプレート

<div style="padding:10px;background-color:#B1ED8B;font-size:12pt;width:80%;"><b>チャット欄</b></div><div style="border:15px solid transparent;border-top:15px solid #B1ED8B;width:0%;margin-left:15px;"></div><img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i363190/" alt="i363190" width="80" />

-右テンプレート

<div style="padding:10px;background-color:#B1ED8B;font-size:12pt;width:80%;"><b>チャット欄</b></div><div style="border:15px solid transparent;border-top:15px solid #B1ED8B;width:0%;margin-right:15px;"></div><img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i363190/" alt="i363190" width="80" /></div>

幅や吹き出し位置、フォントサイズ、などなど変更してみてください

なお、左右にする場合はfloatパラメータを指定します。

floatパラメータを指定しするとそれぞれ別の段に分かれてしまうのを防いでくれます。

・フロートパラメータ

<div style="width:148px;height:148px;border:dashed 1px #FF0000;float:left;">ボックス1フロートあり。

</div><div style="width:148px;height:148px;border:dashed 1px #FF0000;float:left;">ボックス2フロートあり。

</div><div style="clear:both;"> 　

</div>

<div style="width:148px;height:148px;border:dashed 1px #FF0000;">ボックス1フロートなし。

</div><div style="width:148px;height:148px;border:dashed 1px #FF0000;">ボックス2フロートなし。

</div>

・左吹き出し+画像

<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i363192/" alt="i363192" style="float:left;" width="50" /><div style="border:10px solid transparent;border-right:10px solid #81DAF5;margin-right:0px;margin-top:5px;width:0%;float:left;"></div><div style="width:65%;padding:10px;background-color:#81DAF5;font-size:14pt;float:left;"><b>コメントを入力</b></div>

・右吹き出し+画像

<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i363191/" alt="i363191" style="float:right;" width="50" /><div style="border:10px solid transparent;border-left:10px solid #A4A4A4;margin-right:0px;margin-top:5px;width:0%;float:right;"></div><div style="width:65%;padding:10px;background-color:#A4A4A4;font-size:14pt;float:right;">コメントを入力</div>

なお、アイコンを丸くするとチャットっぽく見えます。

3.ライン風

吹き出しをアレンジするとこんな感じになります。

宛先

</div><div style="background:#849ebf;">

<div style="border:10px solid transparent;border-left:10px solid #B1ED8B;margin-top:5px;width:0%;float:right;margin-left:0px;"></div><div style="padding:10px;background-color:#B1ED8B;font-size:12pt;float:right;text-align:right;width:80%;"><b>右コメント</b></div><div style="clear:both;"></div>

<div style="border:10px solid transparent;border-right:10px solid #ffffff;margin-right:0px;margin-top:5px;width:0%;float:left;"></div><div style="padding:10px;background-color:#ffffff;font-size:12pt;float:left;width:80%;"><b>左コメント</b></div>

</div>

全体をdivで囲って背景色を変えています。

色や画像を追加してもいいですね。

ということでチャット形式を実現するのは結構めんどくさいですが、テンプレートを用意しておくと楽ですよ。

今回紹介したテンプレートの色や画像、サイズを変えて試してみてください。

では恒例のテンプレートです。

以下コピペ用テンプレート

■画像+下文字

・左テンプレート

<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i363189/" alt="i363189" width="80" /><div style="background:#eff8fb;padding:10px;font-size:14pt;">Aさんのセリフ

</div>

・右テンプレート

</div>

img src=　のところにそれぞれのアイコンURLを

background:　で背景を設定します。

width= で画像のサイズなどを調整してください。

サンプルでは枠をあらかじめ入れてますが、必要ならこちらで設定しても大丈夫です。

・上三角

・下三角

・右三角

・左三角

最初のborderで三角形の底辺幅を設定。

次のborder-で三角形の高さを設定します。

border-bottomで上向き、border-topで下向き、border-leftで右向き、border-rightで左向きを作れます。

・上吹き出し

-左テンプレート

-右テンプレート

・下吹き出し

-左テンプレート

-右テンプレート

<div style="padding:10px;background-color:#B1ED8B;font-size:12pt;width:80%;"><b>チャット欄</b></div><div style="border:15px solid transparent;border-top:15px solid #B1ED8B;width:0%;margin-right:15px;"></div><img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i363190/" alt="i363190" width="80" /></div>

幅や吹き出し位置、フォントサイズ、などなど変更してみてください

・フロートパラメータ

<div style="width:148px;height:148px;border:dashed 1px #FF0000;float:left;">ボックス1フロートあり。

</div><div style="width:148px;height:148px;border:dashed 1px #FF0000;float:left;">ボックス2フロートあり。

</div><div style="clear:both;"> 　

</div>

<div style="width:148px;height:148px;border:dashed 1px #FF0000;">ボックス1フロートなし。

</div><div style="width:148px;height:148px;border:dashed 1px #FF0000;">ボックス2フロートなし。

</div>

・左吹き出し+画像

・右吹き出し+画像

なお、アイコンを丸くするとチャットっぽく見えます。

3.ライン風

宛先

</div><div style="background:#849ebf;">

</div>

全体をdivで囲って背景色を変えています。

色や画像を追加してもいいですね。スタンプなんかも有効です。

4.Twitter風

<div style="width:12%;margin:0px;float:left;"><img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i363191/" alt="i363191" /></div><div style="width:86%;margin:0px;float:left;padding-top:2%;padding-left:2%;font-size:1.2em;"><b>夕月悠里＠とある割烹芸人</b><span style="color:rgb(116,132,146);font-size:.8em;">@yuyu_narou　1h</span>

割烹なう

とある割烹芸人のテンプレート　～活動報告を攻略するためには雛形作成が欠かせません！～『チャットノベルを作ろう』 <span style="color:rgb(0,136,220);"><a href="https://ncode.syosetu.com/n8832fg/9/"> https://ncode.syosetu.com/n8832fg/9/ ncode.syosetu.com/n8832fg/9/</a> #narou #narouN8832FG</span>

</div><div style="clear:both;"></div>

布団がふっとんだ

</div><div style="clear:both;"></div>

え、なんなの

</div><div style="clear:both;"></div>

テンプレはチャット風テンプレート置き場になります。

HTML参考エッセイ
1.	小説の背景を華やかにしませんか？ついでにコピペで使えるHTMLタグテンプレ作ってみた！
2.	「小説家になろう」におけるＨＴＭＬタグの使い方について
3.	【割烹を彩る】需要があるみたいなので作ってみました
4.	検索機能と活動報告の活用　～新作発見の効率化を目指して～活動報告で使えるHTMLタグについて　１回目活動報告で使えるHTMLタグについて　２回目活動報告で使えるHTMLタグについて　３回目活動報告で使えるHTMLタグについて　４回目活動報告で使えるHTMLタグについて　５回目活動報告で使えるHTMLタグについて　６回目活動報告のテキスト配置について　１回目活動報告のテキスト配置について　２回目
5.	挿絵のつけかた
6.	【活動報告から小説へアクセスできるようにしたい】
7.	ランキングタグとかHTMLとか何だか全然分かんないって作者ちょっと来てみ。一番簡単なことだけ教えるから
8.	活動報告で試してみよう
9.	小説を書くルール、活動報告リンクタグ、画像挿入について　～必要最小限のメモ～
10.	リンクタグの作成・作者のリンク・みてみんの画像関係
11.	カラーコードを知らない作者へ（作者退会）

割烹参考
1.	割烹芸人になろう
2.	割烹サンプル1
3.	みてみん割烹サンプル2
4.	割烹サンプル3
5.	割烹サンプル4
6.	割烹サンプル5
7.	ブログ風テンプレート置き場
8.	チャット風テンプレート置き場
9.	バトン参考置き場