test-page-twitter-css

ツイキャス用のコメント欄オーバーレイの『ツイッター風カスタムCSS』を試作中。。

ツイッター風のカスタムCSS

/* 絵文字フォントの読み込み */
@font-face {
  font-family: 'Noto Color Emoji';
  src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}
body {
  font-family: 'Hiragino Kaku Gothic ProN','Hiragino Sans','メイリオ','Meiryo',system-ui,-apple-system,BlinkMacSystemFont,sans-serif,'Noto Color Emoji' !important;
}
body, #comment-list.app, .tw-comment-list-view__scroller {
  overflow: visible !important; /* 水平スクロールバーを表示させない設定 */
}
.tw-comment-window-page {
  padding: 0 !important;
}
@keyframes entry { /* アニメーションのフレーム設定 */
   0% { left: 100%; max-height:    0px; opacity: 0.0; }
  96% { left: -5%; max-height:  50px; opacity: 0.8; }
  98% { left: 0%;   max-height:  300px; opacity: 0.9; }
 100% { left: 0%;   max-height: 1000px; opacity: 1.0; }
}
.tw-comment-list-view__scroller >div {
  padding-left: 5%;
}
body[data-is-embedded=true]  .tw-comment-item {
  background-color: #fff !important; /* 背景色 */
  border-bottom: 1px solid #666; /* 区切り線 */
  padding: 1em 0 !important;
  /* アニメーション用の設定 */
  animation-name: entry;
  animation-duration: 1s;  
  animation-fill-mode: both;
  animation-timing-function: ease-out;
  max-height: 0px;
}
.tw-comment-item-comment br {
  display: block !important; /* コメント内の改行の有効化 */  
}
body .tw-comment-item-body {
  text-shadow:none !important; /* テキストの影を無効化 */
}

/* アイコン */
.tw-comment-item-icon {
  display: unset !important;
  margin-top: 5px;
  margin-right: 1em;
}
.tw-comment-item-icon img{
  height: 64px;
  width: 64px;
  border-radius: 50%;
}

/* ユーザー名 */
a.tw-comment-item-name:link,
a.tw-comment-item-name:visited,
a.tw-comment-item-name:hover,
a.tw-comment-item-name:active {
  color: #000 !important; 
}
.tw-comment-item-name {
  font-size: 12px !important;
  font-weight: 900 !important;
}

/* ユーザーID */
.tw-comment-item-screen-id {
  display: unset !important;
  color: #666;
}

/* サポートの星 */
.tw-comment-item-star {
  display: unset !important;
}

/* コメント */
.tw-comment-item-comment {
  color: #000 !important;
}

