Firefox / Chromeの検索バーからScrapboxのプロジェクト内検索をする方法

---

〈目次〉

---

機能

• FirefoxやChromeには、特定のサイトを検索エンジンとして追加する機能があります。これを使って、Scrapboxの特定のプロジェクト内をFirefoxやChromeの検索バーから検索することができます。
• 検索対象として指定できるプロジェクトは、ブラウザ1個あたり1つのみのようです。
• モバイル版のFirefoxでは、正しい検索結果になりません（2018/08/29現在）。モバイル版のChromeで実行できるかどうかは未確認です。

Firefoxでの設定方法

検索対象として指定したいプロジェクト（https://scrapbox.io/○○○/）をFirefoxで開き、アドレスバーの右端にある「…」の形のアイコンをクリックすると、小さなウィンドウが開きます。その一番下に、Scrapboxのアイコンと「検索エンジンを追加」というテキストが表示されるので、それをクリック。

Firefoxの「検索バー」を利用している場合は、検索バー内の虫眼鏡アイコンをクリックして開くウィンドウで同じ操作をします。

設定はそれで完了です。

検索のしかた

探したいキーワードを、Firefoxのアドレスバーまたは検索バーに入力すると、その下に候補が表示されます。その一番下にScrapboxのアイコンがあるので、矢印キーやマウスを使ってそのアイコンを選択。

Scrapboxの検索結果が開きます。

Chromeでの設定方法

Chromeの設定画面の中の「検索エンジンの管理」をクリックし、右上に現れる検索欄にscrapboxと入力すると、下記の画像のようにScrapboxという名前の検索エンジンが表示されるはずです（もしそれが無ければ、「追加」ボタンを押して開くウィンドウに下記のように入力します）。

右端の「︙」の形のアイコンをクリックし、「編集」をクリック。

小さなウィンドウが開きます。
「検索エンジン」のところにはScrapbox.ioと入力。
「キーワード」のところにはscrapbox.ioと入力。
「URL(%s=検索語句)」のところには、https://scrapbox.io/hogehoge/search/page?q=%sと入力します（hogehogeのところは、検索対象にしたいプロジェクトのトップページのURL(https://scrapbox.io/○○○/)の○○○の部分で置き換える）。

「保存」ボタンを押して設定完了です。

検索のしかた

Chromeのアドレスバーに半角でscなどと入力すると、アドレスバーの右端に「タブを押して Scrapbox を検索」というテキストが出てきますので、Tabキーを押す。

そして、検索したいキーワードを入力し、Enterキーなどを押すと、Scrapboxでの検索結果が開きます。

---

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

Scrapboxのダークテーマ作成例

Scrapboxをダークテーマで表示する（背景色を暗い色にして、文字色を明るい色にする）ためのCSSを紹介します。

---

〈目次〉

---

スクリーンショット

各ページ

背景色は#24292F、文字色は#d7d7d7です。*1
内部リンクは青色、コンテンツが作成されていない内部リンクはオレンジです。
入力中のキャレット（入力位置を示す縦線）は白です。
テロメア（更新された行を示す行頭の色）のうち、最近更新されたものは水色で表示します。最近に更新されていないものは無色（背景色と同じ）にしてあります。

文字変換中の文字色と背景色

Firefox系ブラウザの場合のみ、変換中の文字色と背景色が、このように黒とオレンジ色の組み合わせとなります。
Chrome系ブラウザなら、変換中の文字色・背景色も、通常のそれと同じです。

各ページの下に表示される関連ページおよび、トップページに表示される各ページ

「関連ページ」および、トップページでの各ページはこのような配色です。

事前の準備

Scrapboxの設定画面で、Themeとして“Hacker 1”を選択しておきます。

※自身が管理者権限を持っているScrapboxプロジェクト（すなわち自身がOwnerまたはAdminであるScrapboxプロジェクト）でなければ、設定画面でThemeを変更することはできません。

CSSを適用する手順

Scrapboxに独自のCSSを適用する手順はこちらに説明されています。

下記のCSSを、その手順で適用してください。

CSS

※最終更新：2019-11-26
※CSSの作成には、塩澤一洋さんの「黒いUserCSS」を参考にし、同スタイルシートの一部をそのまま使用させて頂いています。

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

/*各ページの本文が入る領域*/
.page {
    box-shadow: none;
    background-color: #dbd6d0;  /* Firefox系ブラウザの場合は #dad5cf を適用*/
    border: solid 1px #888;
}

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

/* 入力時の背景色*/
textarea#text-input:focus {
    background: #dbd6d0;  /* 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: #24292f
}
.line .telomere .telomere-border:hover,
.line .telomere .telomere-border.unread:hover {
    box-sizing: border-box;
    width: auto;
    border-color: #24292f;
    background-color: transparent;
}

/* 新着以外のテロメアの色と太さ */
.line .telomere .telomere-border {
    background-color: #24292f;
    width: 2px;
}

/* 新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread {
    background-color: #4DC3FA;
    width: 5px;
}

参考ページ

ダークテーマの作り方について、こちらのリンクが参考になります。

関連記事

色を変えること以外のカスタマイズは、こちらの記事で紹介しています。

ブラウザのアドオンを使う方法

CSSの変更をする代わりに、Dark Readerというアドオンを使う方法もあります。Dark Readerをインストールしてあるブラウザで閲覧した時のみダーク配色になります。

---

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

*1:ただし、CSS内では、これらの色を反転させた値（#dbd6d0, #282828）を指定しています。このような指定の仕方については、参考ページの節にあるリンク先の記事をご覧ください。

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