ユーザーCSS

概要

ユーザーCSSは、任意のCSSをread.crx 2のページ内に挿入出来る機能です。 以下の点にご注意下さい。

当機能を使用するには、CSSについての基本的な知識が必要になります。

read.crx 2やブラウザのアップデートにより、設定したCSSが、あなたが当初意図していた通りの動作をしなくなる場合が存在する事が予想されます。その場合、あなたが設定したCSSを修正する必要が生じます。

ユーザーCSS参考資料

• /view/index.html: トップページ
• /view/sidemenu.html: 板一覧
• /view/bookmark.html: ブックマーク表示
• /view/board.html: 板表示
• /view/history.html: 閲覧履歴表示
• /view/writehistory.html: 書込履歴表示
• /view/thread.html: スレッド表示
• /view/inputurl.html: 「URLを指定して開く」

/view/index.html_以外のページは、/view/index.html_にiframeで埋め込まれる形で表示されます。

DOMの構造はインスペクタで確認出来ます。 確認しにくいと思われるクラスの解説を以下に記します。

//トップページ
.tab_selected //現在選択されているタブのli

//板覧表示
.accordion_open //アコーディオンが開いている項目のh3に付与されます
.bookmark //ブックマーク板表示のliに付与されます

//ブックマーク表示、板表示、履歴表示
.table_search //検索中のtableに付与されます。[data-table_search_hit_count]に検索のヒット数が収められます。
  .table_search_hit //検索にヒットしたtrに付与されます
  .table_search_not_hit //検索にヒットしなかったtrに付与されます

.table_sort //ソート機能が使用可能なtableに付与されます
  .table_sort_asc //昇順ソート中の項目のthに付与されます
  .table_sort_desc //降順ソート中の項目のthに付与されます

//スレ表示
//レスに付与されるクラス
.last //最後に読んでいた位置
.read //読んだことのあるレスの内、最新のもの。つまり、.read + article以降が未読のレスになります。
.received //受信済みのレス。つまり、.received + article以降が新しく受信したレスになります。
.one //>>1と同一人物のレスだと判定されたレス
.aa //本文中にAAを含んでいると判定されたレス
.written //自身が書き込んだと判定されたレス(version >= 1.2.0)
.to_written //自身が書き込んだと判定されたレスへの返信のレス(version >= 1.7.0)
[data-rescount] //属性値で、返信数が3ならば"1 2 3"のような値が設定されます。(version >= 1.2.0)

//その他
.ob //名前表記中の、トリップや節穴等、システムが付与した文字列
.link //二つ以上レスの有るID/IP/SLIP/トリップのID/IP/SLIP/トリップ表示か、一つ以上の返信数表示
.freq //五つ以上レスの有るID/IP/SLIP/トリップのID/IP/SLIP/トリップ表示か、五つ以上返信の有る返信数表示

//本文中の要素に付与されるクラス
.anchor //レス番号指定のアンカーに付与されます。
.anchor.disabled //極端に沢山のレスを指定したりしているアンカーには.disabledが付与されます。
.anchor_id //本文中のID指定に付与されます
.thumbnail //サムネイル表示に付与されます
.beicon //beicon
.beicon.emoticon //エモーティコン(version >= 0.95.4)
.rock54 //Rock54の文字列 (version >= 1.5.0)
.slipchange //SLIPを変更した際に出る「VIPQ2_EXTDAT～」の文字列 (version >= 1.6.0)

素敵なCSS

• NGレスあぼーん

.ng {
  display: block !important;
}
.ng > .message {
  display: none;
}
.ng:after {
  content: 'あぼーん';
  margin-left: 10px;
}

• サムネイル表示の大きさを任意の大きさに変更

.thumbnail {
  height: auto;
}
.thumbnail > a > img {
  max-height: 600px;
  max-width: 800px;
}

• 返信がついてないレスを非表示(version >= 1.2.0)

article:not([data-rescount]) {
  color: blue;
}

• 5以上返信がついているレスの本文を赤字+太字(version >= 1.2.0)

article[data-rescount~="5"] .message {
  color: red;
  font-weight: bold;
}

• 背景色:黒でも書き込みウィンドウだけ背景色:白と同じにする

.view_write.theme_dark {
  background-color: #f5f5f5;
  color: #444;
}
.view_write.theme_dark header {
  color: #444;
}
.view_write.theme_dark .preview {
  background-color: #fff;
  color: #000;
}
.view_write.theme_dark .iframe_container {
  border-color: #ccc;
}
.view_write.theme_dark iframe {
  background-color: #fff;
}
.view_write.theme_dark textarea, .view_write.theme_dark input:not([type="submit"]) {
  border-color: #ccc;
  background-color: #fff;
  color: #444;
  box-shadow: 0 1px 1px #ccc inset;
}
.view_write.theme_dark textarea:focus, .view_write.theme_dark input:not([type="submit"]):focus {
  outline: none;
  border-color: #36f;
}
.view_write.theme_dark textarea[disabled], .view_write.theme_dark input:not([type="submit"])[disabled] {
  background-color: #fff;
}

• IP表示のSLIPを橙色にする

.view article[data-slip*="["][data-slip*="."][data-slip*="]"] > header .slip {
  color: #F93;
}

• 板でスレ名を改行しない

td {
  white-space: normal;
}

• 画像は全ぼかししマウスを3秒重ねたら表示(グロBOT対策)

.thumbnail:not(:hover) { 
filter: blur(5px) grayscale(100%);
}
.thumbnail:hover{
transition-delay: 3s;
}

• NGレスにマウスを2秒重ねると一時表示(あぼーん表示するをON時)

.ng .message {
display: block !important;
visibility: hidden;
height: 0;
}
.ng:hover > .message {
visibility: visible;
color: gray;
height: auto;
transition-property: all;
transition-delay: 2s;
}

その他

• 有志によるWiki

TODO

• 数が多くなってきたらジャンル別などにページを分ける