何を馬鹿な、きっと疲れてるんですよ。
あ、すいません…… しいたけのぱくりですｗｗｗ
というノリで作ったやつを4年ぶりに更新してFirefox 43以降でも使えるよう署名付けました。
Firefox 43で確認。
インストール: xbox_no_are-1.1.1-fx.xpi
※アドオン形式にしましたがStylishやuserChrome.cssだけでいけます。
「CSS」カテゴリーアーカイブ
Firefox 31でシンプルさに定評のあるテーマ “rein” が使えないのをどうにかする
Firefox 28ぐらいまではギリギリ使えたテーマ “rein” ですが、ESR 24.8の次は31になるようで今までこのテーマを使ってきた方々は苦渋の決断を迫られていると思うのです。
ESR 24を使い続けたのもそんな理由だったりします。
先日、Firefox ESR 31.1にしたのをきっかけに別のシンプルなテーマ “Simple White” に乗り換えたんですが、やっぱり違う！これじゃない！
そんな訳でrein-5.4-fx.xpiの中身から画像を取り出して強引にuserChrome.cssで置き換えました。
1日でそれなりになったので正式に対応されるまではなんとかいけそう。
#back-button,
#forward-button,
#home-button,
#urlbar-reload-button,
#urlbar-stop-button {
list-style-image: url(data:image/png;base64,[reinのpng画像をbase64エンコードしたやつ]) !important;
}
#back-button {
-moz-image-region: rect(0px, 16px, 16px, 0px) !important;
}
というような事をDOM Inspectorとにらめっこしながらせこせこ書いていくだけです。
超絶面倒臭いです。
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;
*/
}
}
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;
}
}
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;
}
}
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;
}
}
Google検索の左メニューの「もっと見る」とかまどろっこしいので最初から開いておく.css
Google検索用ユーザースタイル。
まぁ、リアルタイム検索なくなったので今はそれほど使ってないんだけど。
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http://www.google.co.jp/),
url-prefix(http://www.google.com/) {
/* 広告(上) */
#tads {
display: none !important;
}
/* 広告(下) */
#bottomads {
display: none !important;
}
/* 広告(右) */
#rhs {
display: none !important;
}
/* 広告消すので検索結果広く */
#center_col {
margin-right: 0 !important;
}
#center_col .g {
overflow: hidden !important;
}
#center_col .s {
max-width: 70% !important;
}
/* +1ボタン要らない */
/*
.esw.eswd {
display: none !important;
}
*/
/* サイドメニュー全部表示 */
#hidden_modes {
height: auto !important;
display: block !important;
}
/* もっと見るは非表示*/
#showmodes {
display: none !important;
}
/* 文字大きすぎ */
#ms .mitem a,
#ms .mitem span {
font-size: 11px !important;
}
/* サイドメニューの高さ */
#ms .mitem {
line-height: 22px !important;
}
/* サイドメニューアイコンの位置 */
#ms .micon {
margin-top: 2px !important;
}
/* サイドメニュー ウェブ全体から検索とか */
#tbd ul {
margin-bottom: 15px !important;
}
#tbd li {
font-size: 11px !important;
}
}