読者です 読者をやめる 読者になる 読者になる

Milk+ea

Weblog Is My Hobby.

【Chrome】StylishでPocketを2カラムに変える

Pocketに放り込みすぎて読み切れないので、2カラムにして読み飛ばそうという考えです。
ただ<h$>要素がないと縦に長くなってしまうけれども。

こんな感じ

変更したところ

  • ヘッダーの固定を解除
  • 2カラム
    <h$>要素を区切りみたいにしてるので、無いと縦に長くなる。
  • フォント
    自分の好きなやつ
  • 他細かいところ
    ヘッダーのグラデーションを無くす、背景を黒、文字を白など

CSSのコード

#page #content .wrapper {
  background-color: #515151;
  border: none;
}

#page.show_footer #content .wrapper {
  background-color: #f1f1f1;
}

header#PKT_header, #page nav, #page #subnav, #queue_title.titleItem {
  position: absolute;
}

#page nav, #page #subnav {
  background: #eee;
  top: 0;
}

#page_reader[font="serif"] .reader_content {
   font-family: "ほにゃ字Re","Lucida Grande","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; /*** 好きなフォントに ***/
   width: 800px;
   color: #eee;
   margin-top: 5em;
}

.reader_head {
  border-bottom: 1px solid #616161;
}

.reader_head h1, .sub li, .sub li a {
  transition: .15s linear;
}

.reader_head h1 {
  color: #515151;
}

.sub li, .sub li a {
  color: #eee;
}
  
.reader_head h1:hover, .sub li:hover, .sub li a:hover {
  color: #eee;
}

.text_body {
  -webkit-columns: 380px auto;
  -webkit-column-gap: 19px;
  -webkit-column-rule: 1px solid #616161;
}
  
.text_body h1, .text_body h2, .text_body h3 {
  -webkit-column-span: all;
}

.text_body h1, .text_body h2 {
  color: #00B4FF;
  font-weight: bold;
  font-size: 1.8em;
  padding-bottom: .5em;
  margin: 1em 0;
}

.text_body h3 {
  color: #eee;
  font-weight: bold;
  font-size: 1.5em;
  padding-left: 1em;
  border-left: .5em solid #00B4FF;
  margin: 1em 0;
}

.text_body h4 {
  color: #eee;
  border-bottom: 1px solid #00B4FF;
  text-indent: .5em;
}

.text_body a {
  color: #00B4FF;
  transition: .15s linear;
}

.text_body a:hover {
  color: #00ffcb;
}

.RIL_IMG.loaded, .RIL_IMG img {
  max-width: 100%;
}

strong, b {
  font-weight: normal;
}

Stylistの準備

  • 以下からインストール後開く
  • 上のコードを"コード"に貼り付け
  • 適用先で"次で始まるURL"を選択して"http://getpocket.com/"と入力かコピペ
  • 適当な名前を入力して有効にチェック後保存

2 column Pocket (only read page) - userstyles.orgにも投稿してみた。
うまく投稿をできてないので、インストール後に適用先を変える手間が必要な模様。
どうやって適用先を投稿に含めるのかわかんない。

ほにゃ字というフォントがオヌヌメ