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

2021年11月15日Chrome拡張機能,Vivaldi

Vivaldi Forum modのアイコン

この記事では、Vivaldiフォーラムに自作テーマの適用、カスタムCSSの適用、細かい便利設定を追加できるChrome拡張機能「Vivaldi Forum mod」について書きます。

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

Vivaldi Forum modを使ったVivaldiフォーラムのスクリーンショット

Vivaldiフォーラムをより便利に・快適に使えるようにするChrome拡張機能です。具体的には、以下のようなことができます。

  • テーマの適用
  • 自分で書いたCSSの適用(カスタムCSS)
  • コードのコピーボタンの表示
  • 投稿のリンクコピーボタンの表示
  • ユーザーIDの表示
  • 四角いアバター画像の表示
  • スクロールでヘッダーを自動非表示
  • ナビゲーションバーにブックマークページへのリンクを追加

テーマは初期で9個用意されていて、ダークモード(Tokyo Night)などがあります。デフォルトテーマではなく、自分で作成することも可能です。テーマは複数保存できるので、気分によって切り替えれます。

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

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

Vivaldiフォーラムにて、本拡張機能のサポートページが用意されています。英語なので、翻訳機能を使って一読すると、より理解が深まると思います。読むのめんどくさい場合は、本記事を参考にしてみてください。

参考:Vivaldi Forum mod | Vivaldi Forum

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

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

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

Vivaldiの中の人にあれやこれや聞いたり、同じVivaldiユーザーと意見交流ができます。日本語専用ページも用意されているので、気軽に質問できるかと思います。

Vivaldiで分からないことや、「こういうことってできるの?」という疑問があれば、ここに投稿してみましょう。Vivaldiアカウントされあれば、誰でも無料で投稿できます。僕もちょくちょく質問・回答しています。

提供元:luetage
記事執筆時のバージョン:3.8(2022年3月9日)

ダウンロード方法

Chromeウェブストアからダウンロードできます。

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

Vivaldi Forum mod - Chrome ウェブストア
Firefoxをご利用の場合

本拡張機能は、Chrome拡張機能のみの提供で、Firefoxアドオンはリリースされていないので注意してください。

僕、英語が壊滅的なのに海外のフォーラムを定期的にチェックしています。その時にVivaldi標準搭載の翻訳機能がまともに機能しないので、Floorp(Firefoxベースのブラウザ)で翻訳するようにしています。

できればChrome拡張機能だけでなく、Firefoxアドオンもあるといいなぁと思うんですけどね。VivaldiがChromiumベースのブラウザなので仕方ないんですけどね。

右上に拡張機能ボタンが追加されればOKです。基本的には使わないので、右クリック→ボタンを隠すで非表示にしておくとスッキリしていいかなぁと思います。

拡張機能ボタンの右クリック ボタンを隠す

使い方

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

Vivaldi Forum modの右クリックメニュー オプション

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

本拡張機能を導入するだけで、自動的に有効になる機能があります。こちらの機能はオフにできません。どれも便利な機能なので、オフにできなくても気になりません。

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

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

参考:Vivaldi Forum mod | Vivaldi Forum

コードをコピーするボタンを表示

個人的に一番便利だと思った機能です。コードってのは、フォーラム内に書かれたCSSやJavaScriptのことです。

マウスをシンタックスハイライター内(コード内)に乗せると、右上にcopy codeボタンが表示されます。クリックで全文のコードをクリップボードにコピーします。

シンタックスハイライター内の右上に、コードのコピーボタンが表示

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

合わせて読みたい

「VivaldiのCSS?何それ?」って方は、以下の記事を参考にしてみてください。

VivaldiにはカスタムCSSと呼ばれる、好きなようにブラウザの外観をカスタマイズできる高度な機能が実装されています。デフォルトではオフになっているので、オンにする必要があります。

自分で好きなようにCSSを書き込めるので、ブラウザをより一層自分好みにできます。いくつかサンプルも紹介しているので、丸パクリでもOKです。

VFmオプションを表示

プロフィール(フォーラムの右上)画像をクリックすると、VFmの設定に飛べる項目が追加されます。そんな重要な項目ではないのであまり気にすることはないかなと思います。

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

プロフィールアイコンのクリック VFmオプション

リンクのコピーボタンの表示

バージョン3.8(2022年3月9日)で実装されました。各コメントの下にある返信、引用、グッドボタンの間に「リンク」というボタンが表示されます。クリックでそのコメントのリンク(URL)をクリップボードにコピーします。

各コメントの下に「リンク」項目が表示される

