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


〈目次〉


設定のしかた

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

備考

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

スタイルシートの例

ダークテーマ

外観

〈各ページの本文〉
f:id:ichbin:20181009133133p:plain
入力中の文字色は、普通の本文と同じ(灰色)です。
内部リンクは青色、コンテンツが作成されていない内部リンクはオレンジです。
入力中のカーソルは白です。
テロメア(更新された行を示す行頭の色)のうち、最近更新されたものは水色で表示します。最近に更新されていないものは無色(背景色と同じ)にしてあります。

〈各ページの下に表示される関連ページおよび、トップページに表示される各ページ〉 f:id:ichbin:20181003141800p:plain

下準備

Scrapboxの設定画面で、Themeとして“Hacker 1”を選択しておきます。
f:id:ichbin:20181003141829p:plain

CSS

※最終更新:2018/10/09
CSSの作成には、塩澤一洋さんの「黒いUserCSS」を参考にし、CSSの一部をそのまま使用させて頂いています。

 .page, .page a, .page video, .page iframe,
 .code-block-start, .code-block-start span {
    filter: invert(100%);
 }

/*各ページの本文が入る領域*/
 .page {           
    box-shadow:none;
    background-color: #dad5cf;
    border:solid 1px #888;
      }

/*各ページの本文の文字色*/
.editor{
    color:#282828 !important;
}

/* 入力時の文字色と背景色*/
 textarea#text-input:focus {
    background: #dad5cf;
}

/*ページ本文でのリンクの色*/
.page a, .page a.link:hover{color:#7c9ff7 !important}
.line a.empty-page-link{color:#fd7373 !important}
.line a.empty-page-link:hover{color:#fd7373 !important}
a.page-link:hover{color:#7c9ff7 !important}
span.quote a.page-link, span.quote a.page-link:hover{color:#88A7F7 !important}

/*各ページの下に表示される関連ページ一覧における本文のフォントサイズ*/
div.col-page .grid li.page-list-item a .description{font-size:13px !important;color:#ccc}

/*関連ページ および トップページにおける各ページの背景色*/
.grid li.page-list-item a {background-color: rgba(57, 60, 70, 0.6)}

/*関連ページ一覧やトップページで各ページにマウスオーバーしたときの背景色変更をしない*/
.grid li.page-list-item a .hover{background-color:rgba(0,0,0,0) !important}

 /* スリムなテロメア */
 .line .telomere .telomere-border, .line .telomere .telomere-border.unread {
    transition: none;
    box-sizing: content-box; border-color: #252A30 
}
 .line .telomere .telomere-border:hover, .line .telomere .telomere-border.unread:hover {
    box-sizing: border-box; width: auto;
    border-color: #252A30; background-color: transparent ;
}
 
 /* 新着以外のテロメアの色と太さ */
 .line .telomere .telomere-border {
    background-color: #252A30; width: 2px;
}
 
 /* 新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread {
    background-color: #4DC3FA; width: 5px;
}
関連情報

各ページの下に表示される関連ページの大きさを変える

各ページの下に表示される関連ページの大きさを変えるものです。
関連ページ一覧の1個目(左上)に表示されるキーワードのカードも、同じ大きさに揃えてあります(こちらの大きさを変えないことも可能です)。 f:id:ichbin:20180921160741p:plain

div.related-page-list li.grid-style-item, div.related-page-list li.relation-label{
    width:190px !important;  /* 横幅を190pxにする */
    height:280px !important;  /* 縦の長さを280pxにする */
    }

関連キーワードのカードの大きさを変えたくない場合は、, div.related-page-list li.relation-labelの部分を消します。

トップページに表示される各ページを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:w500

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

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

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

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

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

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

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

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

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

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

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

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

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