Feedlyのfloatされた画像や非表示にされた画像をStylishで直す
(追記 2013-11-17) 最近この方法が効かなくなってしまったようです。 → Feedlyがサイズの小さな画像をDOMから完全に削除するようになった
Feedlyにはなぜかフィード内の横幅の狭い画像を勝手に float: right; してしまったり、サイズの小さな画像(例えば、はてなブックマークのブックマーク数画像など)を非表示にしてしまったりと、ちょっと画像の表示に問題があります。
サイズの小さな画像を非表示にするのはおそらくFeedly内でサムネイル画像としてやたら拡大されないようにするための措置なのかなと思うのですが、DailyFeedのフィードとかではてブ数が表示されないのはちょっと不便です。
そこで Stylish という Chrome の拡張機能を使ってこれらを正してみることにしました。
Stylish とは
Stylish はいわゆるユーザースタイルシートが使える拡張機能で、色んなサイトのスタイルを自分好みにカスタマイズできるというものです。すでに180万ユーザー以上がインストールしているので説明の必要はないかもしれませんが。
他の人が作ったスタイルシートをインポートすることもできますが、せっかくなので今回は自分で書いてみましょう。CSSを書くだけなので、簡単に画像のfloatや非表示を直すことができます。
Stylish で使うスタイルの作成
Stylish をインストールしたらツールバーにアイコンが表示されるので、そのアイコンをクリックして「インストール済みのスタイルを管理」を選択します。
↑ 「インストール済みのスタイルを管理」をクリック。
↑ そうするとまっさらな管理画面が表示されるので、「新しいスタイルを作成」をクリックします。
名前は適当に。今回は「Feedly image style」としておきました。
スタイルを適用する要素を探す
次に「コード」という部分にCSSを書いていきますが、CSSを書く前に「どの要素にスタイルを適用するか」を調べないといけません。
今回は Feedly の記事本文内の画像を指定したいので、まずはそのHTML要素に指定されている属性を探ります。
↑ 右クリックから「要素の検証」を使います。
↑ Elements パネルで見てみると、ちょうどdivタグに「entryBody」という共通の class があてられているのが分かります。
※ 要素の検証や Elements パネルについては「#03 Elementsパネルを使ってみよう (1) | Chrome Developer Tools入門 – プログラミングならドットインストール」あたりをご参考に。
CSSを書く
スタイルを適用したい要素は「div.entryBody」内にある「img」要素であることが分かりました。あとはこの要素をセレクタで指定して、floatや非表示を解除すればOKです。
というわけで、今回記述するCSSのコードは以下のようになります。
div.entryBody img {
float: none !important;
}
div.entryBody img[src^="http://b.hatena.ne.jp/entry/image"] {
display: inline !important;
width: 50px !important;
}
↑ 「コード」の部分に記述します。
1個目は .entryBody 内のすべての画像の float をなしにする記述、2個目ははてなブックマークのブックマーク数アイコンに限定した記述です。どちらもインライン指定のスタイルより高い優先度になるように !important をつけています。
※ CSSの優先度について分からない場合は「#18 セレクタの優先順位 | CSS入門 – プログラミングならドットインストール」をご参考に。
本当はすべての画像を display: inline; としたかったのですが、Feedlyはなぜか非表示にした画像に width: 578px という指定を強制的につけてるので、個別に width を指定せざるをえませんでした。
CSSの適用先を指定する
最後に「適用先」のところで「個別指定」をクリックして、FeedlyのURLを指定します。
↑ 「次で始まるURL」を選択して、「http://cloud.feedly.com/」と入力します。
ここまでできたら左サイドにある「保存」をクリックします。保存ボタンをクリックした時点ですでにスタイルが反映されていますので、Feedlyを開いて確認してみてください。
Stylish 適用前と後を比較
↑ スタイルを書く前は右へfloatしてたARROWSの画像が、
↑ 綺麗に並びました。
↑ DailyFeedで表示されなかったはてブ数も、
↑ このようにきちんと表示されます。
というわけで、Feedly で画像が float されたり表示されなかったりして困っている方は、 Stylish でこのスタイルを適用してみてください。
著者について
コメントを残す