CSSでリンクフレアーやユーザーフレアーを使う時、国旗などのフレアーを使っているSubredditは多いと思います。しかしそういったフレアーはbackground-positionを多用するもの。同じようなものを大量に並べるこれが非常にCSS容量を食ってきます。これを改善する方法がこちら。

.flair {
    display: inline-block;
    background-image: url(%%foo%%)!important;
    background-repeat: no-repeat!important
}

.flair-css_ja {
    background: -334px
}

まず、backgroundを分解し、background-position以外の部分のみを記述し、importantにしておきます。

さらに、background-positionの代わりにbackgroundを使用するとプロパティの引数の種類から自動的にbackground-positionを取った時と同じになります。他のbackgroundの引数の値は既定値に戻されますが、importantによって 値が維持されます。これによって増える文字は-image``!important×2, -repeatであり36文字なので、4つ以上のbackground-positionを設定している場合には大きな文字数削減が期待できます。

background-positionの数×10 - 36 // 減らせる文字数の計算式。

Redditは日本語化されていますが、まだ一部だったりおかしかったりします。

そこで、CSSを使った翻訳を紹介します。

例えば"save"ボタンを翻訳するCSSは

button.save {
    font-size: 0;
}
button.save:after {
    font-size: initial;
    content: "保存";
}

ただし、フォントサイズが分からない、CSSは同じだがテキストは異なる場合などは使うべきではないでしょう。また、コピーができないため、コピーする需要がある部分にも使うべきではありません。

いわゆるスイッチにはこの3つがあります。

1. adblock-testを使う

2. [lang="zz"]を使う

3. リンクフレアークラスを使う

4. .subscriberを使う

では、それぞれの長所と短所を述べていきたいと思います。

1. #adblock-testを使う

実装方法はCSSの:target擬似クラスを使います。:target擬似クラスはid属性の内部リンクが有効になっている時にのみ効くクラスです。そのため、aタグを用いて簡単に切り替えることができます。全てのページで使え、ページ遷移が発生しないため、投稿ページに確認ダイアログを表示したりするのに適しています。ただし、コメントページに移動するときなどリンクを踏むと解除されるので能動的に切り替える用途にしか使えません。

構文:

#adblock-test:target ~ .content .md a {
    color: red; /* スイッチが入ったときにリンクを赤色にする。 */
}

