# boltにて、日本語コメントの後の英語翻訳を改行して表示したい。

**URL:** <https://forum.onecomme.com/t/topic/2373>\
**Category:** 質問\
**Created:** [2025 年 6 月 26 日午前 11:50 UTC](https://forum.onecomme.com/t/topic/2373 "2025-06-26T11:50:36Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![yuzuchicch](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/yuzuchicch/32/1825_2.png) [@yuzuchicch](https://forum.onecomme.com/u/yuzuchicch)\
**Post date:** [2025 年 6 月 26 日午前 11:50 UTC](https://forum.onecomme.com/t/topic/2373/1 "2025-06-26T11:50:36Z")

</div>

## 対象

わんコメ/テンプレート

## 利用OS

Windows 11 Pro

## 利用バージョン: Windows、わんコメやOBSのバージョン

Windows: 11 24H2  
わんコメ： 7.2.1  
OBS: 0.0.0

## PRO版を利用していない

## 過去ログ確認

した

## ドキュメント確認

した

## 内容

わんコメのテンプレート「bolt」で、日本語＋英語翻訳で使用させて頂いているのですが、  
日本語の後の英語翻訳を、日本語の横では無く、日本語の下に（改行して）表示させるにはどうしたらいいでしょうか？  
現状では、日本語の横に英語翻訳が表示されるので、画面の大半をコメント字幕が覆ってしまっています。

---

<div class="post-metadata">

**Author:** ![shinkunoshizuku](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/shinkunoshizuku/32/913_2.png) [@shinkunoshizuku](https://forum.onecomme.com/u/shinkunoshizuku)\
**Post date:** [2025 年 6 月 27 日午前 6:16 UTC](https://forum.onecomme.com/t/topic/2373/2 "2025-06-27T06:16:20Z")

</div>

> [@yuzuchicch](#):
>
> 日本語の後の英語翻訳を、日本語の横では無く、日本語の下に（改行して）表示させるにはどうしたらいいでしょうか？

CSSで簡単に済ませるのであれば、以下のようなCSSの追加（カスタムCSSへの追記で十分です）が考えられます。

```auto
.origin {
  display: inline;
}

.t {
  display: block;
}

```

ただこのCSSを使った場合は、改行は実現するものの、

- 日本語
- 英語
- 空白の行

といった形になってしまうため美しくなく、余計な高さも取ってしまう欠点があります。

* * *

一方で、boltに限らずですが、テンプレートをコピーしcustomフォルダに入れたうえでCSSはいじらずindex.htmlとscript.jsを変更するのであれば、変更が面倒ではありますが上記CSSの欠点はなくなります。

細かな実装方法はお任せしますが、

index.htmlは

```html
<div class="comment-text">
  <span class="origin" v-if="comment.data.commentOriginHtml" v-html="comment.data.commentOriginHtml"></span>
  <br v-if="comment.data.translated">
  <span class="t" v-if="comment.data.translated" v-html="comment.data.translated"></span>
</div>

```

script.jsは

```js
extractOriginAndTranslation(html) {
  const div = document.createElement('div');
  div.innerHTML = html;
  const originSpan = div.querySelector('span.origin');
  const tSpan = div.querySelector('span.t');
  return {
    origin: originSpan ? originSpan.outerHTML : '',
    translated: tSpan ? tSpan.outerHTML : ''
  };
}

```

```js
// originとtranslatedを抽出して格納
const result = this.extractOriginAndTranslation(comment.data.comment)
// 翻訳がない場合は全体をoriginとして扱う
comment.data.commentOriginHtml = result.origin || comment.data.comment
comment.data.translated = result.translated

```

といった追記や書き換えを行うことで、ご希望の改行結果が余計な行を表示させることなく実現できています。

* * *

上記コードでの実装サンプルとしては、以下テンプレートを参考にしてみてください。

[https://nvl-game.tokyo/uploads/onecomme/templates/bolt-forum-2373.zip](https://nvl-game.tokyo/uploads/onecomme/templates/bolt-forum-2373.zip)

---

<div class="post-metadata">

**Author:** ![yuzuchicch](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/yuzuchicch/32/1825_2.png) [@yuzuchicch](https://forum.onecomme.com/u/yuzuchicch)\
**Post date:** [2025 年 6 月 27 日午後 12:46 UTC](https://forum.onecomme.com/t/topic/2373/3 "2025-06-27T12:46:09Z")

</div>

shinkunoshizuku様

アドバイスありがとうございます。  
僕はHTMLさえ分からないのですが、お教えの通り、index.htmlを比較して、ここかな？と思う所に流し込み、script.jsはよく分からなかったので、zipのものをそのまま使用させて頂いて、テストで動かしてみた所、無事、日本語の後改行して英語表記されました。

素早く丁寧に対応して頂き、誠にありがとうございました！

 ![Desktop Screenshot 2025.06.27 - 21.43.51.70](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/e/e945f81bbc2141b77bd6aaaed09d13399ba18851.jpeg)

---

<div class="post-metadata">

**Author:** ![burikiyasan](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/burikiyasan/32/885_2.png) [@burikiyasan](https://forum.onecomme.com/u/burikiyasan)\
**Post date:** [2025 年 6 月 27 日午後 12:46 UTC](https://forum.onecomme.com/t/topic/2373/4 "2025-06-27T12:46:40Z")

</div>

私が使用しているやり方は style.css の最後に  
/_改行_/  
.t::before { content: “\A” ;  
white-space: pre; }  
.t { word-break: break-word; }  
/_( ）を外す_/  
.par { display: none; }

を追加して利用しています。

---

<div class="post-metadata">

**Author:** ![yuzuchicch](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/yuzuchicch/32/1825_2.png) [@yuzuchicch](https://forum.onecomme.com/u/yuzuchicch)\
**Post date:** [2025 年 6 月 27 日午後 12:47 UTC](https://forum.onecomme.com/t/topic/2373/5 "2025-06-27T12:47:23Z")

</div>

ありがとうございます！

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/1/1d7fddb2644907a48a3e9213ff080fa3a038589d.svg) [@system](https://forum.onecomme.com/u/system)\
**Post date:** [2025 年 6 月 28 日午後 12:48 UTC](https://forum.onecomme.com/t/topic/2373/6 "2025-06-28T12:48:09Z")

</div>

このトピックは最後の返信から 24 時間が経過したので自動的にクローズされました。新たに返信することはできません。