Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

Yahooニューストップページリニューアル 見出しをすべて表示する方法

  • 2013-11-28 木 18:11
  • Web
  • hatena  拍手

 Yahoo!ニュースのトップページがリニューアルされました。これまでは各ジャンル(国内・国際・経済・エンタメなど)の見出しがページ上にすべて表示されていましたが、今回のリニューアルによりタブをクリックして見出しを表示する形式に変更されました。

 これをユーザー側のスタイルシートでクリックしなくてもページ上にすべて表示する方法です。

[2013-12-16更新]
 追加された矢印画像を非表示に。必要な場合は上書き登録してください。


サンプル

お試し用のブックマークレット

 お気に入りに登録して使用します。下記リンクを(右)クリックして、リンクをお気に入り(ブックマーク)に追加します。Google Chromeはメニューからブックマークバーを表示させてリンクをバーにドラッグします。バーを右クリックして作成したフォルダに入れておくと邪魔になりません。

 » [Y]見出し表示2列  » [Y]見出し表示3列

 Yahoo!ニュースページを開いて追加したお気に入りリンクをクリックすると適用されます。

 ブックマークレットはページを表示する度にクリックする必要があるため、ユーザースタイルシートで対処するのが便利です。各ブラウザごとの設定方法は次の通りです。

 Internet Explorer(IE) | Google Chrome | Firefox

Internet Explorer

  1. 見出し表示2列」か「見出し表示3列」のリンクを右クリックして「対象をファイルに保存」。場所は適当なフォルダでOK。
    ※すでにユーザースタイルシートを利用している場合はリンクを開いて中身をすべてコピーして適用中のCSSファイルに追加して保存してください。
  2. IEメニューの「ツール」→「インターネットオプション
    [全般]タブにある「ユーザー補助」をクリック
  3. 自分のスタイルシートでドキュメントの書式を設定する」にチェックを入れて「参照」をクリック。先ほど保存した.cssファイルを指定して「OK」をクリックすれば完了です。
     適用したスタイルを無効にするときはチェックを外します。あるいはファイルを開いて内容を全て削除して上書き保存します。
     内容を変更したファイルを反映させるにはスタイルのチェックを一度外して「OK」をクリック。再度チェックを入れて「OK」をクリックすれば反映されます。

Google Chrome

  1. 『Stylish』をChromeウェブストアからインストールしてブラウザを再起動するとバーに『S』アイコンが追加されます。
  2. 『S』アイコンをクリック→インストール済みのスタイルを管理新しいスタイルを作成
  3. 名前欄には「Yahooニュース見出し」など適当な名前を入れる。
    以下の2列3列どちらかのコードをコピーしてコード欄に貼り付け。

  4. コード欄の下にある「個別指定」をクリック。
  5. セレクトメニューは「URL」のままで右の入力欄に以下のURLを入れて追加をクリック。

  6. 最後に左上の「有効」にチェックを入れて「保存」を選択すれば完了。
     適用したスタイルを無効にするときはSアイコンから「スタイルを管理」→作成したスタイルの「無効化」をクリックします。あるいはスタイルが適用されているページでスタイルの「無効化」をクリックすれば無効になります。

 もし今後、URLの後に「index.html」や「?top=1」などが付くようになった場合はセレクトメニューの「URL」を「次で始まるURL」に変更してください。

Firefox

  1. 『Stylish』をアドオンページからインストールしてブラウザを再起動するとバーに『S』アイコンが追加されます。
  2. 『S』アイコンをクリック→新しいスタイルを書く白紙のスタイル
  3. 名前欄には「Yahooニュース見出し」など適当な名前を入れる。
    以下の2列3列どちらかのコードをコピーしてコード欄に貼り付けて保存すれば完了。


     適用したスタイルを無効にするときはSアイコンから「スタイルの管理」→作成したスタイルの「無効化」をクリックします。あるいはスタイルが適用されているページでスタイルのチェックを外せば無効になります。

     もし今後、URLの後に「index.html」や「?top=1」などが付くようになった場合はスタイルの管理から1行目のコードを次のように編集します。

    @-moz-document url("http://news.yahoo.co.jp/") {

    ↓変更

    @-moz-document url-prefix("http://news.yahoo.co.jp/") {

関連記事
  1. comment

コメント

Icon ※必須 :
Pass  ※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)