【-  公開日  -】 2018年02月27日
【- 最終更新日 -】 2018年02月28日

Inoreaderを見やすくしてみました[Stylebot]

この記事を読むのに必要な時間は【約 7 分】です。

以前にもtweetdeckの見た目変更で紹介した『Stylebot』ですが、今回はずっと気になっていたInoreaderを見やすくしてみることにしました。

『Stylebot』はChrome用の拡張機能なのでブラウザはGoogle ChromeやChromium系ブラウザを使用していることが前提です。

ダウンロードはこちらから⇩。

Stylebot-Chromeウェブストア

 

Inoreaderの設定

今回の見た目変更は

  1. リストビュー
  2. グループごとに表示
  3. ツリー幅は[標準]
  4. テーマは[ライトテーマ]もしくは[アクアテーマ]

という条件のもとでカスタマイズしています。

それ以外のビューモードの場合表示がおかしくなることもあるのでその点はご理解ください。

※広告を消したい場合はAdblock系でも消せますが、有料プランを利用してあげると運営側も助かると思います。

こんな感じになります

今回のカスタマイズはこんな感じになりました。

ライトテーマだとどうしても色味が少なくて退屈な画面、でもアクアテーマだと青が濃すぎて見づらいといった感じだったので色合いとしては少し淡い感じにしてあります。(画面はアクアテーマ使用時。)

また広さを最大にしても見づらい感じがしたので、各グループごとの間隔を開けて、記事ごとのリストの高さも広めにとってあります。

他はサイドバーの項目の下に白っぽい色のラインを入れて視認性を少し高めたり、記事のタイトル下に線を表示したり、開いた時のコンテンツの表示バランスを広めにとったりした程度です。

あくまでも上で書いた設定で見やすくしたのでそれ以外だと見づらくなることもあります。特にダークテーマだと目が痛くなる&見づらいのでオススメしません。

デザインの変更方法

上のような表示にするためにはstylebotで次のようにCSSを上書きしてあげます。

  1. 右上に表示されるStylebotのアイコンをクリック。
  2. 一番上の[Open Stylebot…]をクリック。
  3. 表示される画面で右上の歯車アイコンをクリック。
  4. [Styles]から[Add a new style…]を選択。
  5. URLに[www.inoreader.com]、スタイルシートに後述のコードを記入します。
  6. 最後に[add]を押して完了。

スタイルシートに記入するコードはこちら。

 div.ar.article.article_subscribed.article_no_thumbnail {
 padding-bottom: 12px;
 padding-top: 12px;
 }
div.ar.article.article_unreaded.article_no_thumbnail {
 padding-bottom: 10px;
 padding-top: 10px;
 }
div.ar.article_subscribed.article_no_thumbnail.article.article_current.article_current_collapsed {
 padding-bottom: 10px;
 padding-top: 10px;
 }
div.ar.article_unreaded.article_subscribed.article_no_thumbnail {
 padding-bottom: 12px;
 padding-top: 12px;
 }
div.article_content {
 margin-bottom: 50px;
 }
div.article_content p {
 padding-bottom: 10px;
 }
div.article_footer {
 border-radius: 10px;
 border-style: ridge;
 font-weight: bold;
 margin-bottom: 30px;
 margin-top: 10px;
 padding: 20px;
 }
div.article_short_contents {
 color: transparent;
 }
div.article_sub_title {
 padding-bottom: 5px;
 padding-top: 5px;
 }
div.article_title {
 text-decoration: underline;
 }
div.articles_feed_group_footer {
 margin-bottom: 20px;
 }
div.articles_feed_group_heading.articles_feed_group_heading {
 background-color: #aca0db;
 }
div.parent_div_inner {
 border-color: #fafafa;
 border-style: solid;
 border-width: 0.5px;
 padding-bottom: 1px;
 padding-top: 1px;
 }
span.article_header_title {
 font-weight: normal;
 padding-left: 10px;
 text-decoration: underline;
 }
span.plus_img.icon-arrow_right_small {
 font-size: 150%;
 }
span.tree_node.normal_dim.tree_link_folder.tree_link.normal.tree_unreaded {
 font-weight: normal;
 }
span.tree_node.normal_dim.tree_link_folder.tree_link.normal.tree_unreaded.tree_unseen {
 font-style: italic;
 font-weight: normal;
 }
span.tree_node.tree_link.normal.tree_node_main.tree_link_folder.tree_unreaded {
 letter-spacing: 1px;
 }

ちょっとゴチャゴチャしていてわかり辛いですが、項目を説明すると面倒なのでそこはスルーでお願いします。

これを手順5で表示している空欄にコピペしてください。

あとはURLに記載したInoreaderのページを見ると反映されていると思います。ミラーを利用している場合はURLが多少変わってくるのでご注意ください。

まとめ

これで野暮ったかったInoreaderの表示が多少は見映えするようになったかなと思います。もちろん見やすさについては個人差もあるので、そのあたりは柔軟に対応してください。

クラウド型のフィードリーダーは機能はInoreader、見た目や操作性はFeedlyが優位なので、なかなか選択が難しいところです。

でも機能は弄れなくても見た目は弄れるので気になる方はお試しください。

以上、Inoreaderの見た目をStylebotで見やすくしてみた報告でした。

ちなみにカスタマイズ前と較べたい場合には、ブラウザ右上のStylebotのアイコンの中にある[Remove Styling]にマウスカーソルを合わせるとカスタマイズ前のプレビューが表示されます。

honto_maitta

このブログの管理人です。 文章での表現力を高めようと思っていたら、いつの間にかグラフや画像を使ったブログになってしまいました…。 何かご用がありましたらお問い合わせページよりご連絡ください。 現在のところ、メインブログの方の更新頻度は月に1~2回を予定しています。

コメントを残す

トップに戻る