【TT-RSS】カラムを水平に伸ばすCSS

TT-RSS

出典：Custom CSS to split article content in columns – Tiny Tiny RSS / Themes and Plugins – Tiny Tiny RSS: Community (tt-rss.org)
マヂ感謝😂

サムネのサイズ変更は別記事で紹介

Custom CSS to split article content in columns

Tiny Tiny RSSThemes and PluginsMar 20191 / 11Mar 2019Sep 2019

glo0mMar ‘19

Hi there,
I’m running tt-rss for a lot of years now on my home-server, so first of all thanks for this　great piece of software! :wink:

I just want to share some of my custom CSS, to make full-text feeds much more comfortable to read. Especially on big screens, 4K resolution,…

By default, the lines go all over the screen, and inline-images scale to the full screen width.

The CSS splits the content into columns (justified, with hyphenation) and adds horizontal scroll bars if necessary. The layout looks similar to a regular newspaper.
It works fine with all of my feeds, and night.css-Theme.

You can just paste the code to the custom-css section in the settings.
The first section changes the item-order in the headlines to my preference (optional)

Custom CSS to split article content in columns – Tiny Tiny RSS / Themes and Plugins – Tiny Tiny RSS: Community (tt-rss.org)
/* optional section: change the order of objects in "fresh-articles" view */
.cdm .header .left        { order: 1; }  /* (de-)select | mark | publish */
.cdm .header .titleWrap   { order: 4; }  /* article title */
.cdm div.header div.feed  { order: 3; }  /* feed name */
.cdm .header span.updated { order: 5; }  /* date/time */
.cdm .header .right       { order: 2; }  /* feed icon */
i.icon-score, i.pub-pic   { display: none; }  /* hide "publish"-icon */


/* columns */
.cdm .content-inner {
    columns: auto 350px;
    column-rule: 1px dotted;
    max-height: 80vh;
    overflow-x: scroll;
    hyphens: auto;
    text-align: justify;
}

/* set a minimum-column-height */
.cdm .content-inner::after {
    content: "x";
    display: block;
    line-height: 20;
    break-before: column;
    break-inside: avoid;
    visibility: hidden;
}

上段のオプションで記事内のタイトル、配信サイト名、日付などの順番をソート可能。
ただ左右ふりきって見づらかったりするので、俺は上記設定のまま。

中段の
max-height: 80vh
でカラムの高さを決められる。
俺は40～50vhが丁度良い感じ。
テキストの詰まった読み物が多い方なら多めでいいのかも。

コメント欄で横に伸びた記事のスクロールをどうするか問題が議論されていて、
ScrollAnywhere – Chrome ウェブストア (google.com)
こんなの紹介されてたので記載しておきます。
ミドルボタン(ホイール)をドラッグすると手動スクロールができるブラウザ系アドオン。
FireFox系もあるみたい。

コメント