/* タイムスタンプ */
.tw-comment-item-date {
  display: block !important;
  color: #666;
}
.tw-comment-item-date::before {
  content: ' ';
  padding: 0 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.046 2.242l-4.148-.01h-.002c-4.374 0-7.8 3.427-7.8 7.802 0 4.098 3.186 7.206 7.465 7.37v3.828c0 .108.044.286.12.403.142.225.384.347.632.347.138 0 .277-.038.402-.118.264-.168 6.473-4.14 8.088-5.506 1.902-1.61 3.04-3.97 3.043-6.312v-.017c-.006-4.367-3.43-7.787-7.8-7.788zm3.787 12.972c-1.134.96-4.862 3.405-6.772 4.643V16.67c0-.414-.335-.75-.75-.75h-.396c-3.66 0-6.318-2.476-6.318-5.886 0-3.534 2.768-6.302 6.3-6.302l4.147.01h.002c3.532 0 6.3 2.766 6.302 6.296-.003 1.91-.942 3.844-2.514 5.176z' fill='%23666' /%3E%3C/svg%3E");
}
.tw-comment-item-date::after {
  content: '';
  padding: 0 160px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E
  %3Cpath d='M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767 0-1.06z m-10.66 3.28H7.26c-1.24 0-2.25-1.01-2.25-2.25V6.46l2.22 2.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768 0-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06 0l-3.5 3.5c-.294.292-.294.767 0 1.06s.767.293 1.06 0l2.22-2.22V16.7c0 2.068 1.683 3.75 3.75 3.75h5.85c.414 0 .75-.336.75-.75s-.337-.75-.75-.75z' fill='%23666' /%3E
  %3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E
  %3Cpath transform='translate(96, 0)' d='M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12z M7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z' fill='%23666' /%3E
  %3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E
  %3Cg transform='translate(96, 0)'%3E
  %3Cpath d='M17.53 7.47l-5-5c-.293-.293-.768-.293-1.06 0l-5 5c-.294.293-.294.768 0 1.06s.767.294 1.06 0l3.72-3.72V15c0 .414.336.75.75.75s.75-.336.75-.75V4.81l3.72 3.72c.146.147.338.22.53.22s.384-.072.53-.22c.293-.293.293-.767 0-1.06z' fill='%23666' /%3E
  %3Cpath d='M19.708 21.944H4.292C3.028 21.944 2 20.916 2 19.652V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 .437.355.792.792.792h15.416c.437 0 .792-.355.792-.792V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 1.264-1.028 2.292-2.292 2.292z' fill='%23666' /%3E
  %3C/g%3E
  %3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E
  %3Cpath transform='translate(96, 0)' d='M19.25 3.018H4.75C3.233 3.018 2 4.252 2 5.77v12.495c0 1.518 1.233 2.753 2.75 2.753h14.5c1.517 0 2.75-1.235 2.75-2.753V5.77c0-1.518-1.233-2.752-2.75-2.752zm-14.5 1.5h14.5c.69 0 1.25.56 1.25 1.25v.714l-8.05 5.367c-.273.18-.626.182-.9-.002L3.5 6.482v-.714c0-.69.56-1.25 1.25-1.25zm14.5 14.998H4.75c-.69 0-1.25-.56-1.25-1.25V8.24l7.24 4.83c.383.256.822.384 1.26.384.44 0 .877-.128 1.26-.383l7.24-4.83v10.022c0 .69-.56 1.25-1.25 1.25z' fill='%23666' /%3E
  %3C/svg%3E");
}

設定

: 下の設定はブラウザに一定期間保存される設定になっていますが、左のリセットボタンで既定値に初期化出来ます。
アニメーション効果:
コメント
コメント
コメント
コメント
コメント
色:
   


コメント欄サンプル

下は配色を確認する為のサンプル表示になります。 (上の設定を変更するとサンプルの表示が更新されます。)

アニメーション効果は反映されないのと、実際に表示されるパーツのサイズや位置は『コメ欄』や、OBSなどの実際に使う環境内で確認して下さい。

user icon
ユーザー名1 @c:user_id1
Star 1
ツイキャス サンプル コメント1
user icon
ユーザー名2 @c:user_id2
Star 3
ツイキャス サンプル コメント2、
ツイキャス サンプル コメント2、
ツイキャス サンプル コメント2


フッター

スクショで画像にとして保存した後、コメント欄の下に貼り付けてサイズを上手く調節出来ればそれっぽく見えるかと。


改善点

  • ✅ダークモ―ド?
  • ✅リツイート ()、 ライク ()、 シェア () のアイコンをどうにかうまく追加したい…
  • タイムスタンプを日付だけの表示の変更、又は何分前、何時間前の表示に変更するのはCSSだけでは難しい…
  • タイムスタンプの表示位置をユーザーIDの左に移動するのはCSSだけでは難しい…


コメント

コメントを投稿

このブログの人気の投稿

