Twitter風割烹作成くん

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

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

## 基本

Twitter風割烹は文字通りTwitterぽい割烹を作るためのものです。チャット小説風割烹と同じ手順で3ステップで作ることができます。

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

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

3. ツイッター風割烹エディターでTwitter風割烹を作成する。

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

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

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

画像切り抜き君

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

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

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

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

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

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

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

キャラクター登録君

https://k-editor.com/chat/tweet/character2/

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

名前と@の後のやつ、アイコンURLを入力します。アイコンURLは以下のをコピペしてください。(コピペのみ反映されます)

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

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

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

### 3. ツイッター風割烹エディターでツイッター風割烹を作成する。

ツイッター風割烹エディター

https://k-editor.com/chat/tweet/kappo/

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が直ると信じています。

### コード説明

ツイートの構造としてはこうなります。

<div style="border-top:1px solid rgb(116,132,146);"></div>

<div>

　<div><img></div>

　<div><b>名前</b><span></span>

　　<div>テキスト</div>

　</div>

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

</div>

<div style="border-top:1px solid rgb(116,132,146);"></div>

ちょっと複雑ですが、上下に区切り線を入れてその中にツイートを入れてます。画像ブロックと名前、テキストブロックはfloatで横並びにしています。回り込ませる順番とかブロックを考えてこうしてます。そのあとに回り込みを解除させてます。

リンクを有効化するなり、ハッシュタグの色を変えるなりカスタマイズすることもできますが、めんｄ……、需要があるかどうか知らないのでやってません。

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

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