テンプレートを斜めに表示したい(全体を傾けて表示したい)

対象: わんコメ
表示画面: OBS
利用OS: Windows
利用バージョン: わんコメのバージョン3.2.9
過去ログ確認: した
ドキュメント確認: した
内容: 今自分で用意している配信画面で、コメントを表示する枠を斜めにデザインしたのですが、
それに合わせてテンプレートを斜めにしようとしたらやり方がわかりませんでした。
もし斜めにするやり方があれば教えていただけたら助かります。よろしくお願い致します!

ご質問ありがとうございます。

スタイルシートを使って、
「コメント文字をボックスごと丸々斜めに傾ける」などの方法はあるかと思いますが、
おそらくイメージされているのは、

コメント3
 コメント2
  コメント1

のように、コメントの角度は横方向のままで、コメントの並びやスクロールの方向は斜めにしたい、といった感じなんじゃないかと思います。

「斜め方向」というのはHTML(?)的にあまり想定されてない実装となり、
(また、一行でうまくいっていても、長文でコメントが複数行になる場合にデザインが崩れる等といった問題もあるかと思いますので、)
やろうと思うと結構大変かなと思います。


その上で、斜めのイメージにもいろいろとあると思いますが、
(加えて実装方法も色々ある中と思いますが)【一例】としまして、
・スタイルシートなどで、長文コメントであっても必ず一行表示になるようにする。
・スタイルシートの行番号指定で、2行目は10px左にずらす、3行目は20px左にずらす・・・といった感じでポジションが階段状になるように、十分な行数になるまで設定を記述しておく。
などの組み合わせでそれらしい動きにはなるのではないかと思います。

具体的な記述などに関しましては、食指が動くようでしたら、詳しくは検索などで調べて挑戦してみていただき、また、実現できましたら当フォーラムのカスタマイズのカテゴリにて方法のシェアなどいただけますと幸いです :paw_prints:

⇐左のみっく配信画面質問用2
回答ありがとうございます!
イメージしてるのは画像のような感じで、全体的に斜めに傾いている感じです。
言葉だとわかりにくくてすみません :pray:

1 Like

なるほど、
単に傾けるだけでしたら、CSSでtransform: rotate()を掛けるだけで可能ですが、
そのままだと「見切れ」が発生するので、余白の設定も必要になり、この辺りは納得がいくまで調整する必要があると思います。

(カスタムCSSの一例)

body{transform: rotate( -15deg );width:50%;height:50%;margin:25%}

また、OBSのプラグインで、ソースの表示を回転可能にする「StreamFX」というものもある様ですので、そちらでも実現可能かと思います。(回転以外にも何かと便利な機能が充実しているとの事です)
むしろ同プラグインを導入しておけば、
【コメントに限らず】配信上の他のものの角度も調整も可能になりますので、他に斜めにしたい表示物を思いつかれた際にもそのまま実現できるようになりますので、長い目で見るとプラグインで対応いただく方が良いかもしれません。

1 Like

CSSへの組み込み方がわからず、プラグインを導入することにしました :sweat_smile:
そしておかげさまで無事に斜め化することができました!
有益情報ありがとうございます、本当に助かりました :bowing_man: :bowing_man:

1 Like

その後定例でも取り上げていただけました、
【追加情報】としまして、
「OBSの標準機能でも角度を調整できる」ようです(OBSバージョン28?)

→リンク先最初はOBSプラグインでの角度変更の話しからですが、途中からOBS標準機能での変更の話になり実演もされています(実演は再生時計30分前後くらいから)

参考まで:paw_prints:


>CSSへの組み込み方がわからず

こちらも参考まで、
テンプレートのカスタマイズでいずれ触れられる機会があるかもしれませんので、ご興味お時間のある時にでもどうぞ :paw_prints:

1 Like

ご丁寧にありがとうございます :face_holding_back_tears:アーカイブ見たらすぐにできました!
cssもおいおい勉強していきます(ありがたや~ :pray:)

1 Like

トピッククローズ:問題解決のため。


コメント:検索用にトピックタイトル加筆修正しました。