HACのブロマガ

Stylish - ニコニコ動画:GINZA 動画再生ページ改善 公開中

2013/10/20 08:03 投稿

コメント:105

  • タグ:
  • Stylish
  • GINZA
  • Chrome
  • Firefox
  • Opera
  • Sleipnir
  • CSS
sample.jpg

サムネイルの動画:sm21864086

userstyles.org - ニコニコ動画:GINZA 動画再生ページ改善
最終更新日:2017/02/07


特徴

  • GINZAの機能はそのままに、使いにくいデザインを改善
    • 動画説明文を原宿っぽく枠で囲んで見やすく
    • タグを適切に配置、マイリストへ登録等のボタンを常時表示
    • 再生リストの幅が横幅いっぱいに広がらないように
    • ニコニコ市場の調整。画面中で4列、画面大で5列表示
    • "動画をもっと見る"画面のレイアウト改善

対応確認済ブラウザは以下のとおりです

  • Google Chrome 56
  • Firefox 25
  • Opera 15
  • Sleipnir 5

色々実験しながらなので、不具合修正や調整でちょくちょく仕様が変わるかもしれません。

ご意見ご要望等はこのブロマガにどうぞ。


使い方

Stylishの導入

Stylishとは、指定ページのcssを上書きするためのアドオンです。Firefox・Google Chromeに対応しており、それぞれ以下のリンクから導入できます。

導入後は、ブラウザ右上に管理ボタンが表示されるので、そこからスタイルの適用・非適用、スタイルの削除・編集・新規作成、スタイルの検索等が行えます。

Google Chromeの場合(Sleipnir 3以降でも同様)

Chrome ウェブストア - Stylish
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe

Firefoxの場合

Stylish :: Add-ons for Firefox - Mozilla Add-ons
https://addons.mozilla.org/ja/firefox/addon/stylish/

Operaの場合

拡張機能「 Stylish」 - Opera アドオン
https://addons.opera.com/ja/extensions/details/stylish/

Safari(Mac)の場合

Stylish for Safari
http://sobolev.us/stylish/

IE等その他のブラウザ

userstyleを設定するオプションはあるのですが、Stylishと同じプラットフォームで検索・ダウンロード・管理を行える拡張がないため、少しハードルが高いです。「ブラウザ名 user style sheet」で検索してみてください。

towaco様の動画にて詳しい説明があるので、そちらもおすすめです。


スタイルの導入

以下のページから +Install with Stylish のボタンを押すことで、スタイルの導入が出来ます。

※対応ブラウザのバージョンは、Chrome 26, Firefox 16, Opera 15, Safari 6.1(Mac OSX 10.8以降向け) 以降で、それ以前のバージョンでは想定通りの表示ができません。

userstyles.org - ニコニコ動画:GINZA 動画再生ページ改善
http://userstyles.org/styles/93487

http://userstyles.org/ には、他にもGINZA用のスタイルを上げている方がおられるので、好みに合わせて使い分けてみてください。


スタイルの無効化・削除

Stylish導入後は、ブラウザの右上に「S」ボタンが表示されます。「S」ボタンをクリックすると、そのWebページに適用されているスタイルの編集・無効化/有効化・削除ができます。

スタイルを適用して表示に問題があった場合は、まず無効化してみてください。

また、「インストール済みのスタイルを管理」から、インストールされた全てのスタイルの管理ページを開くことができます。


併用を推奨する自作スクリプト
ニコニコ動画:GINZA 動画再生ページ 再生数を動画右に表示 - userscripts.org
導入すると、動画説明文を折りたたんでも再生数等の表示が消えなくなります
その他制作したスタイル
userstyles.org - ニコニコ動画:GINZA ニコらない
userstyles.org - ニコニコ動画:GINZA 再生リスト非表示
併用すると便利なスタイル(他の方が作ったもの)
userstyles.org - ニコニコ動画:GINZA 表示項目カスタマイズ
併用すると便利なスクリプト(他の方が作ったもの)
ShinjukuWatch - userscripts.org - GINZAの操作性を大幅改善、設定でこのスタイルと併用できます

※スタイルとは - 見た目のデザインを変えるための指示書。FirefoxやChromeのStylish等で動作する。
※スクリプトとは - 根本の動作を拡張できる言語。FirefoxのGreasemonkey, ChromeのTampermonkey等で動作する。


TODO:ご意見にあったこと・実装したいことメモ

  • 動画タイトルの全文表示(改行表示)

コメント

urotan
No.121 (2016/11/17 20:12)
スタイルの公開有り難うございます。いつも使わせて頂いています。
本日HTML5版がプレミアム会員に公開されましたが、HTML5版のスタイルを公開する予定はお有りでしょうか?
HAC (著者)
No.122 (2016/11/18 23:05)
>>121
ご使用ありがとうございます。
HTML5版向けのスタイルの公開については今のところなんとも言えません。
HTML5版のページは今までとはまただいぶ仕様が違うので、公開するようなものが作れるかどうかわからないというところでしょうか。
HAC (著者)
No.123 (2016/12/24 22:25)
>>121
HTML5版のスタイルを公開しました!
https://userstyles.org/styles/135578
ブロマガの対応ページはこちらになります。
http://ch.nicovideo.jp/hac_kimagure/blomaga/ar1161944
コメントを書き込むにはログインしてください。

いまブロマガで人気の記事