オーバーレイのカスタムCSSと!important

-

「メモ帳」と「kii-memo-dev」で公開しているツイキャスのコメント欄のオーバーレイ用のカスタムCSSについて、

「!important」を使わない方法はないですか?

という質問をいただいた事があるので、そんな質問への回答をここに置いておきます。


一般のWebコンテンツを制作する際には

『できるだけ「!important」を使わない方が良い』

と言われているので、いただいた質問はその言葉に沿った質問だろうと推測しますが、元になるのページのCSS設定で「!important」が既に使われている場合は「!important」を使わないとその設定を上書きする事が出来ないので、カスタムCSS上で「!important」を使わないといけないので使っている場合がほとんどです。

そもそも、カスタムCSSの様に、既に存在するページまたはオーバーレイなどのWebコンテントに追加で読み込むCSSを制作中に、

元のコンテントのCSSに「!important」が使われていなければ、後で読み込むCSSに「!important」を使わなくても済むのに。。。

となるので、必要が無いのなら『「!important」を使わない方が良い』と言われる由来になっているのだと思います。


付け加えて、オーバーレイ用のカスタムCSSの場合は、そのカスタムCSSが読み込まれる時点で、表示されるコンテンツはHTMLから読み込んだDOMをグラフィックへとして処理されます。

グラフィックに処理されるとこれ以上CSSを読み込む事は出来ない為、オーバーレイのカスタムCSSで「!important」を使っても使わなくてもその後で影響を受ける人はとても限定的になります。 多分、表示に使うアプリの開発者が、アプリが処理出来ないので「!important」を使って欲しくない。。などとなる位でしょうか？


一方で、一般的なWebコンテンツの場合は表示されているWebコンテンツにCSSを加えて変更を加えたいという場合もあるので「!important」は使わない方が良いと言われているはずです。



[追記]

誤解が無いように書いておきますが、不必要な「!important」は使わない方が良いと思います。



コメント

コメントを投稿

このブログの人気の投稿

『コメ欄』用カスタムCSS - L◯NE風 (ツイキャス)

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

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

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

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

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

キャスポケットツール: 検索の巻

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

[カスタムCSS] コメントを逆の順番で表示 (ツイキャス/YouTube)

-
主にOBSの設定についてやツイキャス用のカスタムCSSを公開している別サイト、 『 kiiのメモ帳 』 で、配信のコメント欄のコメントを逆の順序で表示できないかという質問がありました。 ツイキャスだと新しく投稿されたコメントはコメント欄の一番上に表示されて、新しいコメントから順に上から下に表示される仕様になっています。 コメントを逆順で表示した場合、新しくコメントが頻繫に追加されてコメント欄が動いている場合はまだ良いのですが、動いていない場合だと上下にあるコメントのどちらが新しいのか紛らわしくなってしまいます。 そういう理由で 『kiiのメモ帳』 で公開しているカスタムCSSにはコメントの表示の順番を逆にするオプションは付けていません。 でも、これはあくまでも個人的なこだわりで、逆の順番で表示する事で個性を出したいと思う人もいるかもしれないので、上記の質問の解答をここに記事としてメモしておきます。 [ 目次 ] ツイキャスのコメントオーバーレイ YouTubeのコメントオーバーレイも逆の順番で ツイキャスのコメントオーバーレイ ツイキャスのコメント欄の場合は、「tw-comment-list-view__scroller」クラスのDIVタグの下にある無名のDIVタグの中にコメントが並ぶレイアウトになっています。 (👉「 ツイキャスのコメント欄の構造 (メモ帳) 」) なので、 既存のカスタムCSSの最後に次のCSSを加えると コメントが逆の順番で (新しいコメントが一番下に) 表示される様になるはずです。 . tw-comment-list-view__scroller > div { display: flex; flex-direction: column-reverse; height: 100%; /* 最新コメントがはみ出ない様に必要 */ } . tw-comment-list-view__scroller { transform: none !important; /* 下へスライドするアニメーション効果を無効化 */ }
続きを読む

ツイキャス専門 『コメ欄』Lite (ライト)と『コメ欄』✚ (プラス)

-
イメージ
ツイキャスのコメント欄をスマホに表示するアプリ、 ツイキャス専門店『コメ欄』 Lite ( ライト ) のAndroid版プレビューのテストリリ－スを開始。 [ 25/Oct/2021 追記] GoogleプレイストアでAndroid版を正式公開中です。 👉 ツイキャス専門 『 コメ欄 』Lite 追々記: 従来の『コメ欄』にいくつか機能を追加した 『コメ欄』 ✚ ( プラス ) のリリースに伴い、これまで公開していたAndroid版の 『コメ欄』 を ツイキャス専門『コメ欄』 Lite ( ライト ) に名変しました。 『コメ欄』✚ (プラス) 『コメ欄』 ✚ ( プラス ) (v0.3.x) はアプリ内表示モードの背景に動画を選択できる他、５つのシーンを切り替えて使う事が出来ます。 (👉 0.3.x サポートページ ) iPhone/iPad版 by BIBO-HQ Android版 by kii_memo_jp ツイキャス専門『コメ欄』Lite (ライト) 『コメ欄』 Lite ( ライト ) (v0.1.x) は『コメ欄』✚よりも機能が少ない分、インストールに必要なストレージも比較的少なくて済むライト仕様となっています。 (👉 0.1.x サポートページ ) Android版は
続きを読む