Scrapboxのスタイルシート変更例


〈目次〉


設定のしかた

Scrapboxに独自のスタイルシートを適用する手順はこちらに説明されています。

備考

下記の各スタイルシートmax-widthとあるのは横幅の最大値を指定するものですが、そこをwidthに変えれば、横幅を固定できます。

スタイルシートの例

トップページに表示される各ページを1行ずつに細く表示する

トップページに表示される各ページを、タイトルと本文を1行ずつ表示する細いサイズにします。各ページのアイコンは表示されません。
各ページのタイトルの下には、本文の1行目が表示されます。 f:id:ichbin:20180828133801p:plain

div.page-list li.page-list-item{
    width:auto !important;
    height:80px !important;  /* この数値を変えれば各ページの高さが変わる */
    float:none
    }
div.page-list  div.icon{
    display:none
    }
div.page-list  div.description{
    padding:0 12px !important
    }
li.ellipsis{
    float:none
    }

各ページの下に表示される「関連ページ」を各1行ずつに細く表示する

各ページの下に表示される「関連ページ」のそれぞれを、タイトルと本文を1行ずつ表示する細いサイズにします。リンク先ページのアイコンは表示されません。
内部リンクしているキーワードの見出し部分はデフォルトのままになっており、見出しのあるところだけインデントされます。 f:id:ichbin:20180828132138p:plain

div.related-page-list li.page-list-item{
    width:auto !important;
    height:80px !important;  /* この数値を変えれば各ページの高さが変わる */
    float:none
    }
div.related-page-list div.icon{
    display:none
    }
div.related-page-list  div.description{
    padding:0 12px !important
    }
li.ellipsis{
    float:none
    }

トップページで、ページ一覧が表示される領域の横幅の最大値を変える

div.page-list{
    max-width:900px;  /* 900pxにする場合 */
    margin-left:auto;
    margin-right:auto
    }

〈適用前〉
f:id:ichbin:20180828112312p:plain:w300

〈適用後〉
f:id:ichbin:20180828112253p:plain:w300

各ページのタイトルと本文が入る領域の横幅の最大値を変える

div.page{
    max-width:800px;  /* 800pxにする場合 */
    margin-left:auto;
    margin-right:auto
    }

〈適用前〉
f:id:ichbin:20180828103744p:plain:w300

〈適用後〉
f:id:ichbin:20180828103813p:plain:w300

各ページの下の「関連ページ」一覧が表示される領域の横幅の最大値を変える

div.related-page-list{
    max-width:800px;  /* 800pxにする場合 */
    margin-left:auto;
    margin-right:auto
    }

〈適用前〉
f:id:ichbin:20180828121036p:plain:w300

〈適用後〉
f:id:ichbin:20180828121048p:plain:w300

各ページのタイトル・本文・関連ページが表示される領域の横幅の最大値を変える

div.col-page{
    max-width:800px;  /* 800pxにする場合 */
    margin-left:auto;
    margin-right:auto
    }

〈適用前〉
f:id:ichbin:20180828122319p:plain:w300

〈適用後〉
f:id:ichbin:20180828122332p:plain:w300