月別アーカイブ: 2011年11月

CSS

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;
*/
  }
}
CSS

Gmailの広告を消したり等幅フォントにするユーザースタイル.css

コメントする

そういえばこのユーザースタイル書いてなかったので。
広告消すだけならAdBlockが簡単ですが重くなるので使ってません。

  • 広告を非表示
  • テキストメール本文など等幅フォントに変更
  • メール本文の右側にある送信者一覧を非表示
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("mail.google.com") {

  /* ============== フォント ============== */

  /* テキストメール本文 */
  .ii.gt,
  .ii.gt div {
    font-family: monospace !important;
  }
  /* メール入力欄 */
  textarea  {
    font-family: monospace !important;
  }
  /* メールのソース表示 */
  pre {
    font-family: monospace !important;
  }
   /* 印刷する時の本文 */
  body[onload="Print()"] > table table font {
    font-family: monospace !important;
  }

  /* ============== 広告削除 ============== */

  /* メール上部の広告 */
  div[role="main"] > .mq {
    display: none !important;
  }
  /* メール本文右側の広告 */
  .adC > .nH > .aoh,
  .adC > .nH > .nH > .aoh {
    display: none !important;
  }
  /* メール下部の広告 */
  .hx .PS {
    display: none !important;
  }

  /* ============== 不要な部分削除 ============== */

  /* 印刷する時のロゴ */
  body[onload="Print()"] > table:nth-child(1),
  body[onload="Print()"] > table:nth-child(1) + hr {
    display: none !important;
  }
  
  /* メール本文の右カラム(送信者一覧と広告)を全部消して本文を広くする */
  .adC[style^="width: 1"],
  .adC[style^="width: 2"] {
    display: none !important;
  }
}
CSS

Yahoo!メールの広告を消すユーザースタイル.css

コメントする

わりと最近まで使う機会がなかったYahoo!メールの酷すぎる広告をすぱっと消します。
新バージョン(β)、旧バージョンの両方で確認してます。

全然使ってないので消えてないかもしれません。

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

@-moz-document domain(mail.yahoo.co.jp) {
  /* 旧バージョン */
  #northbanner,
  #NW_ADS, #LB_ADS, #LCS_ADS,
  iframe#SQB,
  #lbadsbox,
  #lrecad,
  #monad {
    display: none !important;
  }
  /* インタレストマッチっぽいやつ*/
  #showFolderForm + div,
  #LCS_ADS + div,
  #emptyFilter + div,
  .modulecontainer.nomessages + div,
  #homeANEMOSAds,
  a[href^="http://rd.ane.yahoo.co.jp/rd"],
  a[href^="http://rd.ane.yahoo.co.jp/rd"] + p[style^="display:block;"] {

    display: none !important;
  }
  /* 新バージョン */
  div[id="yFlex.8"],
  #homeLclAds,
  #homeLRECAds,
  .mailviewHrbAds,
  .mailviewmonAds,
  .jprskyad {
    display: none !important;
  }
}
CSS

Google リーダーのURLを開くアイコンとスターを入れ替えるユーザースタイル.css

コメントする

Google リーダーのフィードエントリー一覧(リストビュー)で左端にある (スターアイコン)と右端にある (URLを開くアイコン)を入れ替えるユーザースタイル。

マウスで操作してるとき読みたいエントリーをぱぱっと開きたいので位置的に左端のがいいんじゃないかということです。

ついでにList View, Expand View, Snippet Viewでそれぞれ場所が違ったのをそれとなく左端に移してます。

※Googleリーダーもう使ってないのでずれたりするかもです。

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

@-moz-document url-prefix("http://www.google.com/reader") {

  /* List View */
  /* ☆を右端 */
  .list .entry .entry-icons {
    left: auto !important;
    right: -15px !important;
  }
  /* >> を左端 */
  .entry-original {
    width: 18px !important;
    left: 2px !important;
  }
  /* Expanded View */
  .cards .entry-title-go-to {
    float: left !important;
    margin-left: 0 !important;
    margin-right: 4px !important;
  }
  /* Snippet View */
  .search .entry-original {
    left: 0 !important;
    top: 7px !important;
  }
  .search .entry-main {
    margin-left: 0 !important;
  }
  .search .entry-attribution,
  .search .entry-title,
  .search .entry-secondary-snippet {
    margin-left: 20px !important;
  }
}