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

---

〈目次〉

---

設定のしかた

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

備考

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

スタイルシートの例

ダークテーマ

別の記事で紹介しています。

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

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

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

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

---

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

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

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行ずつ表示する細いサイズにします。リンク先ページのアイコンは表示されません。
内部リンクしているキーワードの見出し部分はデフォルトのままになっており、見出しのあるところだけは行が短くなります。

.related-page-list li.page-list-item{
    width:auto !important;
    height:80px !important;  /* この数値を変えれば各ページの高さが変わる */
    float:none
    }
.related-page-list div.icon{
    display:none
    }
.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
    }

〈適用前〉

〈適用後〉

---

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

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

〈適用前〉

〈適用後〉

---

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

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

〈適用前〉

〈適用後〉

---

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

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

〈適用前〉

〈適用後〉

---

引用部分の文字をイタリックにしない

span.quote{font-style:normal}

---

コード記法のフォントサイズを変える

コード記法とはこちらのことです。コードブロック記法とは異なります。

.line code{font-size:100%}   /* 100%にする場合 */

---

本文中の画像に枠線を付ける

 .line .image{border:solid 1px #ddd}  /* 1pxの直線で、色を#dddにする場合 */

アイコン記法で記入したアイコンには枠線は付きません。

---

本文中のリストのマーカーの色を変える

リストのマーカーというのは、下記のようなリスト部分の行頭にある丸印（など）の記号のことです。

• hogehoge

.line .indent-mark .dot {background-color:#ddd}  /* #dddに変える場合 */

---

入力中の文字色と背景色を変える

こちらの末尾のほうに、CSSの書き方が掲載されています。

---

Scrapbox情報整理術 [ 倉下忠憲 ]

Dark theme for Scrapbox

Last update: 2019/11/25

※日本語による説明はこちらです。

Please apply the theme "Hacher 1" together to your Scrapbox project. Otherwise, dark coloring won't be completed on it.

Screenshots

CSS Code

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

.page {
    box-shadow: none;
    background-color: #dbd6d0;  /* for Firefox: #dad5cf */
    border: solid 1px #888;
}

.editor {
    color: #282828 !important;
}

textarea#text-input:focus {
    background: #dbd6d0;  /* for Firefox: #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
}
.line span.quote a.empty-page-link,
.line span.quote a.empty-page-link:hover {
    color: #fd7373 !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;
}

.page-list-item .description code {
    color: #eee
}

.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;
}

LinuxのファイルマネージャーNemo / NautilusでGoogle Driveに接続する方法（Cinnamonの場合）

LinuxのファイルマネージャーのNemoやNautilusでGoogle Driveに接続する方法を紹介します。Manjaro Linux Forumに掲載されているHow toを和訳し再構成・加筆したものです。

この記事に載っているのは、デスクトップ環境がCinnamonの場合の設定手順ですが、GNOME系のデスクトップ環境であれば概ね同じ手順でGoogle Driveに接続できるようになると思われます。

インストールするもの

• gnome-online-accounts *1
• gvfs-goa
• gvfs-google

設定の手順

「システム設定」の中のOnline Accountsの項目を開き、

Gmailのアドレスとパスワードを入力してGoogleにログインし、

GNOMEにGoogleアカウントへのアクセス許可を与える。

最後の画面では、「ファイル」の選択欄をオンにしておく必要があるでしょう（下記）。

ここまで済ませると、Nemo / Nautilusのサイドバーの「ネットワーク」のところに自分のGmailアドレスが表示され、それをクリックするとGoogle Driveに接続できます。*2

*1:Arch Linux系のLinuxを使っている場合は、3つともパッケージマネージャーからインストールできます。

*2:もしサイドバーに表示がなければ、再ログインや再起動が必要かもしれません。

【PCブラウザ版】Twitterの「○○さんがフォローしています」をタイムラインに表示させない方法

機能

PCのブラウザ（FirefoxアドオンまたはChrome拡張機能が使えるブラウザ）でTwitterのタイムラインを閲覧している場合にのみ、「○○さんがフォローしています」という但し書き付きのツイートをタイムラインに表示させないようにすることができます。

設定の手順

“うみの さち”さんのブログ「ツイッター：「○○さんがいいねしました」を非表示にする」で紹介されている方法を応用します。このリンク先で説明されている「導入手順」を実行すると、ブラウザにStylusというアドオン（拡張機能）がインストールされます（2020年5月22日現在、リンク先では「更新を停止します」と書かれていますが、使用することはできると思います）。

Stylusの設定画面を開きます。Firefoxの場合は、「アドオン」を一覧する画面を開き、Stylusのアイコンの右側にある「設定」をクリック。Chrome系ブラウザの場合は「拡張機能」の画面から同様に操作するとStylusの設定画面が開きます。

次の画面で、一番下にある「スタイル管理」をクリック。

次の画面に、“「○○さんがいいねしました」を非表示にする”という名前のリンクがあるはずですので、それをクリック。

次の画面で、右側には、それぞれ「コード1」と「コード2」というタイトルが付いた2つの入力欄があるはずです。

「コード2」の入力欄には、

div[data-component-context="suggest_activity_tweet"]
  {
    display: none !important;
  }

という4行があらかじめ入力されているはずです。これは、「○○さんがいいねしました」という但し書き付きのツイートをTwitterのタイムラインに表示させないようにするためのものです（上述の"うみの さち"さんが作成なさったもの）。*1

「コード2」の入力欄の最後の行に、半角で

 div[data-component-context="tweet-context with-icn"]
     {
     display:none !important;
      }

と書き加えます。*2

したがって、「コード2」のところはこのようになります。

div[data-component-context="suggest_activity_tweet"]
  {
    display: none !important;
  }
 div[data-component-context="tweet-context with-icn"]
 {
     display:none !important;
 }

このように入力し終わったら、その画面の左上にある「保存」ボタンをクリック。設定はこれで終わりです。Stylusの画面は閉じても構いません。

この設定をおこなったブラウザでTwitterのタイムラインを閲覧中は、「○○さんがフォローしています」という但し書き付きのツイートが表示されなくなります。

タイムラインに再び表示させる方法

上述の設定を終えた後で、「○○さんがフォローしています」という但し書き付きのツイートをタイムラインに再び表示させるようにするには、上述の入力内容の前後を、半角の/*と*/という文字で囲んで、下記のようにします。

 /*div[data-component-context="tweet-context with-icn"]
     {
     display:none !important;
      }*/

画面はこのようになるはずです。

この状態で、左上の「保存」ボタンを押せば完了です。

*1:もしも、「○○さんがいいねしました」という但し書き付きのツイートをTwitterのタイムラインに表示させるようにしたい場合は、その4行を消します。

*2:行頭の字下げは、しなくてもかまいません。この4行の中での改行も、必須ではありません。