【Vivaldi】ステータスバーの時計を拡大するCSS

2021年12月20日カスタムCSS

Vivaldiのアイコン

この記事では、Vivaldi のオリジナルカスタムUI機能を使って、ステータスバー(ツールバー)の時計を拡大するCSSについて書きます。

見やすくなります。

ステータスバーの時計を拡大した画像

ステータスバー(ツールバー)の時計を拡大するCSSです。

拡大率は、自由自在に設定できます。2倍でも3倍でも10倍でもいけます。

ステータスバーの時計は、タイマーとアラームが使えるだけでなく、日時、時間を表示できます。便利でいいんですが、ステータスバーのフォントサイズって少し小さいんですよね。

かといって、設定→外観→ユーザーインターフェースの拡大率を調整すると、時計以外の要素も拡大されます。

CSSを使うことで、時計だけをピンポイントで拡大縮小できます。

オリジナルカスタムUI(CSS)を使うには?

この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。

有効にしていないという方は、以下の記事を参考にしてみてください。

CSS

CSSは以下になっています。

/*ステータスバーの時計拡大*/
.ClockButton--time {
    transform: scale(2); /*拡大率*/
    margin: 0 50px; /*左右の余白*/
}

/*拡大サイズによっては下記CSSと併用してください。
(多分、1.5以上から必要だと思います)*/
/*ブックマークバーと干渉しないために、はみ出し要素を非表示にする*/
.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-large {
  overflow: hidden;
}

上記のCSSを、エディタ(Visual Studio Codeやメモ帳など)でファイルに書き込みます。

ブラウザをリロードします。ステータスバーの時計が2倍に拡大されます。

時計が2倍に拡大される

「transform: scale(2);」の数字を変更することで、拡大率を好きに設定できます。

数字を大きくすると、その分拡大されます。

5倍にした時計

注意点ですが、大きくすると、その分左右の要素と被って見えにくくなります。

被った場合は、「margin: 0 50px;」の「50px」の数字を大きくして、余白を調整してみてください。

見て分かる通り、僕はステータスバー(下)ではなく、アドレスバー(上)の左横に表示させています。デフォルトのステータスバーに配置している場合でも、問題なく拡大されます。

ステータスバー右下に表示している場合でも動作する

2倍だと大きすぎる場合は、1.5倍くらいにしときましょう。合わせて左右の余白も調整したので、そのままコピペで使ってみてください。

/*ステータスバーの時計拡大(1.5倍)*/
.ClockButton--time {
    transform: scale(1.5);
    margin: 0 30px;
}

【余談】文字色を変更

文字色を赤に変更

余談ですが、文字色の変更も紹介しときます。

/*ステータスバーの時計拡大*/
.ClockButton--time {
    transform: scale(2);
    margin: 0 50px;
    color: red; /*好きなHTMLカラーコードを指定する*/
}

5行目の「red」って部分を自分の好きなカラーコードにしてみましょう。

カラーコードは、以下のサイトで調べれます。例えば当サイトでよく使っているのは「#00a1e9のカラー見本#00a1e9」とかです。

参考:色検索 原色大辞典

カラーコードじゃなくても代表的な色なら、英語で入力すると判別してくれます。黒なら「black」ですね。

【余談2】太字にする

下記コードで太字にできます。

/*ステータスバーの時計太字*/
.ClockButton--time {
    font-weight: bold;
}
太字に変更

拡大するCSSと併用する時は、下記のようにガッチンコして使いましょう。

/*ステータスバーの時計拡大(1.5倍)&太字*/
.ClockButton--time {
    transform: scale(1.5);
    margin: 0 25px;
    font-weight: bold;
}

感想

以上、Vivaldiのステータスバーにある時計を拡大するCSSについてでした。

CSSを使えば、特定の部分をピンポイントでカスタマイズできるので便利です。

Posted by ナポリタン寿司