−目次

ニコニコ動画：Qマイページ省スペース化

ニコニコ動画：Qマイページ省スペース化

なんか白い。		こんな感じにすると情報量2倍。
	→

前提

firefoxでしかチェックしてない
「Stylish」アドオンを使用してスタイル変更
「greasemonkey」アドオンを使用してHTML書き換え
ニコニコがマイページのHTMLを少し変えただけで崩れる可能性がある

やってること

スタイルの変更

各隙間を微妙に詰める
フッター（時間やニコるボタン）を右回り込みにし、動画情報（サムネとタイトル）と同列に
生放送の放送タイトル横のサムネは、そこまで重要じゃないので非表示

HTMLの書き換え

フッターを右回り込みにした関係上、動画情報とフッターをfloat解除するためのラッパで覆う
マイリストコメントが動画情報より上なのは個人的に不自然なので、下に持ってくる
「動画」「イラスト」と同様に「生放送」「予約」にもテキストアイコンをつける

ユーザースタイルシート

firefoxのStylish用。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

@namespace url(http://www.w3.org/1999/xhtml);
 
@-moz-document url-prefix("http://www.nicovideo.jp/my"), url-prefix("http://www.nicovideo.jp/user")  {
.clearfix {width:100%;}
.clearfix:after{
    content: ""; 
    display: block; 
    clear: both;
}
 
#nicorepo .articleBody {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.log {
    margin: 4px 0 !important;
    padding-top: 6px !important;
}
.log-reslist {
    margin: 4px 0 0 !important;
}
 
.log-details {
    float:left;
}
.log-footer {
    margin-top:0 !important;
    float:right;
}
 
.log-body{
    margin-bottom:4px !important;
    padding-top:0 !important;
}
.nicorub-balloon {
    width: 48px !important;
}
.log-subdetails {
    margin:2px 0 !important;
}
 
.log-target-live-program .log-target-thumbnail {
    display: none;
}
.log-target-live-program .log-target-info {
    margin-left: 4px !important;
}
.log-target-type-live {
    background-color: #008000;
    color: #FFFFFF;
    display: inline-block;
    font-size: 90%;
    margin-right: 4px;
    padding: 1px 4px;
}
 
.userDetail {/* nlFilter header_light(9)用 */
    margin: 48px auto 0 !important;
}
}

greasemonkeyスクリプト

greasemonkey用。「NicoSmartMypage.user.js」という名前で保存してブラウザにD&Dしたらインストールされる。

ただし「過去のニコレポを見る」から追加で読み込んだ分には適用されない。追加されたタイミングで書き換えを実行する方法が何かあると思うけどわからん。

追加で読み込んだ内容もそれなりに見えるが、「コメントする」を押すと動画情報とフッタに被ってコメント入力欄が出る。

NicoSmartMypage.user.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52	`// ==UserScript==` `// @name NicoSmartMypage` `// @namespace ikatakos` `// @include http://www.nicovideo.jp/my` `// @include http://www.nicovideo.jp/user/` `// @require http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js` `// @version 20121107` `// ==/UserScript==` `//jQueryの競合を防ぐおまじない` `this.$ =` `this.jQuery = jQuery.noConflict(true);` `(function(){` `// config` `//生放送や予約のニコレポに「生放送」「予約」と表記する` `var` `doAddLogoToLive =` `true;` `//マイリスコメントを、動画情報とフッターの下に移動` `var` `doMoveDownComment =` `true;` `//動画情報とフッターをclearfix要素で挟む（float解除）` `var` `doMoveRightFooter =` `true;` `// config おわり` `var` `addLogoToLive =` `function() {` `$(".log-community-live-broadcast, .log-user-live-broadcast")` `.find(".log-target-info")` `.prepend("<span class=\"log-target-type-live\">生放送</span>");` `$(".log-community-live-reserve, .log-user-live-reserve")` `.find(".log-target-info")` `.prepend("<span class=\"log-target-type-live\">予約</span>");` `};` `var` `moveDownComment =` `function() {` `var` `$mylistComments = $(".log-subdetails");` `$mylistComments.each(function(){` `$this` `= $(this);` `$this.nextAll(".log-footer").after($this);` `});` `};` `var` `moveRightFooter =` `function() {` `$(".nicorepo .log").each(function() {` `$(this).find(".log-details, .log-footer")` `.wrapAll("<div class=\"clearfix\"></div>");` `});` `};` `$(function() {` `if` `(doAddLogoToLive) { addLogoToLive(); }` `if` `(doMoveDownComment) { moveDownComment(); }` `if` `(doMoveRightFooter) { moveRightFooter(); }` `});` `})();`

ニコニコ動画, css, javascript, 作ってみた