コメントを引用する時に便利です。

投稿のリンクをそのまま貼り付けれる

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

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

設定を開き、ヘッダー(画面上部のメニュー)の「カスタマイズ」をクリックします。CSSを書き込む場所と、「カスタマイズの選択」が表示されます。ここから機能をオンオフできます。カスタムCSSについては、こちらを参考にしてみてください。

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

CSSを書き込んだら、忘れずに「保存」をクリックします。

筆箱

返信欄に並び替え可能なツールバーが表示されます。

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

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

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

Vivaldiフォーラム返信欄 テーブルの挿入

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

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

ページを上にスクロールすると再び表示されます。「ナビゲーションバー(カテゴリー、未読とかがある部分)は使うけど、ヘッダーはそんな使わない」って人に便利ですね。

ユーザーIDの表示

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

スクウェア・アバター

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

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

テーマを変更

「テーマ」タブでテーマを変更・カスタマイズできます。

デフォルトでは、9種類のテーマが用意されているので気に入ったものがあれば、クリックで適用できます。

テーマ テーマの選択

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

テーマ Tokyo Night

右側にある「スケジュール」で、テーマを時間で切り替えることができます。例えば、朝6時からは明るめのテーマ、夜18時以降は、暗めのテーマにするといったことができます。

スケジュールでテーマを時間ごとに切り替えられる

使いたい場合は、必ずオンにしましょう。オフのままだと、いくら設定しても反映されません。

テーマの自作

テーマ一覧の下にあるプラスから、自分でテーマを自作できます。

プラスボタンから、テーマを自作できる

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

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

CSSでカスタマイズ

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

User CSSでVivaldiフォーラムのデザインをカスタマイズ

試しに、僕が考えたCSSを貼っておきます。その名も、「ナビゲーションバーにある未読の通知カウント数をダーク系テーマでも赤色&ちょっと大きくするCSS」です。

本拡張機能でテーマを変更すると、通知カウント数が赤色じゃなくなり、テーマに合わせて色が変化するようになりました。少し強調感がなくなったので、強制的に赤に戻してみました。

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

「User CSS」の横にあるボタンをオンにします。

以下のコードを、そのままコピーして貼り付けます。

.unread-count:after {
  position: absolute;
  left: 23px;
  top: 10px;
  font-size: 10px;
  text-align: center;
  border: 1px solid #890405;
  color: #fff;
  font-weight: 700;
  min-width: 16px;
  border-radius: 3px;
  background: #c91106;
  padding: 1px 2px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

保存をクリックします。

どのテーマ(ダーク系など)を利用していても、通知の色がデフォルトテーマと同じように赤色になります。

テーマを変更しても、通知の色(背景)が赤色になる

便利なCSS

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

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

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

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

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

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

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

検索欄を常に表示

ヘッダーにあるVivaldiフォーラム内検索欄を常に表示するCSSです。このCSSは、Vivaldiフォーラムのレジェンド「shifte」さんが投稿したものです。「レジェンドって呼んでくれ!」って頼まれたわけではなく、僕が勝手に呼んでいるだけです。

デフォルトでは、虫眼鏡検索アイコンのみ表示されています。クリックすると検索ボックスが表示されます。この手間を省いて、常に検索ボックスを表示します。

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

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

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

luetageさんへの返信を開く

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

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

あとは、User CSSに貼り付けて保存するだけです。

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

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

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

投稿されている画像の角丸化

投稿されている画像の四隅を、カクカクデザインから角丸にするCSSです。

/*投稿の画像角丸化*/
.content img {
    border-radius: 15px;
}

「15」の数字を調整することで、角丸具合を変更できます。より角丸にしたい場合は、数字を大きくします。

Vivaldiフォーラムに投稿されている画像の四隅を角丸化

ボタンの角丸化

投稿下にある各ボタンを角丸化するCSSです。具体的には、未読としてマーク、ウォッチ中、並び替え、返信ボタンの角丸化です。

/*【ボタンを角丸化】未読としてマーク、ウォッチ中、並び替え*/
.btn-group-sm>.btn, .btn-sm {
  border-radius: 10px !important;
}

/*【ボタンを角丸化】返信*/
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-bottom-left-radius: 10px !important;
  border-top-left-radius: 10px !important;
}

.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
  border-bottom-right-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
未読としてマーク、ウォッチ中、並び替え、返信ボタンの角丸化

感想

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

「こんなCSS作ってみたよ~」ってのがありましたら、気軽にコメント欄にて教えていただければなと思います。喜びます。

Posted by ナポリタン寿司