Googleリーダーと同期してくれるスタイリッシュなRSSリーダー「feedly」を微妙に変えるユーザースタイル.css

Googleリーダーの表示方法がどうもぱっとしないと思って他のサービスを探してたところに見つけたのがfeedly (www.feedly.com)。
わりとスタイリッシュでかつ見やすく、各フィードごとに表示形式を記憶してくれるなかなかの優れものです。
Googleリーダーと同期してくれるので移行の手間も省けますしね。

それで使い始めたのですが、右側のウィジットが邪魔だったのでユーザースタイルで変えてしまおうって事です。

以下の様に変えてます。

  • フォントはHelveticaを優先
  • フォントサイズをやや小さめ(基本12px)
  • 右側のウィジットを非表示にしてフィードエントリーを広く表示
  • プレビュー表示[Shift + v]のスタイルを変更(黒ベースから白ベースに)

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain(feedly.com) {
  /* Helvetica */
  h1, h2, div, p, span, a {
    font-family: Helvetica, sans-serif !important;
  }
  /* サイドエリア非表示にする */
  #sideArea {
    display: none !important;
  }
  /* メインエリア広くする */
  #feedlyPart {
    float: none !important;
    padding-right: 0 !important;
    margin-right: 33px !important;
  }
  /* ウィジット非表示にしたからエントリー部分を広く */
  #feedlyPage,
  #mainArea {
    width: auto !important;
    max-width: 100% !important;
  }
  /* 左側のフィード一覧の最後に付け足されたやついらん */
  #tagList + div[style] {
    display: none !important;
  }
  /* Magazine, Timelineの横幅 */
  .u4Entry {
    width: auto !important;
    max-width: 100% !important;
  }
  /* Mosaicの横幅 */
  .u6EntryList {
    margin-right: 0 !important;
  }
  /* Full Articleの横幅*/
  .u100Entry {
    width: auto !important;
  }
  .condensed .inlineFrame {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  .inlineFrame {
  }
  .inlineFrame > table {
    width: 100% !important;
    margin-right: -10px !important;
  }

  /* 余計な空白できるので幅狭くする */
  #feedlyTabsHolder.picturePicture {
    width: 240px !important;
  }
  /* フィードタイトルの件数がはしすぎる */
  #feedlyTabs {
    overflow-y: auto !important;
    width: 205px !important;
  }
  /* 打ち消し線やめて */
  #feedlyTabsHolder div.simpleunreadcount {
    text-decoration: none !important;
  }
  /* フィードタイトルのフォントサイズ */
  #feedlyTabs .label,
  #feedlyTabs .feedTitle {
    font-size: 11px !important;
  }
  /* 未読数のフォントサイズ */
  #feedlyTabsHolder .simpleUnreadCount {
    font-size: 11px !important;
    margin-top: 3px !important;
  }
  /* 右側の更新、読んだボタンは常に表示 */
  #feedlyNext {
    visibility: visible !important;
  }
  /* Capitalizeやめて! */
  #feedlyTabs > div:nth-child(2) div[id$="_tab"] .label {
    text-transform: none !important;
  }
  /* Featuredのフォントサイズ */
  .topRecommendedEntry .title {
    font-size: 14px !important;
    line-height: 1.3em !important;
  }
  .topRecommendedEntry .summary {
    font-size: 11px !important;
  }
  /* latestとかのフォントサイズ */
  .u0Entry .title {
    font-size: 12px !important;
  }
  /* 既読エントリーはfont-weight変更 */
  .u0Entry .title.read {
    font-weight: normal !important;
  }
  /* Titlesのフォントサイズ */
  .u1Entry .sourceInfo {
    width: 150px !important;
  }
  .u1Entry .title {
    font-size: 12px !important;
    line-height: 1.3em !important;
  }
  /* Tilesの既読エントリーはfont-weightを変更 */
  .u1Entry .title.read {
    font-weight: normal !important;
  }
  /* Magazine, Timelineのフォントサイズ */
  .u4Entry .title {
    font-size: 14px !important;
    line-height: 1.4em !important;
  }
  .u4Entry .summary {
    font-size: 11px !important;
    line-height: 1.4em !important;
  }
  /* Magazine, Timelineの既読エントリーはfont-weight, colorを変更 */
  .u4Entry .title.read {
    font-weight: normal !important;
  }
  .u4Entry .title.read + .summary {
    color: #888 !important;
  }
  /* Mosaicのフォントサイズ */
  .u6Entry .title {
    font-size: 11px !important;
  }
  /* Mosaicの既読エントリーはfont-weightを変更 */
  .u6Entry .title.read {
    font-weight: normal !important;
  }

  /* Full Articleのフォントサイズ */
  .u100Entry .entryTitle {
    font-size: 16px !important;
    margin-bottom: 0.5em !important;
  }
  .u100Entry .entryBody {
    font-size: 11px !important;
  }
  .u100Entry .title {
    font-size: 16px !important;
    margin-bottom: 0.5em !important;
  }

  /* エントリー内容が短いときに空白ができるのでmin-height小さくする */
  .inlineFrame,
  .u100Entry {
    min-height: 20px !important;
  }
  /* エントリー内容にVisit Websiteはいらない(タイトルクリックか続きを読むで) */
  .itemscope .navButton {
    display: none !important;
  }

  /* 広告らしいエントリー薄くする */
  a[href^="http://rss.rssad.jp/rss/ad/"] {
    opacity: 0.3 !important;
    color: #555 !important;
    font-weight: normal !important;
    font-size: 85% !important;
  }
  a[href^="http://rss.rssad.jp/rss/ad/"] + span {
    opacity: 0 !important;
  }

  /* プレビューアイコンを右上(ゴミ箱の右)に持ってくる */
  .itemscope {
    position: relative !important;
  }
  .itemscope .entryTitle {
    margin-top: 0.4em !important;
  }
  /* ゴミ箱 (非表示) */
  .topWikiWidget div[title^="remove this article"] {
    position: absolute !important;
    top: 0 !important;
    display: none !important;
    right: 0 !important;
    margin-right: 23px !important;
  }
  .topWikiWidget {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .topWikiWidget div {
    margin-left: 0 !important;
  }
  .topWikiWidget div div div {
    width: auto !important;
  }
  .topWikiWidget .abZone,
  .topWikiWidget .abZone + div + div {
    display: none !important;
  }
  /* プレビューアイコン */
  div.viewerIcon[data-page-entry-action="previewEntry"] {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
  }
  /* 下のウィジット */
  .bottomWikiWidget,
  .bottomWikiWidget > div {
  }
  .wikiWidgetAction,
  .gplus {
  }
  /* プレビュー表示を白ベースに */
  #quicklookFramePart {
    background-color: #fff !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3) !important;
    border-radius: 4px !important;
    border: 1px solid #cfcfcf !important;
    margin-top: -35px !important;
  }
  #quicklookHeader {
    margin-right: 2px !important;
    background-color: transparent !important;
  }
  #quicklookTitle {
    font-weight: bold !important;
    text-transform: capitalize !important;
    color: #444 !important;
  }
  #quicklookActions a,
  #quicklookActions span {
    text-transform: capitalize !important;
    color: #444 !important;
  }
  #quicklookFramePart iframe {
    margin-top: 5px !important;
    border-color: transparent !important;
  }

  /* プレビューのメニューをアイコン化 */
  #quicklookActions {
    margin-top: -2px !important;
  }
  #quicklookActions,
  #quicklookActions .requiresLogin {
    color: #fff !important;
  }
  /* Save For Later */
  #ql_save {
    text-indent: -9999px !important;
    display: inline-block !important;
    background: url(http://s3.feedly.com/production/6.1.403/images/icon-save.png) no-repeat top left !important;
    width: 16px !important;
    height: 16px !important;
    position: relative !important;
    top: 3px !important;
    margin-right: -10px !important;
    opacity: 0.7 !important;
  }
  /* アイコンないので非表示にしとく */
  #ql_share,
  #ql_save {
    display: none !important;
  }
  /* open tab */
  /* アイコンなくなってた… */
  #ql_open {
/*
    margin-right: -10px !important;
    text-indent: -9999px !important;
    display: inline-block !important;
    background: url(https://s3.feedly.com/production/8.0.417/images/ab-actions.png) no-repeat top left !important;
    width: 22px !important;
    height: 22px !important;
*/
  }
  /* close */
  #ql_clode {
/*
    text-indent: -9999px !important;
    display: inline-block !important;
    background: url(https://s3.feedly.com/production/6.1.403/images/viewer-close-60.png) no-repeat top left !important;
    width: 60px !important;
    height: 22px !important;
*/
  }
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です