ニコニコ生放送:GINZAのトップページを番組説明文付きにする
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

ニコニコ生放送:GINZAのトップページを番組説明文付きにする

2013-10-12 11:50
    userstyles.org に登録した CSS の説明を補足します。
    • Table of contents
      1. 何をするものなのか
      2. 問題点
      3. 導入方法
      4. オプションの内容
      5. 再配布、修正について
      6. 小技
      7. CSS の解説

    1. 何をするものなのか

    ニコニコ生放送:GINZA のトップページが下の画像のように番組説明文付きになります。

    2. 問題点

    「現在放送中の注目番組」の番組説明文でHTMLタグが解釈されずにそのまま表示される
    <b>や<br>などが出てHTMLタグとして処理されていないというものです。これは GINZA がはき出すデータがタグではなく文字参照(&lt;や&gt;)になっているためです。見づらい場合は吹き出し(※)で本来の表示を見ることができます。なお「未来の注目番組」「過去の注目番組」にはこの問題はありません。

    ◇ 番組説明文が途中で切れている
    長い番組説明文は枠内に収まりきらず全部を表示できません。続きは吹き出し(※)で読んでください。

    ◇ レイアウトがおかしい
    お使いの環境によっては文字が切れていたり、おかしな位置に表示されたりするかもしれません。残念ながら様々な環境でテストすることができないので、下の解説を参考にCSSを調整してください。

    ※ 吹き出しは info アイコンにマウスカーソルを移動すると現れます。info アイコンは番組枠内にマウスカーソルを移動すると現れます。

    (追記)公式のデザイン変更により、「未来の注目番組」「過去の注目番組」の番組説明文でもHTMLタグが現れるようになりました。また、公式デザインの変更が頻繁になされているため、CSSの解説は削除させていただきました。

    3. 導入方法

    Stylish という拡張を使用したユーザー CSS の導入方法は下の動画が参考になると思います(丸投げ)。



    ここでは Firefox 限定で拡張機能を使わずに手作業で CSS を導入する方法を説明します。
    1. Firefox のアドレスバーに「about:support」と入力し、開いたページの「プロファイルフォルダ」からアクセスできるフォルダを開く
    2. そのフォルダの下に「chrome」というフォルダを作成し、「chrome」フォルダに「userContent.css」というファイルを作成する
    3. 冒頭の CSS 配布サイトに移動し、右側にあるオプションの下のプルダウンメニューから「現在放送中の注目番組」の表示形式を選ぶ(※)
    4. 「Show CSS」をクリックして現れるコードを「userContent.css」にコピペして保存する(もしくは別ファイルに保存し、「userContent.css」において @import で取り込む)。このとき文字コードは UTF-8 にする
    5. Firefox を再起動する
    ※ 2013-10-14 付け Update で導入時のオプションが追加されました。

    4. オプションの内容

    CSS 導入時に次のような「現在放送中の注目番組」の表示形式を選ぶことができます。
    ・番組説明文付き表示(デフォルト)(※)
    「現在放送中の注目番組」も番組説明文付きにします。

    従前は右側に「お知らせ」を表示させていたのですが、公式サイトが「現在放送中の注目番組」の上にトピックエリアを表示させるデザイン変更をしたことで、「お知らせ」の表示位置を指定することが困難になったため、2013-12-13 付け Update でこの機能は廃止しました。

    ※ 2013-12-04 付け Update で従前の「番組説明文付き表示」が廃止され、「番組説明文付き+お知らせ表示」を「番組説明文付き表示」と変えて、2つのオプションを統一しました。そして上記の理由により、2013-12-13 付け Update で「お知らせ表示」を廃止しました。
    ・GINZA 標準
    公式の表示形式のままです。このオプションを選択しても「未来の注目番組」「過去の注目番組」の表示は番組説明文付きに変更されます。

    5. 再配布、修正について

    非営利目的である限り、どのような利用も可能です。ご自身の CSS の中に取り込んでご自身のものとして配布して構いません。再配布の際にクレジットの表記は一切必要ありません。

    6. 小技

    番組説明文付きにすると「未来の注目番組」「過去の注目番組」が縦に伸びて、フル HD クラスの画面サイズでない限り、いちいち縦スクロールをしなければ全部を見渡せません。ブラウザの全画面表示やページのサイズ縮小により縦スクロールを回避できるかもしれません。これらはショートカットキーで簡単に試すことができます。
    Firefox/Chrome でのショートカット
    [F11]全画面表示のオン/オフを切り替える
    [Ctrl]+[-]ページのサイズを縮小する
    [Ctrl]+[+]ページのサイズを拡大する
    [Ctrl]+[0]ページのサイズを元のサイズにする

    7. CSS の解説

    (記事削除)

    公式が頻繁にデザインを変更しているため、ここに掲載していた記事は全面的に削除させていただきました。

    変更履歴

    2013/12/13:
    「お知らせ」表示の廃止により「4. オプションの内容」を修正。
    2013/12/04:
    「4. オプションの内容」をCSSの更新にあうように修正。
    2013/10/20:
    「4. オプションの内容」を追加し、オプションの説明を集約。「7. CSS の解説」に .container、.item_more_info の記述を追加。
    2013/10/18:
    「3. 導入方法」にオプションの説明を追加。「5. 小技」を挿入。
    2013/10/14:
    「5. CSS の解説」に.btn_text クラス属性、.timeshift_reserved クラス属性の記述を追加。
    2014/12/04:
    頻繁に行われた公式のデザイン変更に応じて、「2. 問題点」の説明修正と「5. CSS の解説」の記事削除。
    広告
    コメントを書く
    コメントをするには、
    ログインして下さい。