読者です 読者をやめる 読者になる 読者になる

【Vivaldi】縦タブからサムネイルを消す

2015 6/13追記
デフォルトでタブサムネイルの非表示が可能になりました! taka-say.hateblo.jp

デフォルトでタブ位置の変更が可能なVivaldiですが、縦タブ状態にすると下記画像のようにページサムネイルの表示がされてしまいます(ルイズかわいい)。

f:id:taka_say:20150430160855p:plain

中にはこの機能をありがたいと感じる人もいるかもしれませんが、自分にとっては全くもって不要なので、消すためのカスタマイズをします。
ちなみにOpera12ではサムネイルのON/OFF設定がデフォルトで可能です(最強!)。

HTML/CSSの編集をしますが、それらについての知識は特に必要ありません。

環境

Mac OSX Mavericks
Vivaldi v1.0.162.4

カスタムCSSの準備

サムネイルを消すためには、VivaldiにカスタムCSSファイルを適用する必要があります。
なので、まずはそのための追記をします。

Macの場合
/Applications/Vivaldi.app/Contents/Versions/[version, e.g. 1.0.162.4]/VivaldiFramework.framework/Resources/vivaldi/browser.html

一応Windowsの場合
Vivaldi\Application\[version, e.g. 1.0.162.4]\resources\vivaldi\browser.html
※自分では確認していないので間違っていたらすみません。

を開き、

<link rel="stylesheet" href="style/common.css" />

と記載されている行の下に新しく

<link rel="stylesheet" href="style/custom.css" />

という一行を加えます。

browser.htmlへの追記が完了したら、実際にカスタムCSSを作成します。

Macの場合
/Applications/Vivaldi.app/Contents/Versions/[version, e.g. 1.0.162.4]/VivaldiFramework.framework/Resources/vivaldi/style

一応Windowsの場合
Vivaldi\Application\[version, e.g. 1.0.162.4]\resources\vivaldi\style

フォルダの下に、任意のエディタでcustom.cssファイルを作成します。

サムネイルを消す

サムネイルを消すためには、以下の記述を作成したcustom.cssに追記すれば完了です。

#tabs-container.right #tabs .tab,#tabs-container.left #tabs .tab{height:26px;max-height:26px}

保存を終えたら、Vivaldiを再起動しましょう。

結果

f:id:taka_say:20150501083940p:plain いい感じのタブの太さになっていますね。

モニターのサイズ、解像度等によっては適切なサイズとなっていない可能性があります。
その場合はCSSに記述したheightの項目を適宜設定してみてください。

参考
Change Vivaldi browser default color scheme
Hide and disable thumbnails in Vivaldi vertical tabs
Vivaldi (Tech Preview) のPage ActionにCSSやJSを追加する (Mac OSX) - Pastalablog in はてな

Vivaldiマスター諸氏に感謝。