【Vivaldi Forum mod】Vivaldiフォーラムをより快適にするChrome拡張機能

2021年11月15日Vivaldi

Vivaldi Forum mod のアイコン

この記事では、Vivaldi フォーラム に自作テーマや、カスタムCSS を適用できるようになるChrome拡張機能「Vivaldi Forum mod」について書きます。

「コードを全てコピーボタン」が個人的に一番好きです。

Vivaldiフォーラム をより便利に・快適に使えるようにするChrome拡張機能です。

具体的にはテーマの適用、自分で書いたCSSの適用ができます。テーマは初期で9個用意されていて、ダークモードなどがあります。自分で好きなようにテーマの追加、削除もできます。

ブラウザのページ全体を変更するものとは違って、Vivaldiフォーラム だけの変更なので他のことは考えずに自由にカスタマイズできます。

ウェブブラウザVivaldi について話し合いや不具合報告ができる公式サイトです。

お知らせ、サポートとトラブルシューティング、機能リクエスト、一般的なディスカッション、ローカルフォームの5つのジャンルが存在しています。

さらにそこから、お知らせならデスクトップ版なのかモバイル版なのか、ローカルフォーラムなら日本語や英語といったようにカテゴリが細分化されています。

Vivaldi の中の人にあれやこれや聞いたり、同じVivaldiユーザーと意見交流ができます。

参考:Vivaldi フォーラム | Vivaldi Browser Help

とりあえず、Vivaldi で分からないことや「こういうことってできるの?」という疑問があれば、ここに投稿してみましょう。無料で作成できるVivaldi アカウントがあれば投稿ができます。

参考:【Vivaldi】アカウントを作成してスマホと同期したり、質問投稿できるようにしてみよう! | ナポリタン寿司のPC日記

それ以外に、コード内に「コピー」ボタンを表示、スクロールでヘッダーを自動非表示、ナビゲーションバーにブックマークページへのリンクを追加、正方形のアバター画像表示など、Vivaldi フォーラムをより快適に使えるようになる機能が実装できます。

CSSを全く理解していない方でも、それ以外のテーマの適用や、コードのコピーボタンを表示するなど便利な機能があるので入れておいて損はないかと思います。Vivaldiフォーラム を閲覧する全ての方におすすめです。

Vivaldiフォーラムにて、サポートページが用意されているので、まずはそちらを翻訳機能でも使って内容を一読するとより理解が深まるかと思います。

参考:Vivaldi Forum mod | Vivaldi Forum

提供元:luetage
最終アップデート:3.5(2021年10月7日)

ダウンロード方法

以下のサイトからダウンロードできます。

「Chrome に追加」をクリックします。

Vivaldi Forum mod のダウンロード

使い方

インストールできたら、ブラウザ右上にChrome拡張機能ボタンが表示されます。右クリック → オプション で設定に飛べます。

Chrome拡張機能の右クリックメニュー - オプション

デフォルトでオンになる機能

Vivaldi Forum mod をインストールするだけで、自動的に有効になる機能があります。こちらの機能は、逆にオフにすることはできません。といってもどれも便利な機能です。

デフォルトで有効になる機能
コードをコピーするボタンを表示CSS などが書かれたコードの右上にコピーボタンが表示される。めちゃ便利
Vivaldi Forum mod(略してVFm)オプションを表示プロフィールをクリックしたら、VFmの設定に飛べる項目が追加

実はこれ以外にもあるんですが、僕は素人なので何を表しているのかが分かりませんでした。より詳しく知りたい場合は、Vivaldi Forum mod のサポートページが参考になります。とりあえず上記2点を覚えておけばいいのかなぁという印象です。

参考:Vivaldi Forum mod | Vivaldi Forum

コードをコピーするボタンを表示 が一番便利です。

コードってのは、フォーラム内に書かれたCSS やJavaScript のことです。マウスをボックス内に乗せると右上に「copy code」ボタンが表示されます。クリックで自動的にクリップボードにコードがコピーされます。

コードのコピーボタンが表示

何で標準で実装していないのか不思議になるくらい便利な機能です。CSS とかを丸パクリする人(僕)にとっては、非常にありがたいです。今までマウスでせっせと範囲選択してましたからね。時短です。

VFm オプションを表示 はそんな重要なことじゃないんですが、プロフィール(フォーラムの右上)画像をクリックすると、VFm の設定に飛べる項目が追加されます。

Chrome拡張機能の右クリック → オプションで表示される画面と一緒です。

VFm オプション

オプションでオンにできる機能

デフォルトでオンになる機能とは別で、オプションにてオンにできる機能がいくつか用意されています。

Vivaldi Forum mod 設定を開き、ヘッダー(画面上部のメニュー)の「カスタマイズ」をクリックします。CSS を書き込む場所と「カスタマイズの選択」が表示されます。ここから、機能をオンオフできます。

カスタマイズの選択
オプションでオンにできる機能
筆箱レス欄にカスタムツールバーと便利なボタンを表示。
ドラッグ&ドロップで並び替え可能
スクロールでヘッダーを閉じるスクロール時にヘッダーを自動開閉する
オプションへのリンクプロフィール画像からのプルダウンメニューにオプションへのリンクを表示する
カスタム通知アイコン通知の横にアイコンを表示して、通知内容を分かりやすくする
ユーザーIDの表示スレッドのユーザー名にマウスを合わせるとユーザーIDを表示
署名「署名」を表示。クリックで内容を表示する
スクウェア・アバタープロフィール画像を四角にする
システムの絵文字を使用Vivaldiフォーラム の絵文字ではなく、OS の絵文字を使用する

