# 投稿されたコメントの改行をわんコメに反映したい **URL:** \ **Category:** カスタマイズ\ **Created:** [2022 年 6 月 22 日午前 2:00 UTC](https://forum.onecomme.com/t/topic/405 "2022-06-22T02:00:42Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![F\_allen\_A\_ngel](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/f_allen_a_ngel/32/2648_2.png) [@F\_allen\_A\_ngel](https://forum.onecomme.com/u/F_allen_A_ngel)\ **Post date:** [2022 年 6 月 22 日午前 2:00 UTC](https://forum.onecomme.com/t/topic/405/1 "2022-06-22T02:00:42Z")
お世話になっております。 アプリバージョンは3.1.6、テンプレートはlineを使用しております。 配信プラットフォームは主にツイキャスです。 デフォルトだとコメント投稿者が改行を含んだコメントを投稿したとしてもわんコメのテンプレート上では改行されずに表示されているものと思います。 これを、改行を維持した状態でテンプレート上に表示することは可能なのでしょうか。 ツイキャスのデフォルトのコメビュのCSSで言うところの、 .tw-comment-item-comment br { display: block !important; } を実装したいと考えております。 CSSのどこに手を加えればいいのか、ご教示いただけましたら幸いです。 また別件ですが ・lineのテンプレートにコメント投稿日時（〇〇/〇〇 〇〇:〇〇のような）を横に入れたり吹き出しの下に入れる方法 ・テンプレートの名前の横に、ツイキャスの名前の横に投下ポイントにより表示される★やメンバーシップバッジを入れる方法 の2点も探しております。 冒頭の改行の件も含め、わんコメで対応できるかどうか自体わかっていない状態の質問で、失礼を承知で誠に恐縮ではございますが、不可能・出来ない場合は出来ないというご回答でもいいので何卒よろしくお願いいたします。 ---
**Author:** ![hyk](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/hyk/32/75_2.png) [@hyk](https://forum.onecomme.com/u/hyk)\ **Post date:** [2022 年 9 月 8 日午前 10:10 UTC](https://forum.onecomme.com/t/topic/405/2 "2022-09-08T10:10:04Z")
![午後7時10分追記：CSSでもできるっぽいのでこれは参考までに……](https://placehold.jp/30/000000/fefb00/1000x60.png?text=%E5%8D%88%E5%BE%8C7%E6%99%8210%E5%88%86%E8%BF%BD%E8%A8%98%EF%BC%9ACSS%E3%81%A7%E3%82%82%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%A3%E3%81%BD%E3%81%84%E3%81%AE%E3%81%A7%E3%81%93%E3%82%8C%E3%81%AF%E5%8F%82%E8%80%83%E3%81%BE%E3%81%A7%E3%81%AB%E2%80%A6%E2%80%A6) > [@F\_allen\_A\_ngel](#): > > 改行を維持した状態でテンプレート上に表示 少々強引＆ **CSSじゃない** ＆手元のOBSではバージョンの問題かエラーが出てテンプレートが不動化したのですが、一応メインのこれにかんして１つ反映に成功したので投稿しておきます。 1. テンプレートを複製しておく。 2. 複製したテンプレートのindex.htmlをエディタなどで開き、comment.data.commentを探す 3. 赤下線部を追記する。（文字列は後述） ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/optimized/1X/6df878cb7e816106dba9152089833f08b6fb87cc_2_690x41.png) 4. 保存する ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/1X/c2f53bc9e2514c63e9bd64304d9fef60f7fec3ca.png) 追加した文字列 ```js .replaceAll('\n', '
') ``` テンプレートの複製に関してはこちらを御覧ください：[https://onecomme.notion.site/OBS-3-2-adaf4842b962453ab805fd9602eefd12](https://onecomme.notion.site/OBS-3-2-adaf4842b962453ab805fd9602eefd12) ---
**Author:** ![F\_allen\_A\_ngel](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/f_allen_a_ngel/32/2648_2.png) [@F\_allen\_A\_ngel](https://forum.onecomme.com/u/F_allen_A_ngel)\ **Post date:** [2022 年 9 月 15 日午前 9:21 UTC](https://forum.onecomme.com/t/topic/405/3 "2022-09-15T09:21:41Z")
ご回答いただきありがとうございます 改行についてCSSじゃない方法で動作を確認することができました ありがとうございました！ ちなみに「参考までに」と追記いただいたCSSでの方法というのが見受けられなかったのですが、どこかに追記いただいたでしょうか？ ---
**Author:** ![hyk](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/hyk/32/75_2.png) [@hyk](https://forum.onecomme.com/u/hyk)\ **Post date:** [2022 年 9 月 15 日午後 1:13 UTC](https://forum.onecomme.com/t/topic/405/4 "2022-09-15T13:13:53Z")
あ、すみません。この方法が（テンプレートの改造が必要ということで）参考までに……というかんじでした。 この追記についてですが、その時私が別所で相談したところ、CSSでやるんなら`white-space`かなとアドバイスを受けたのですが、それでの実現方法が私にわからなかったため「できるらしいですよ〜」とだけ追記し、そのままになっている感じですｗ（カスタムCSS出できたほうがテンプレートのアップデートに何もせずに追従できる可能性が高いため、そちらでできるに越したことはないですし）。一応、参考ページを貼っておきますね。 > **[white-space - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/white-space)** > > white-space は CSS のプロパティで、要素内のホワイトスペースをどのように扱うかを設定します。 ---
**Author:** ![F\_allen\_A\_ngel](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/f_allen_a_ngel/32/2648_2.png) [@F\_allen\_A\_ngel](https://forum.onecomme.com/u/F_allen_A_ngel)\ **Post date:** [2022 年 9 月 15 日午後 5:35 UTC](https://forum.onecomme.com/t/topic/405/5 "2022-09-15T17:35:05Z")
ご回答いただきありがとうございます なるほどwhite-spaceという手があったかと思い試したところ ```auto .comment-text { white-space: pre-wrap; } ``` をOBSのブラウザソースのカスタムCSSに置くことで、無事CSS内で改行を実現することができました。 white-spaceに気づかせていただきここまでたどり着けることができました。 ほんとうにありがとうございます！