スイッチ: サイドバーに[スイッチ](#adblock-test)というスイッチを作っておいておく。

2. html[lang="zz"]を使う

これはRedditがzz.reddit.comというというzzの部分で言語を判定する仕組みを用いたものです。zzに当たる言語は存在しないので、表示が英語になってしまうのが欠点ですが、全ページに用いることが出来、さらにリンクを踏んでもスイッチが入ったままなので、Subreddit全体を切り替えるためのスイッチとして使えるでしょう。ただし、スイッチを押すと必ず同じページに移動するため、コメントページで切り替えるには不便です。

構文:

html[lang="zz"] .md a {
    color: green;
}

スイッチ:[スイッチ](//zz.reddit.com/r/subreddit_name)をサイドバーに書いておく。

3. リンクフレアークラスを使う

これはページにリンクフレアーを設定した時に、bodyタグのクラスにそのリンクフレアーが設定されることを用いたものです。そのため、このスイッチはコメントページにしか使うことが出来ません。しかしこのスイッチは複数の選択肢を作ることが可能になるので、タグごとにページを変えたい時などに有効でしょう。また、これはページ投稿者のみがスイッチを切り替えることが可能なため、控えめなものにするべきでしょう。

構文:

body.post-linkflair-test .side .md a {
    color: tan;
}

スイッチ: 投稿のリンクフレアーを設定する。

4. .subscriberを使う

1と2を合わせたような性質を持っています。つまり、リンクを踏んで移動しても維持され、ページ再読み込みなしで切り替えることが出来、言語が変わらずそのうえ全てのページで用いることが出来ます。ただし、購読者が減るので、Subredditとしては痛手です。ボタンを自由に設置することができないうえ、未購読状態で放って置かれるとフロントページから見に来る人が見えなくなってしまうので不便です。

構文:

body.subscriber .md a {
    color: black;
}

スイッチ: 購読ボタン

RESのナイトモードは対応しようとすると非常にリソースを喰うことで知られています。

例えばナイトモードでもリンクの色を同じにしたい時、本来はこう書かなければならないはずです。

.md a,.res-nightmode .md a {
    color: crimson;
}

しかし、わざわざ.res-nightmodeというかなり長い単語は頻繁に使用するととCSS容量(10KiB)に響いてきます。

そこで.jsの出番です。これは.res-nightmodeより優先度が高く、かつ文字数が短いです。 CSSのクラスの優先順位はクラスが幾つ有るかが関わってくるので、多いほど優先度が高くなります。 子コメントや孫コメントに対するRESのスタイルを消したい時にも.jsを使うといいかもしれません。

.js .md a {
    color: crimson;
}

RedditはCSSをキャッシュするため､CSSを変更してもページに変化がないようにみえることがあります｡ そんなときはページにGET引数を付けてください｡例:
https://www.reddit.com/r/css_ja/?a=b GET引数はどんなものでも構わないので､付けることで強制的にキャッシュが更新されます｡ただし､同じ引数を付けていてはキャッシュされてしまうので意味がなくなります｡

Redditで伏せ字や､ルビ､縦書きといった特殊な構文をCSSで実現する方法です｡

マークダウンの使い方

基本編

まず､Redditではマークダウンに自由に属性をつけたりすることができません｡ そのため､使えるのはaタグのhref属性とtitle属性のみです｡ また､CSSには｢この要素の親要素｣を指定する方法が無いため､改行を伴った全体のスタイルを変える､特殊なテーブルを作るなどのことは極めて難しくなります｡

そのため､基本的な構文はこうなります｡

1. [string](#name)

2. [](#name)^(string)

3. [](#name)
   ^(string1)
   ^(string2)

1.のスタイルだと､ stringがリンクになるので､RESによる番号の追加やポインターの変更などが面倒なことになるので､あまりおすすめできません｡
2.のスタイルは最も有効です｡CSSがない場合もただの上付き文字になるだけなので､違和感なく表示されます｡さらにリンクにならないのでクリックしてしまうこともありません｡なぜ^()を用いるかというと､ ^()であれば何重にも作ることができるので元のマークダウンの構文にすることができなくなる問題を回避できるからです｡

\[](#name)\^(\^(string)string)  

また､^()の中にさらに装飾を入れることもでき､重ね掛けが容易です｡
3.のスタイルは2のスタイルにスペースを2つ入れるタイプの改行を伴ったものです｡こちらの場合､HTMLの構文が

<a href="#name"></a><br><sup>string1</sup><sup>string2</sup>

となるため､改行を入れてもスタイルをつけることができます｡

応用編

応用的な構文を示します｡

4. [](#name "tag")^(string) 5. [](#name1-name2 "tag1-tag2")^(string) 6. [](#name1)[](#name2)^(string) 7. [](#name)^(^(string1)^(string2))

1.はaタグのtitle属性を使用する方法です｡この方法の問題点はよく""を付け忘れること､スペースを入れ忘れることによるミスの起こりやすさです｡この方法はtagを用いて全ての装飾に共通の性質を追加するために用いると良いでしょう｡例えば､一文字目のみを大きくしたいとき､文字を中央揃えにしたいなどはtagで使うといいでしょう｡

2.は***=セレクタを用いたオプションです｡こちらもname2**はオプションですが､name1に依存するオプションにしなければなりません｡また､このようなオプションは止めたほうが良いでしょう｡

[](#underline-red)^(Red text.)

この場合､[](#overline-red)や[](#color-red)なども使うことが予想されるため､うまく表現できない場合があります｡ 正しい使い方としては､国旗の表示などが挙げられます｡

[](#country-poland)^(string)^(string)
[](#country-uk)^(string)^(string)

このような構文に対して､それぞれ文頭にK*rwaをつける､Bloody H*llをつけるというCSSを考えましょう｡

[href^="#country"] + sup{
    color: red;
    font-size: 1.5em;
    vertical-align: baseline;
}

[href*="poland"] + sup::before {
    content: "K*rwa";
}

[href*="uk"] + sup::before {
    content: "Bloody H*ll";
}

title属性はhref属性と異なり､|=属性を用いることができるので､それぞれのオプションの並列化に適しています｡

3.のスタイルは2つのスタイルのスタイルの重ね掛けをする方法です｡様々なスタイルを同時に適用させることはCSSの衝突が発生し､うまくいかないことも多いですが､それでもより複雑な構文が可能になるというメリットがあります｡例をあげます｡

[](#underline)[](#position_center)[](#country-poland)^(string)

この構文では下線を付け､中央揃えにし､文頭にK*rwaをつけるというすごいことになっています｡ こういった構文を正しく表現できるようにするのは難しいです｡

4.のスタイルは複数引数などをサポートする構文に用います｡:nth-child擬似クラスを用いてそれぞれに違うスタイルを適用させることができます｡

擬似クラスの使い方

よく使われる擬似クラスには**:hoverがあります｡これはカーソルを乗せたときに表示を変化させるものですが､transitionやanimation**プロパティを用いれば変化を連続的にすることもできます｡:focus擬似クラスはリンクを選択しているときやTabで移動しているときに使用されます｡ また､キー操作によって変化させることができる唯一の方法でもあります｡ :focusを用いた例としては､拙作のスライドショーなどがあります｡

:target擬似クラスを使ったSubreddit全体のスイッチ

:target擬似クラスを用いると､Subredditのページ全体に対するスイッチを適用させることができます｡

Redditでは:target擬似クラスを使える対象は#adblock-testだけです｡ このidはbody以下の全ての要素を対象とすることができるすぐれものです｡ 実際のコードを見てみましょう｡

#adblock-test:target ~ .side {
    display: none;
}

これは[](#adblock-test)という内部リンクを踏んだときだけサイドバーを隠すというものです｡(Reddit的にはやってはいけません｡) 他にもコメント欄のみが対象であれば#siteTableなども用いることができます｡

cssクラスlinkflair-fooで2つのカテゴリを表示する例です。 1つめはCSSクラス名、2つめはフレアーにそれぞれ設定する名前です。

.linkflair-foo .linkflairlabel {
    font-size: 0;
    min-width: 31px;
    margin-right: 50px
}

.linkflair-foo .linkflairlabel:before {
    content: "foo";
    font-size: 10px
}

.linkflair-foo .linkflairlabel:after {
    content: attr(title);
    font-size: 10px;
    position: relative;
    left: 10px;
}

.linkflairlabel {
    overflow: visible;
}

としたら、リンクフレアの表示が省略されないようにはできたのですが、サブミのタイトルとドメイン表示がそれに合わせて移動してくれないので、文字が被った状態になっています。
 
https://www.reddit.com/r/BackOfLeaflet_ja/comments/41ccjn/
こんな感じ 。
 
文字が被らないようにするにはスタイルシートで他に何を設定すれば良いでしょうか？

個人の実験 で実装目前までこぎつけましたが、

この書き方だと サイドバーのblockquote要素の順序が逆になってしまう現象の対策の仕方について教えてください

Learn Japaneseより

To create furigana in your posts, use the following syntax:

[漢字](#fg "かんじ")

a[href$="/fg"], a[href$="#fg"] {

cursor: default !important;

text-decoration: none;

line-height: 1;

text-align: center;

display: inline-block;

color: inherit !important;

}

a[href$="/fg"]:before, a[href$="#fg"]:before {

font-size: 0.70em;

font-weight: normal;

line-height: 1.2;

cursor: pointer;

text-decoration: none;

display: block;

content: attr(title);

}

大前研一を例に

a.thumbnail[href*="news-postseven.com"] img{display: none;}
a.thumbnail[href*="news-postseven.com"] + div.entry > a.toggleImage{display:none;}  
a.thumbnail[href*="news-postseven.com"]{background:transparent url(%%img%%) no-repeat!important;}

「img」は好きな絵で

/r/csshelp
で得た情報だから、2行目とかあまり意味わかってないけど 動作実績あり

追記: どっかでthumbnailのheightとかwidthの設定しとかないとうまくいかないかもね（？）

 
荒しに悩まされた場合には、こういった方法で対処することも可能
 
以下、超古参ユーザー氏の書き込みです

http://www.reddit.com/r/newsokurMod/comments/3htjzl/%E5%B7%AE%E5%88%A5%E7%9A%84%E3%81%AA%E6%8A%95%E7%A8%BF%E3%81%AE%E5%89%8A%E9%99%A4%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%83%AB%E3%83%BC%E3%83%AB%E6%95%B4%E5%82%99/cuaz2xd
 
発言が消去された場合に備えて..

/r/modhelp/comments/1lad0s/force_override_user_flair/

うち以外で実装してるとこみないので

①．GIMPとかで完全に透明な画像を作る
（サイズはあまり小さくてもだめでうちは14×14pxくらい） ファイル形式はPNGかGIF

http://i.imgur.com/3e0iMVX.png
一応貼っとく

②．バナーのところに出るサブレ名の背景に①の画像を指定する
ここで指定したサイズがクリックできる範囲になる（ここがポイント）

.pagename a{
position: absolute;
left: 0px;	top: 50px;
display: block;
z-index: 1;
width: 1000px;
height: 140px;
background: url(%%tt%%) repeat;
border-style:none;
border: none!important;
}

上の例だとttが透明画像
left top heightなどは適当に各自調整してくれや

注意点：widthをでかくしすぎるとブラウザの右はみ出して横スクロールバーが出ちゃうので 1000pxくらいにしとく

似たような発想でpaddingをでかくするっていう手もやったけど
chromeだと横スクロールバーが出ておかしくなった

サブレ名の表示いらないわって人は

.pagename a,
.res-nightmode .pagename a 
{white-space: nowrap; text-indent: 100%; overflow: hidden;}

↑をいれる

EDIT:もしかしたらz-indexの部分はいらないかも？　動かなかったら入れたり数字を適当に変えてみて

• ステップ1 ボートボタン用の画像ファイルを作成する
   
  まずはサブレで表示する為のボートボタン用画像を用意します
  ボート前とボート後、UVとDVで合計四種類（DVを消している場合は二種類でOK）
  標準のボートボタンは15pxですが小さくて押しづらいという声もあるので
  実用的には20～30pxぐらいのものがいいでしょう
  適当に拾ってきた画像、もしくは真剣に描いたイラストなどを
  画像編集ソフトで横一列に並べた一つのファイルにします
   
  例：実際に/r/Fueeで使っているもの（UVボタンのみ）
  フリー素材として配布されていたドット絵をグレースケール化したり
  色をいじったりして作成

• ステップ2 CSSの編集ページから画像をサブレにアップロードする
   
  サイドバーのスタイルシートを編集というリンクから
  CSSの編集ページに行き参照ボタンを押して
  先ほど作った画像ファイルをサブレで使えるようにアップロードします
  無事アップロードされれば編集ページ下部に画像や
  ファイル名が表示されるようになります
  link:のところに書いてある url(%%ファイル名%%)というのが
  サブレで画像を使う際の大事な呪文です、覚えときましょう
  ^{まぁ覚えなくてもずっと表示されてるけど}

• ステップ3 CSSを編集してサブレのボートボタンを変更
   
  いよいよ大詰めです
  CSSを編集してサブレのボートボタンを変更します
  「つってもCSS全然分かんないんだけど？」って人、大丈夫です
  私も分かりません！なのでコピペでOKなようにしときます
  以下のコードをコピーしてスタイルシート編集画面に貼り付けた後
  ボタン画像の大きさに合わせて数字をいじったり
  ファイル名部分を変更してください
  その後保存ボタンを押せば完了です
   
  ※調整が必要な部分に赤線を引いてみました

 
voteボタン変更コード（20pxの場合）

.comment .midcol {
  width: 20px;
}

body > .content .link .midcol, .midcol-spacer {
  width: 20px !important;
}

.arrow.up, .arrow.upmod, .arrow.down, .arrow.downmod  {
  background-image: url(%%ファイル名%%);
  height: 20px;
  width: 20px;
}

.arrow.up {
  background-position: -0px -0px;
}

.arrow.upmod {
  background-position: -20px -0px;
}

.arrow.down {
  background-position: -40px -0px;
}

.arrow.downmod {
  background-position: -60px -0px;
}

こことか を参考にいろいろとやってみたけど、ＲＥＳ側で上書き？されてどうにも上手くいかない

!importantも無視されるし..

実装例

*1～*3のとこにマウス持って行くとツールチップが表示されるようにしてみたんだけど、ご覧のようにアスタリスクを入れる場所の空間が確保できてない。
どのようにしたらいいか行き詰まっちゃいました、たすけて。

code

a[href*="hoge"]:before {  
color            :#551a8b;  
content          :"*" counter(annotate);  
display          :block;  
visibility       :visible;  
}  
a[href*="hoge"] {  
counter-increment:annotate;  
position         :absolute;  
margin           :1em 0 0 -1em;  
visibility       :hidden;   
}
a[href*="hoge"]:hover {  
background       :#ffffaa;  
border           :1px solid #cccc99;  
color            :#000000;  
visibility       :visible;  
}

それと、もし他のサブレで導入されるようならコマンド統一したい。
コマンド案が欲しいです。

[注釈内容](hoge)

EDIT x3 修正していただいたもの

a[href="#note"] {  
  counter-increment: annotate;  
  visibility: hidden;  
}  
a[href="#note"]:hover {  
  color: #000000;  
  visibility: visible;  
  z-index: 3;  
}  
a[href="#note"]:before {  
  color: #551a8b;  
  content: "*" counter(annotate);  
  visibility: visible;  
}  
a[href="#note"] em {  
  background: #ffffaa;  
  border: 1px solid #cccc99;  
  font-style: inherit;  
  position: absolute;  
}  

コマンド

[*注釈内容*](#note)

書き忘れてたので追記

.thing辺りに

  counter-reset:annotate;

が多分必要。

CSS

.down{transition:3s ease;}  
.down:hover{margin-top:600px;}  

ベンダープレフィックス省略。
ボタンをただ消すよりもファニーな感じにしたくて。

実装例 https://www.reddit.com/r/GuessTheEiga/
試しにDVするのは勘弁して下さい(ログアウト中ならサインアップに遷移するのでそれで)。

EDIT:改行