【Scrapbox】日記用途向け タグ検索ボタン

Scrapbox 便利ですよね

scrapbox.io

Scrapboxを日記用途に使っている人も多いかと思いますが、

その中で、

「10月のものだけ見たいのだけれど・・・」

と思った時、一々

• 10月の記事を開いて10月タグをクリック
• 検索ボックスに「#10月」などと検索する

などの方法をとるのは面倒ですよね？

「10月ボタンのようなものがあって、それをクリックしたら10月タグがついた記事が一覧で出たらいいのに・・・」

と思ったこと、ありますよね？僕はあります。

ということで、UserScriptで作成します。

1. UserScriptを許可する

下記記事参照

scrapbox.io

2. 10月タグを検索するボタンを設置する場合

javascript例

$("#app-container > div > div:nth-child(3)").after("<div class='container my-toolbar'><a href='/[プロジェクト名]/10月'>10月</a></div>");

css例

.my-toolbar a {
    display: inline-block;
    color: #363c46;
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
    line-height: 30px;
    margin-right: 10px;
}
   
.my-toolbar a:hover {
    text-decoration:none;
    color: #363c46;
    background-color:rgba(0,0,0,0.15);
}

あとは好きなようにjs/cssをカスタマイズすると良いと思います。

私の場合は[先月][今月][来月]が表示されるようにしてみました。