[OBS] キャスコメ欄用カスタムCSS: ユーザーアイコン (サムネ)

ユーザーアイコンに外枠

以前、『ツイキャスのコメント欄を表示 (サムネ付きで)』で、ツイキャスの「ツール・ゲームズ配信ページ」にあるURLを使って、配信のコメント欄をOBSで表示する方法をメモしましたが、コメント欄にコメントをしたユーザーのアイコンを表示させるのにはOBSでソースにカスタムCSSを加える必要があります。

今回はOBSでツイキャスのコメント欄にアイコンを表示させる時に使えるCSSコードをいくつかここにメモしておきます。



1. ユーザーアイコン (サムネ)の表示

コメント欄の表示には「ツール・ゲームズ配信ページ」からコピーしたコメ欄表示用のURL (👉別のメモ内の③マーク参照)を使います。 でも、このURLのページに標準設定されているCSSには、ユーザーアイコンの画像を囲っているアンカータグ<a>のクラス名「.tw-commnet-item-icon」に「display: none;」が設定されているので、アンカータグとその子要素のアイコン画像が非表示になっています。

次のコードをカスタムCSSに追加してアンカータグのクラス名に設定されている非表示設定を無効にします。

.tw-comment-item-icon{
  display: unset !important;
}
アイコン非表示設定無効用CSSコード

例１: 標準設定アイコン

ユーザーアイコンを表示させた場合、標準設定だとアイコンは例１の様に半径16ピクセルの円形で、各コメントの左横に表示されます。

ツイキャスのユーザーアイコンは 320x320ピクセルの正方形でサーバー側に保存されているみたいですが、標準設定のCSSの場合、アイコン画像を表示するイメージタグ＜img＞で 32x32ピクセルの大きさに指定される上に、「border-radius」プロパティによって画像の四隅の角の丸みの半径が16ピクセル (16px) と丁度、画像の縦横の半分の長さに設定されているので直径32ピクセルの丸いアイコンとして表示されます。


2. アイコンの角丸の調整

次のCSSはコメ欄表示用URLに標準設定されていると同等のアイコンの角丸を設定するCSSになります。アイコンを表示するイメージタグにはクラス名が指定されていないので、セレクタには「.tw-commnet-item-icon > img」を使っています。

.tw-comment-item-icon > img{
  border-radius: 16px;
}
角丸変更用CSSコード
例２-１:
角丸 16px (標準設定値) border-radius: 16px; (標準設定値)
border-radius: 8px; border-radius: 8px;
border-radius: 4px; border-radius: 4px;
border-radius: 0px; border-radius: 0;
border-radius: 50%; border-radius: 50%;
border-radius: 30%; border-radius: 30%;

「border-radius:」の右にある標準設定値の「16px」を別の値に変更してカスタムCSSに追加すると例２-１の様にアイコンの角丸の半径を変える事が出来ます。

値が「0」の場合は角丸は無効になって、表示されるアイコンは四角になります。

また、この値はパーセント(%)でも指定出来て、値が「50%」の場合は角丸の半径が画像の半分になるので「16px」の場合と同じ様に表示されるアイコンは円形になります。

例２-２:
border-radius: 8px 0px; border-radius: 8px 0;
border-radius: 4px 12px; border-radius: 4px 12px;
border-radius: 12px 8px; border-radius: 12px 8px;

又、値を2つにする事で、対になる角丸の半径を別々に設定出来ます (例２-２)。

この場合、左の値が左上(↖)と右下(↘)の角丸、右の値が左下(↙)と右上(↗)の角丸の半径を指定します。

例２-３:
border-radius: 0 4px 8px 16px; border-radius: 0 4px 8px 16px;
border-radius: 2px 12px 4px 8px; border-radius: 2px 12px 4px 8px;

値が4つの場合は、各角丸の半径を別々に設定出来て、左上(↖)から時計回りで、右上(↗)、右下(↘)、左下(↙)の順で角丸の半径を指定します。

例２-４:
border-radius: 4px / 16px; border-radius: 4px / 16px;
border-radius: 8px / 16px; border-radius: 8px / 16px;
border-radius: 16px / 8px; border-radius: 16px / 8px;

これまでは各角丸の半径は固定でしたが、2つの値の間に「/」を加えると、可変半径になります。

この場合、右の値は水平方向 (⇕) 、左の値は垂直方向 (⇔) の角丸の半径を設定します。

例２-５:
border-radius: 0 4px 8px 16px; border-radius: 0 4px 8px 16px;
border-radius: 2px 12px 4px 8px; border-radius: 2px 12px 4px 8px;

値が4つの場合は、各角丸の半径を別々に設定出来て、左上(↖)から時計回りで、右上(↗)、右下(↘)、左下(↙)の順で角丸の半径を指定します。


3. アイコンサイズの調整