機能をオンオフしたら、忘れずに「保存」をクリックしましょう。でないと設定が反映されません。

筆箱

返信欄に並び替え可能なツールバーが表示されます。マウスのドラッグ&ドロップでレンチの中に収納、並び替えできます。普段使わないツールは、レンチの中に収納するとスッキリして便利です。

レンチボタンの中には、追加でいくつかのツールが入っています。マウスをツールの上に乗せると「どんな機能なのか?」が日本語で表示されます。

テーブル(表)なんてものもあるんですね。ほえー。使い道そんななさそうですが、選択肢があることは素晴らしいことですね。

返信欄 - テーブルの挿入

スクロールでヘッダーを閉じる

ページを下にスクロールすると、自動でヘッダーが非表示になります。ページを上にスクロールすると再び表示されます。

ナビゲーションバー(カテゴリ、未読とかがある部分)は使うけど、ヘッダーはそんな使わないって人に便利ですね。

ユーザーIDの表示

ユーザー名にマウスを乗せると、ユーザーIDを表示する機能です。僕からするとユーザーIDなんてものが存在していたことに驚きです。

スクウェア・アバター

ユーザーのプロフィール画像のアイコンを、丸から四角にします。丸が嫌いな人にはよさげです。僕は丸派です。

スクウェア・アバター のオンオフ比較画像

テーマを変更

Vivaldi Forum mod の設定を開くと、いくつかのテーマが表示されます。クリックで適用できます。

テーマの選択

「Tokyo Night」とかいいですね。やっぱ時代はダークモードやなぁ…(僕だけか)

テーマ - Tokyo Night

テーマの自作

テーマ一覧の下にある「+」からテーマを1から自作できます。

テーマの自作

Vivaldi のテーマ設定と一緒の感覚で使用できます。

背景、テキスト、ハイライト、アクセント、リンク、コード、ドロップダウンとVivaldi テーマの設定項目よりも多いですが、それぞれ変更してみれば「あ、ここのことね」って分かるかと思います。

参考:【Vivaldi】テーマを変更する方法・カスタマイズ方法 | ナポリタン寿司のPC日記

CSS でカスタマイズ

自分でCSS を追加できます。ここが初心者にとって一番難しくて、上級者にとって一番カスタマイズできる場所です。

CSSでカスタマイズ

試しに僕が作ったやつ貼っておきますね。ほんとしょーもないやつですが…。

その名も「ナビゲーションバーにある未読の通知カウント数をダーク系テーマでも赤色 & ちょっと大きくするCSS」です。

Vivaldi Forum mod でテーマを変更すると、通知カウント数が赤色じゃなくなったので強制的に赤に戻しました。んで、ちょこっと見やすく大きくしました。

通知カウント数のCSS変更前と変更後の比較画像

以下のアコーディオンを展開して、コードをそのままコピーして貼り付けます。

/* 「未読」の通知カウント数のカスタマイズ */
.unread-count:after {
    position: absolute;
    border: 1px solid #890405;
    border-radius: 3px;
    padding-top: 2px;
    padding-right: 3px;
    color: white;
    font-size: 12px;
    position: absolute;
    top: 3px;
    right :5px;
    border-radius: 5px;
    background-color: red;
    height: 20px;
    width: 20px;
    }

貼り付けたら、保存を忘れずにクリックします。あと「User CSS」をオンにしないと有効にならないので注意です。

CSS をカスタマイズしたら、いい感じに自分好みのデザインにできます。便利ですなぁ。

便利なCSS

僕が使ってみて便利だと思ったCSS をつらつら書いていこうと思います。

投稿の何分前って表示を少し大きくする

カテゴリー右横にあるユーザーが何分前に投稿したかの文字を少し大きくするCSS です。初期では、フォントサイズ12pxでしたが、16pxに変更しました。

投稿の何分前表示を少し大きくするCSSの比較画像

めちゃくちゃ些細な変更ですね。

/* 投稿の何分前って表示を少し大きくする カテゴリー */
small.timeago {
    font-size: 16px;
}

/* 投稿の何分前って表示を少し大きくする サブカテゴリー */
.permalink .timeago {
    font-size: 16px;
}

検索欄を常に表示

ヘッダーにあるVivaldi フォーラム内検索欄を常に表示するCSS です。

このCSS は、Vivaldi フォーラムのレジェンド「shifte」さんが投稿していたCSS です。(僕が勝手にレジェンドって呼んでいるだけです)

初期では検索アイコンだけの表示でクリックすると、検索欄が表示されるようになっています。この手間を省くために常に検索欄を表示してやろう!って魂胆です。

検索欄を常に表示するCSSの比較画像

Vivaldi Forum mod のサポートページにアクセスします。

ページを少しスクロールすると、luetage さんへの返信を開く場所があるのでクリックします。

luetage さんへの返信を開く

返信の中にshifte さんのCSS があるので、コピーボタンで全てコピーします。

shifteさんが投稿したCSSをコピー
Vivaldi Forum mod | Vivaldi Forum

あとは、カスタマイズCSS に貼り付けて保存するだけです。

「未読」の通知カウント数を非表示

未読の通知を非表示にするCSSです。

「未読」の通知カウント数を非表示にするCSS
/* 「未読」の通知カウント数を非表示 */
.unread-count:after {
    display: none;
    }

まとめ

以上、Vivaldi フォーラム に自作テーマや、カスタムCSS を適用できるようになるChrome拡張機能「Vivaldi Forum mod」についてでした。

「こんなCSS 作ってみたよ~」って方、どーかコメント欄にてナポリタン寿司に教えてください。喜びます。

Posted by ナポリタン寿司