[お知らせ] キャスポケットツールの不都合 (2026/Jul/22頃から [解決済]

イメージ
追記: 2026/Jul/30 に公開されたキャスポケットツール Ver.0.0.40でこの不都合が解消されているはずです。 2026年7月22日 頃からAndroid/iOSアプリの「 キャスポケットツール 」の一部の機能で不都合が多発している様です。。 症状としては、 指定したユーザーのプロファイル情報を取得する場合 指定したユーザーのコメント欄の内容の表示 以外の機能で、403: FORBIDDEN エラーがほぼ高い確率で発生している様です。 (何度か繰り返す事で稀に本来の情報が表示される事はあるみたいです) 現在 ( 2026年7月25日 ) 公開されているキャスポケットツール (v0.039)は、 2025年末 に公開されたもので最近になってアプリのコード変更は行っていないので、ツイキャス側でAPIの仕様や設定が変更されて現在の不都合が発生していると考えられます。 アプリのアップデートで対応出来ないか調査中ですが、ツイキャスのサポートにも今回の不都合を説明するメッセージを送ったのでその返信にも期待したいと思います。 キャスポケットツールをご利用の皆様に不便をおかけしておりますことをお詫び申しあげます🙇 2026/Jul/27 : ツイキャスのサポートからの返事を待っています。 2026/Jul/29 : ツイキャスのサポートとのメールのやりとりの末、APIサーバー上のシステム更新が起因でアプリからサーバーへの接続時に不都合が生じていた事が分かりました。 キャスポケットツールをアップデートして近日中に公開して対応したいと思います。 2026/Jul/30 : 修正を加えたキャスポケットツール Ver.0.0.40をストアにアップロードして、 現在、 審査準備中なので 審査に問題がなければ近日公開 になります。 2026/Jul/30 : 修正を加えたキャスポケットツール Ver.0.0.40が Appストア と Google Playストア にて公...
Read more »

『コメ欄』用カスタムCSS - L◯NE風 (ツイキャス) - OBSのブラウザでも使えます。

イメージ
関連サイトの「 kiiのメモ帳 」で公開している『 L◯NEの会話画面風のツイキャスコメ欄カスタムCSS (シンプル版) 』ですが、 『 コメ欄 』のアプリ内表示モードでカメラ機能を使う場合に、吹き出しの背景に映る部分の画像が吹き出しの色と似ていると、コントラストの関係で吹き出し部と背景が同一化してしまうので、吹き出し部に 囲いの線 又は 色付きの影 のどちらかを追加で表示出来る様に変更してみました。 因みに以前のカスタムCSSでは、吹き出しの根元部は「◣」を使って再現していましたが、今回はカール付きで弧を描いているので少し再現度が向上しています。 このページの後方にある 設定 の部分で囲い線と影の他に、文字の大きさや色などをクリックでCSSをカスタマイズする事が出来ます。 カスタマイズ後は カスタムCSS の下にある CSSをクリップボードにコピー をクリックするとカスタムCSSがクリップボードにコピーされます。 [目次] 囲いの枠線と影の例 カスタムCSS LINE風 (コメ欄用) 設定 (Part-1) サンプル 設定 (Part-2) スマホアプリ 『コメ欄』での使用例 影を吹き出しの下方向に表示する方法 更新履歴 L◯NEの会話画面風のツイキャスコメ欄カスタムCSS シンプル版 @ メモ帳 (別サイト) x４バージョン : アイコンサイズ変更可 @ メモ帳 (別サイト) 幅細めバージョン : 狭い幅で表示したい時用 @ メモ帳 (別サイト) 『コメ欄』用カスタムCSS : 吹き出しの周りに枠線又は影の表示が可能 (このページ) 囲いの枠線と影の例 次に吹き出しに囲い線/影を設定した場合のコメント欄のスクショを例のとして貼っておきます。 囲い線と影の色は設定で、違う色にする事が可能なのと、ユーザー名やユーザーI...
Read more »

[お知らせ] キャスポケットツールの不都合 (2026年10月22日) 解決済?

イメージ
日本時間の 10月22日23時 に修正が公開されたPHPの深刻な虚弱性「PHP2Shell」に関連したツイキャスのメンテナンスで停止していたツイキャスの配信機能もほぼ24時間後の 22日22時 頃には再開した様です。 でも、 ツイキャス公式のX での 22/10/2026 付けの発表によると パプリックAPI を含む一部の機能はいまだに復旧作業が続いているそうです。 【サービス再開のお知らせ】 いつもツイキャスをご利用いただき、誠にありがとうございます。 昨日より実施しておりました緊急メンテナンスにつきまして、一部機能を除き、サービスを再開いたしました。 長時間にわたりサービスをご利用いただけない状況となり、皆様には多大なるご不便とご迷惑をおかけしましたことを、深くお詫び申し上げます。 なお、下記機能につきましては、引き続き復旧に向けた対応を進めております。 ・メンバーシップSTARのメディア再生 ・クリップ再生 ・Public API 等 今後も皆様に安心してご利用いただけるよう、サービスの安定性と安全性の確保に努めてまいります。 引き続きツイキャスをよろしくお願いいたします。 — ツイキャス公式 (@twitcasting_jp) October 22, 2026 https://x.com/twitcasting_jp/status/2113251611229237374 追記: 10月23日 午後 ツイキャス公式のXからはまだ発表はありませんが、パブリックAPIの機能は復旧した様です。 キャスポケットツール ツイキャス視聴・配信支援アプリの「 キャスポケットツール 」の機能は上記のツイキャスのパブリックAPIを利用している為、ツイキャスの復旧作業が全て完了するまでは正しく機能しないと予想されます。 日頃から同アプリをご利用されている方にはご不便をおかけしますが、ご理解のほどを宜しくお願いします 追記: iOS版のキャスポケットツールにおいて、『アプリのアップデート後にアプリが起動できなくなった』という不都合が現在のところ1例報告されていますが、一...
Read more »

[ツイキャス配信・閲覧支援ツール] キャスポケットツール: 初期設定

イメージ
ツイキャス配信・閲覧支援機能をいくつか搭載したアプリ、 『 キャスポケットツール 』 （ Android ｜ iOS ） を作ってみました。 ツイキャス のユーザーやライブ配信を検索する機能をはじめ、自分のサポート・サポーターを閲覧したり、気になるユーザーを登録してライブ配信の通知を有効にしたりする事が出来ます。 このアプリの機能を使うのには、 アプリを ツイキャスのアカウントに連携 する必要がある他、 Android 13とそれ以前 のAndroidでは、 バックグラウンド処理を有効 にすると、登録した「気になるユーザー」のライブ配信開始の通知を受け取れる確率が上がるので、 ここに『キャスポケットツール』を使うのに 最低限必要な初期設定 をメモしておきます。 [目次] キャスポケットツールの機能 初期設定 バックグラウンド処理の有効化 iOS Android 13とそれ以前のAndroid 備考 関連メモ #キャスポケットツール キャスポケットツール Android版 by kii_memo_jp iPhone/iPad版 by BIBO-HQ キャスポケットツールの機能 メイン画面 現時点では次の機能が搭載されていて、アプリのメイン画面から選択する事が出来ます。 ...
Read more »

[OBS] Twitchコメント欄向けCSSカスタマイザー (試作)

イメージ
( Twitch Chat Overlay CSS Customizer Prototype ) Chrome拡張機能の「 TwitchコメカスタムCSSテスター 」をChromeウェブストアで公開していますが、この拡張機能に読み込ませるテスト用のカスタムCSSも必要だと思ったので、Twichのコメント欄 (チャットオーバーレイ) 向けの簡単なCSSカスタマイザーをここに置いておきます。 このページでクリップボードにコピー出来るCSSを使うと、Twitchのチャット欄をポップアップして表示したコメント欄のURLを使って表示するオーバーレイを、マウス操作でカスタマイズする事が出来ます。 [目次] Twitchのコメント欄 (チャットオーバーレイ) カスタムCSS コメント欄サンプル 設定 更新履歴 TwitchコメカスタムCSSテスター サポートページ #Twitchコメカスタム   ( #ツイッチコメ欄カスタムCSS 、 #トイッチコメ欄カスタムCSS ) Twitchのコメント欄 (チャットオーバーレイ) Twitchのライブ配信をパソコンのブラウザで視聴する時にウインドウの右側に表示されるコメント欄を、「チャットをポップアウト」でポップアップすると https://www.twitch.tv/popout/ ユーザー名 /chat?popout= というURLでコメント欄が別のウインドウで表示されます。 配信ソフトの「OBS」のブラウザや、Chrome拡張機能の「 TwitchコメカスタムCSSテスター 」を使って、上記のURLにこのページのカスタムCSSを読み込ませて表示すると、標準のTwitchコメント欄とは違うレイアウトにカスタマイズして表示する事が出来ます...
Read more »

キャスポケットツール: 気になるユーザーリストの巻

イメージ
キャスポケットツール (Cas Pocket Tool) のメイン画面に表示される水色の「気になる」ボタンをタップすると開く「 気になるユーザーリスト 」の説明をここにメモしておきます。 この画面では、ツイキャスユーザーを最高10まで登録出来、アプリが開かれている状態であれば 約1分半毎の間隔 で登録されているユーザー情報が更新される仕様 ※ になっています。 この情報にはライブ配信の有無も含まれる為、設定画面で「ライブ通知」が有効になっていれば、ユーザーが配信を開始した場合は (たとえ無通知配信でも) スマホ/タブレットの画面に通知を表示する事が出来ます。 ※ : 現バージョンでは、原則としてアプリ画面が表示さている状態でないと更新が継続されない仕様になっています。 キャスポケットツールを別のアプリと一緒に使っている場合、別のアプリの画面を表示して、キャスポケットツールの画面が隠れた場合は、キャスポケットツールがバックグラウンドで処理される為、情報の更新の頻度が制限される場合があります。 Android: キャスポケットツールの設定画面で「バックグラウンド処理」を有効にして、デバイスの設定でキャスポケットツールの「バッテリーの最適化」を無効にするとキャスポケットツールがバックグラウンドでも更新が継続されます。 但し、Android 9 (API 28; Pie) 以降ではアプリの使用頻度によってバックグラウンド処理を制限する機能がある為、仕様頻度が低い場合はOSによって規制が入ってしまい、更新が停止する場合があります。 (改善予定🔰) iPhone/iOS: iOSの設定画面で、キャスポケットツールの「Appのバックグラウンド更新」を有効にすると、バックグラウンドでの更新が有効になりますが、更新頻度は短くても15分毎という規制があり、実際はOSによってもっと長い間隔に制限される様です。 (改善予定🔰) macOS: M1/M2シリコンのmacであれば、iPhone/i...
Read more »

キャスポケットツール: 検索の巻 (ツイキャスのユーザー検索とライブ検索)

イメージ
Googleプレイで公開中の キャスポケットツール の 検索機能 の説明をここにメモしておきます。 [目次] 検索結果の上限 ユーザー検索 ユーザー検索結果 ライブ配信検索 ライブ検索結果 関連メモ #キャスポケットツール キャスポケットツール Android版 by kii_memo_jp iPhone/iPad版 by BIBO-HQ 検索結果の上限 「 ライブ配信検索画面 」、又は、「 ユーザー検索画面 」の右上にあるアイコン「 」で検索結果の上限を選択できます。 右上にある「 」ボタンをタップすると検索結果の上限を、30、60、80、100の中から一つ選べます。 ユーザー検索 ツイキャスのユーザーをキーワードで検索する事が出来ます。 「検索キーワード」の欄にキーワードを入力した後に、キーパッド右下の [完了] 、 又は、 をタップすると (使っている日本語入力方法 (IME)によって多少異なります)、 「サ...
Read more »

アプリ開発備忘録: ① Android 15からはEdge-to-Edge表示が強制適用に (Part 1/3)

イメージ
少し前に手持ちのAndroid携帯の一つにシステムのアップデートが入ったのですが、それ以降、いくつかのアプリで、画面の上下の表示がおかしくなってしまいました。。。 実は、このアップデートでアンドロイドOSが「 アップサイドダウンケーキ 」(Android 14, SDK 34)から「 バニラアイスクリーム 」 (Android 15, SDK 35) に更新されて、Android 15からはアプリの表示がデフォルトで Edge-to-Edge (端から端まで) 表示 の仕様、つまり全画面表示になったのが原因でした。 (👉「📑 動作の変更点: Android 15 以上をターゲットとするアプリ 」) これまでもアプリを画面の端から端までの全画面で表示する「 没入モード 」という機能があったので、そのモードでの画面表示がデフォルトになったという理解に少し近いのですが。。。 実際はそうではありません。 没入モードの場合は、アプリが全画面で表示される以外に、「 システムバー 」と呼ばれる、画面の上部に表示される「ステータスバー (Status Bar)」と下部に表示される「ナビゲーションバー」の表示を必要に応じて表示/非表示に出来るほか、非表示の場合でもユーザーの操作によっては再表示される仕様になっています。 (👉「📑 没入モードのシステムバーを非表示にする 」) Status Bar と App Bar Android 15よりも前のOSでは 、没入モード以外では、アプリは全画面にではなく、 自動的に 上下のシステムバーの分が差し引かれた部分だけに表示される仕様になっていて、アプリの表示が上下のシステムバーに重なって表示される事がない様になっていました。 Android 15以降からは 、システムバーの表示/非表示に関係なく、アプリの表示サイズが端から端までの全画面表示になるので、必要に応じて、 インセット(Inset) 情報などを使ってアプリの表示コンテンツがシステムバーの表示と重ならない様に調整する必要があります。。。。。 ...
Read more »