チャット小説風割烹作成くん

今回はチャット小説風割烹の使い方とどんなふうにカスタマイズができるか説明していきます。

URL : https://k-editor.com/chat/

## 基本

チャット小説風割烹は文字通りチャット小説風の割烹を作るためのものです。他のテンプレートとは使い方がちょっと異なるので注意してください。手順としては3ステップ。

1. 画像切り抜き君でアイコンを作成する。(スキップ化)

2. キャラクター登録君でキャラクターを登録する。

3. チャット小説割烹エディターでチャット割烹を作成する。

最初にアイコン画像を作ります。これはスキップできます。すでに作っている人は次へ進みます。そのあと使用するキャラクターを登録します。登録といってもブラウザに保存されるだけです。サーバーには保存されません。

最後にチャット小説割烹エディターを使って登録したキャラクターによるチャット小説割烹を作成します。それぞれ詳しく説明します。

### 1. 画像切り抜き君でアイコンを作成する。

画像切り抜き君

https://k-editor.com/chat/icon/

これは画像を〇型に切り出し、サイズ縮小できるものです。すでにアイコンがある人はスキップ可です。

切り抜きたい画像を選択して、それを丸型に切り抜くだけの機能です。

こんな感じにやってくれます。画像はサーバーにはアップロードしていなくて各自の端末で処理させてます。

作ったものはみてみんにアップロードしましょう。

使いたいキャラクターをみてみんにアップロードしましょう。アップロードできたら次に進みます。

### 2. キャラクター登録君でキャラクターを登録する。

キャラクター登録君

https://k-editor.com/chat/character/

キャラクターのアイコンができたので、キャラ設定を作ります。キャラクター登録ボタンを押すと以下の画面が出てきます。

識別名と文字色、背景色、吹き出し向き、アイコンURLを入力します。アイコンURLは以下のをコピペしてください。(コピペのみ反映されます)

保存ボタンを押すとキャラクター登録されます。使いたいキャラクター分だけ登録します。

不要であれば削除ボタンで消すことができます。

現在は10人まで登録できます。なおこれはブラウザに保存しているので別端末では反映されません。別端末で使う場合は同様にキャラクター登録してください。

### 3. チャット小説割烹エディターでチャット割烹を作成する。

チャット小説割烹エディター

https://k-editor.com/chat/chatnovel/

3のチャット小説割烹エディターへ進みます。

以下の画面が出るので、吹き出し、または地の文を追加してチャット文を作ります。

吹き出しを追加するとこんな画面になります。キャラクター登録君で登録したキャラクターが表示されます。

設定したキャラクターの追加ボタンを押すとエディターに追加されます。

iconと吹き出しがエディターに追加されるので会話文は吹き出しに直接書き込みます。

基本的には

1. 吹き出しまたは地の文追加

2. 文章を書き込み

を繰り返すだけです。特に難しくはないと思います。間違えたら削除ボタンで該当の吹き出し、地の文を削除できます。

なお、地の文には枠線がありますが、割烹では消えます。編集の時に分かりにくいので付けてます。

並べ替えがしたい場合は並べ替えモードにして灰色のところをドラッグ＆ドロップすると並べ替えできます。

適当に追加していってください。

### コード出力

全部書き終えたらページの下にある”押すとなろう用に変換される”ボタンを押してください。

そうするとテキストボックスにコードが出力されるのでそれを活動報告に張り付けましょう。

こんな感じになります。

### 使用上の注意

ス(・)マ(・)ホ(・)版(・)の(・)編(・)集(・)ペ(・)ー(・)ジ(・)（作者だけが見られるページ）での表示は崩れます。

なんでかというとこんなCSSが当たってるからです。

@media (orientation: portrait)

.blogpreview img, .ranktagpreview img {

max-width: calc(100vw - 40px) !important;

height: auto !important;

}

スマホ版の活動報告の作者ページでは画像は約300pxくらいまで表示されるようになります。このせいで表示がずれます。

ス(・)マ(・)ホ(・)版(・)の(・)読(・)者(・)が(・)見(・)ら(・)れ(・)る(・)ペ(・)ー(・)ジ(・)（読者が見るページ）ではきちんと表示されます。

〇PC版作者ページ

〇PC版読者ページ

×スマホ版作者ページ

〇スマホ版読者ページ

作者以外は問題なく見られるので安心して使ってください。多分そのうちユーザーページのリニューアルがあると思うのでそれCSSが直ると信じています。

### コード説明

吹き出しは主に3つの部分から構成されています。（画像はなくても可）

構造としてはこうなります。

<div><img /></div>

<div></div>

<div>コメント</div>

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

3つの部品を並べているだけです。clear:both;で回り込み解除してます。コツとしてはwidth:を相対値にしてPCやスマホである程度見た目がキレイになるようにそれぞれの幅を調整しています。

-　-　- ✂切り取り✂ -　-　-

ということでチャット小説風割烹作成くんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。