当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【Vivaldi】タスクパネルの説明欄の透明度を薄くするCSS

カスタムCSS

Vivaldiのアイコン

この記事では、「Vivaldi(ヴィヴァルディ)」ブラウザのオリジナルカスタムUI機能を使って、タスクパネルの説明欄を薄くするCSSについて書きます。

本記事は、オリジナルカスタムUIが有効になっている前提です。詳しくは、こちらを参考にしてみてください。

【Vivaldi】タスクパネルの説明欄の透明度を薄くするCSS

本記事で紹介するCSSを使うことで、「Vivaldi5.5(2022年10月5日公開)」から追加されたタスクパネルの説明欄を任意の透明具合にできます。

通常は、下記画像のように、タイトルと説明欄の文字色が一緒になっています。人によっては、少し見にくいと思うかもしれません。

Vivaldi5.5から実装されたタスクパネルのスクリーンショット

そこで、説明欄を若干透明にして、一目でタイトルと説明を区別できるようにします。文字色を変更する方法も紹介します。

本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。

タスクパネル→「タスクを追加」で、タイトルを書きます。次に、リンクボタンをクリックします。説明欄があるので、ここに書き込みます。

Vivaldiタスクパネルで説明欄を追加する手順画像1

これで、タイトルと別で説明欄が追加されます。

Vivaldiタスクパネルで説明欄を追加する手順画像2

タスクパネルにある説明欄の透明度を薄くするCSS

以下のCSSになります。

/*タスクパネルの説明欄の透明具合*/
#tasks_panel .calendar-event .cal-event-body-content span {
  opacity: .6;
}

「opacity」が透明度です。0~1の間で指定できます。「0」が完全な透明です。「1」が通常=透明にしないということです。上記CSSは、「0.6」になっているので、ちょっとだけ透明になります。もっと薄くしたい場合は、数値を「0」に近くします。

上記のCSSを、テキストエディター(Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど)でファイルに書き込みます。

「Visual Studio Code」のスクリーンショット

Vivaldiを再起動して、タスクパネルを開きます。説明欄が、薄くなります。タイトルが目立つようになります。

Vivaldiのタスクパネルにある説明欄を透過させた比較画像

タスクパネルにある説明欄の文字色を変更するCSS

文字色を変更したい場合は、以下のCSSを使ってみてください。

/*タスクパネルの説明欄の文字色*/
#tasks_panel .calendar-event .cal-event-body-content span {
  color: #4e5cff;
}

上記CSSの「#4e5cff」の部分を、好きなHTMLカラーコードに置き換えてください。カラーコードは、こちらのサイトで調べられます。

これで文字色が変わります。透過するコードと併用できます。

Vivaldiのタスクパネルにある説明欄を別の色にした画像

感想

以上、「Vivaldi5.5」から実装されたタスクパネルの説明欄を透明・任意の色に変更するCSSでした。

タスクパネル関連の記事は、他にも書いているので、気になったタイトルがあれば、参考にしてみてください。

カスタムCSS