標準設定のCSSでは、アイコンの大きさはアイコンの角丸の設定と同じセレクタで、「width (幅)」と「height (高さ)」のプロパティで 32ピクセルに設定されています。

.tw-comment-item-icon > img{
  border-radius: 16px;
  height: 32px;
  width: 32px;
}
アイコンサイズ変更用CSSコード (太文字部)
例３:
32x32 アイコン (標準設定値) height: 32px; width: 32px;
(標準設定値)
height: 48px; width: 48px; height: 48px; width: 48px;
border-radius: 50%; height: 48px; width: 48px; height: 48px; width: 48px;
border-radius: 50%;
border-radius: 50%; width: 48px; width: 48px; border-radius: 50%;

なので、アイコンの縦横の大きさは上のCSS内の「width:」と「height:」の右にある値を変更してカスタムCSSに追加する事で変更できます (例３参照)。

でも、標準設定の場合は角丸 (border-radius)の値が 16ポイントなので、そのままだとアイコンサイズを大きくするとアイコンは角が丸い四角になります。 なので、アイコンサイズを変更する場合は、必要に応じて角丸の半径を調節する必要があります。

因みに、角丸の半径をパーセント値で指定する場合はアイコン画像の割合になるので、「border-radius: 50%;」を設定した場合、実際に表示されるアイコンはheight値とwidth値で指定される形が正方形の場合は正円形、長方形の場合は楕円形になります。


4. アイコン外枠

「.tw-commnet-item-icon > img」セレクタに「border」プロパティ設定をカスタムCSSに追加する事でアイコンの外枠を装飾する事も出来ます。

.tw-comment-item-icon > img{
  border-radius: 16px;
  border: 2px solid GreenYellow;
  height: 32px;
  width: 32px;
}
外枠設定用CSSコード (太文字部)
例４:
border: 4px solid GreenYellow; border: 4px solid GreenYellow;
border: 4px solid DeepSkyBlue; border: 4px solid DeepSkyBlue;
border: 4px dotted #ff0000; border: 4px dotted #ff0000;
border: 4px double hsl(0, 100%, 50%); border: 4px double hsl(0, 100%, 50%);
border: 2px double rgb(255, 0, 0); border: 2px double rgb(255, 0, 0);
border: 4px dashed crimson; border: 4px dashed Crimson;

「border」のフォーマットは:

border: [線の太さ]  [線の種類]  [色];

で、[色]は省略可能です。

線の種類は: 「dotted」、「solid」、「double」、「dashed」などが選べます。

dotted 点線
solid 実線
double ２重線
dashed 破線 (鎖線)

「double」に関しては、線の太さが3px以上でないと2重線が潰れて1本の線として表示されるみたいです (例:４の「border: 2px double rgb(255, 0, 0);」参照)。 また、配信の解像度によっては細かい装飾が上手く表示されない場合もあるので、実際の配信でどう表示されているか確認する事をお勧めします。

色の指定方法は英語名、16進法表記「#RRGGBB」や、argb()、 rgb()、hsl()、などの関数を使ったりのいくつかの方法がありますが、詳しくは、次のw3スクールのページを参照してください👉「CSSリーガルカラー」(英語版: 「CSS Legal Color Values」)。 因みに色の英語名での設定には同w3スクールの次のページが参考になります👉CSSカラー。

画面に表示される色を実際に確認して調節したい時は、w3スクールのカラ―ピッカーが便利です。

5. まとめ

このメモでは「.tw-comment-item-icon」と「.tw-comment-item-icon > img」のセレクターを使ったカスタムCSSでツイキャスのコメ欄表示用ページのユーザーアイコンを表示する方法を記載しました。

CSS設定をまとめると次の様になります。

.tw-comment-item-icon{
  display: unset !important;
  margin-top: 10px;
}
.tw-comment-item-icon > img{
  border-radius: 16px;
  border: 2px solid yellow;
  height: 32px;
  width: 32px;
}

アイコン表示には「display: unset !important;」設定は絶対に必要ですが、他のCSSプロパティの行は省略しても構いません。

一般的に、CSSはHTMLページが表示される前に読み込まれてブラウザーがどの装飾設定をどのタグに反映するかを判断します。 この時に、沢山の同じ様な設定がいくつもある場合はそれを処理するの時間が幾分かかってしまうので複雑なCSSがあるとパージの読み込みに少しの遅延が発生します。 なので、カスタムCSS内に、同じセレクターのCSS設定を違う波括弧内{}に分かれて複数存在するよりも、同じセレクターのCSS設定は同じ波括弧内{}にまとめると読み込み時の表示速度に改善が期待できます。


「margin-top: 10px;」は表示されるアイコンの上部に10ピクセル (10px) の余白を入れるCSS設定ですが、必要のない場合は省略しても構いません。



コメント

コメントを投稿