ブラウザの拡張機能“Stylus”の使用例

ウェブブラウザの拡張機能（アドオン）である“Stylus”（Chrome版 / Firefox版）を使って、ウェブサイトの見た目を変えることができます。この記事では、そのサンプルを紹介します。

Stylus自体の使い方の解説は、下記の記事をご覧ください。

---

〈目次〉

---

Twitter

PCブラウザ版で左側のサイドバーをスクロールするためのスクロールバーを消す

ただし、これを適用すると、サイドバーにおいて画面外にはみ出している部分は見えなくなります。

header[role=banner] div{overflow-y:hidden}

適用前

適用後

タイムラインに表示されているツイートのフォントサイズを変える

.TweetTextSize{font-size: 15px !important}   /* 15pxにする場合 */

Web版のTwitterで「＃ 話題を検索」・「トレンド」・「おすすめユーザー」・「フッター」を非表示にする

下記の各タイトルにて「新UI」とあるものは、2019年1月頃から使えるようになった、Web版のTwitterの新しいUI（これまたはこれ）において適用するCSSであることを示しています。
「旧UI」は、それ以前からあるUI（これ）を指しています。

「話題を検索」を非表示にする（新UI）
画面の左上のほうにある「＃ 話題を検索」を非表示にします。

a[aria-label="調べたいものを検索"]{display:none}

「トレンド」を非表示にする（新UI）
タイムラインの右側に表示される「トレンド」を消します（スクリーンショット）。

div[aria-label="タイムライン: トレンド"]{display:none}

「トレンド」を非表示にする（旧UI）

div.Trends{display:none !important}

おすすめユーザー」を非表示にする（新UI）

aside[aria-label="おすすめユーザー"]{display:none}

「おすすめユーザー」を非表示にする（旧UI）

div.wtf-module{display:none !important}

「フッター」を非表示にする（新UI）
フッターとは、これのことです。

nav[aria-label="フッター"]{display:none}

「フッター」を非表示にする（旧UI）

div.Footer{display:none !important}

「トレンド」欄内の広告を消す（旧UI）

「トレンド」欄の中の、このような広告部分が消えます。

li.promoted-trend{display:none}

左下のアカウント表示を消す

Web版のTwitterで左下にある、アカウント名の表示部分（クリックするとアカウント切り替えのメニューになる部分）を非表示にします。

div[data-testid=SideNav_AccountSwitcher_Button]{display:none}

「○○さんがフォローしています」をPCのブラウザにおいて非表示にする

別の記事で解説しています。

サイドバー内の“Twitter Blue”を非表示にする

（この“Twitter Blue”を非表示にします）

a[href="/i/twitter_blue_sign_up"] {
    display: none;
}

DuckDuckGoの検索結果の横幅を変える

DuckDuckGoの検索結果が表示される部分の横幅は、設定画面の「外見」のタブの「ページ幅」のところで3段階に変えられますが、3つのどれを選んでも、幅が狭すぎたり広すぎたりしているかもしれません。

（DuckDuckGoの設定画面）

Stylusで次のようにCSSを適用すれば、望み通りの横幅を指定できます。この例は750pxにする場合です。

.c-info, .c-base, .c-icon, .c-list, .c-product, .c-detail, .zci__main.has-aux, .zci__main--answer, .results--main, .zcm-wrap--header{max-width:750px}

（適用前：設定画面で「普通」を選択した状態）

（適用後）

Evernote Web

Evernote Webで外部リンクにマウスカーソルを合わせたときのポップアップを非表示にする

div#gwt-debug-FloatingLinkBar-root{display:none !important}

Wikipediaのダークテーマ

不完全なところはありますが、おおむね使えるかなと思います（※最終更新：2019/01/23）。

li.selected, li.new, li.collapsible,li#ca-nstab-user,li#ca-talk, div.boilerplate, div.afd, div.vfd, div.xfd-closed, .toccolours, table.infobox td{background-image:none !important;background-color:#333 !important;border:none !important}
div#template-documentation, div.template-documentation{background-color:#333 !important}
.toccolours{border:solid 1px #ddd !important}
div.boilerplate, div.afd, div.vfd, div.xfd-closed{border:solid 1px #ddd}
.VectorTabs ul{background-image:none !important;border:none !important}
/*div#content{border-top-width:1px !important}*/
body, div#content, div#mw-page-base,div#toc,table.infobox,h1,h2,h3,h4,h5,h6,h7{background:#333;color:#ddd}
a:link{color:#3E93C3 !important}
a:visited{color:#9760C3/*#883EC3*/ !important}
a.new{color:#ba0000 !important}
table.ambox, .referencetooltip li,div.catlinks,table.nowraplinks tbody,div.navbox,div.thumbinner,table.tmbox,tabletmbox-content,table.plainlinks,table.wpb-outside{background-color:#333}
.referencetooltip li{border:solid 1px #ddd}
cite:target, li:target{background-color:#333 !important;border:solid 2px #def}

Dynalist

フォントを変える

特にDynalistをFirefoxで開いたときに、Dynalistの設定画面でフォントをsans-serif系（メイリオなど）に変えても、表示はserif系（明朝体系）のままであることがあります。その際は下記のようにするとフォントを変えられます。

*{font-family:sans-serif}  /*sans-serifにする場合*/

背景色を変える

ヘッダーとサイドバーの背景色は変わりません。

div.main-container{background-color:#ddd}  /* #dddにする場合 */

適用例

ヘッダーとサイドバーの背景色を変える

設定画面でテーマとして“Dark”を選択したときの本文部分の背景色（#181818）をヘッダーとサイドバーにも当てはめる場合の例で示します。

/*ヘッダー*/
.AppHeader {
    box-shadow: none;   /* 影を消す */
    background: #181818;   /* #181818 にする場合*/
}

/*サイドバー*/
.is-desktop .LeftPaneSlidebarContainer {
    box-shadow: none;   /* 影を消す */
}
.is-desktop .LeftPaneContainer-nav {
    background: #181818;   /* #181818 にする場合*/
}
.is-desktop .LeftPaneContainer-navItem {
    background: #181818;
}

適用前

適用後

マウスでクリックした行／マウスカーソルがある行の背景色を変える

div.is-hovering{background-color:#ccc}  /*#cccにする場合*/

選択した文字列の背景色を変える

::selection{background-color:#0000ff !important}  /* #0000ffにする場合 */

ドキュメントペイン（サイドバー内）で各ドキュメントの行頭にあるアイコンを隠す

.DocumentItem-icon.pane-item-icon{display:none}

.DocumentItem-header.pane-item-header{padding-left:0}   /* アイコンが消えた部分の余白を切り詰め、ドキュメントタイトルを左端に寄せたい場合は、この行も加える */

ブックマークペイン（サイドバー内）で各ブックマークの行頭にあるアイコンを隠す

.BookmarkItem-icon.pane-item-icon{display: none}

行頭の縦線を消す

下記の画像のb, cの行のように、ある項目の下位項目である行の行頭に縦線が表示されますが、これを消します。

div.Node-children{border-left:none}

Gmail

フォントサイズを変える

body *{font-size:14px !important}  /* 14pxにする場合 */

note（note.mu）

Serif（明朝体系）のテキストもSans-serif（ゴシック系）で表示する

.body-wrapper p{font-family:sans-serif !important}

関連記事

同様の記事として、こちらもあります。

Evernoteのブラウザ版で外部リンクを開くときの「Evernoteの外に移動します」ページをスキップする方法

Evernoteのブラウザ版（Evernote Web）で外部リンクを開こうとすると、このような転送ページが表示されます。

この転送ページをスキップして（＝とばして）、外部リンクをすぐに開くようにする方法を紹介します。

必要なもの

ブラウザの拡張機能“Tampermonkey”（Chrome拡張機能／Firefoxアドオン）を使います。Chrome拡張機能かFirefoxアドオンのどちらかが利用できるブラウザが必要です。

設定の手順

ブラウザに、上述のTampermonkeyをインストールします（※以降はChromeの場合で説明しますが、Firefoxアドオンを使っている場合も、操作は同じだと思われます）。

ブラウザのツールバーに表示されたTampermonkeyのアイコンをクリックして開くウィンドウの中の「新規スクリプトを追加」をクリック。

この画面が開きます。

その画面で、中央の入力欄に表示されている文字を全て消します。そのうえで、下記のスクリプト（出典はこちら）を、その入力欄にペーストします。

// ==UserScript==
// @name         Evernote Outbound Clicker
// @namespace   http://harristribe.co.uk/
// @version      1.0
// @description  Avoids the evernote outbound page 
// @author       Rob Harris
// @include     https://www.evernote.com/OutboundRedirect.action*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    var urlParams = new URLSearchParams(window.location.search);
    window.location.href = urlParams.get('dest');
})();

ペーストしたら、左上にある「ファイル」メニューを開き、「保存」をクリック。

すると、この画面になります。Tampermonkeyの画面は閉じてもかまいません。

以降は、Evernoteのブラウザ版で外部リンクをクリックすると、「Evernoteの外部へ移動します」という転送ページは見えなくなり、すぐにリンク先のページが開かれるようになります。

WorkFlowy / Dynalistの内容を、階層構造を保ったままScrapboxにインポートする方法

WorkFlowy / Dynalistの内容をScrapboxに貼り付けたとき、次のようなことが問題になります。

• 箇条書きの階層が深くなりすぎる（2段目以降）。
• Dynalistに含まれることがあるMarkdownや、Dynalist独自の記法は、Scrapboxで再現されない。

この2つの問題に対応できるツールは6つあります。それぞれの解説と機能比較はこちらをご覧ください。

scrapbox.io

本記事では、6つのツールのうちの1つであるscrapbox-converterというツールの使い方を解説します。

---

〈目次〉

---

scrapbox-converterの使い方

機能

• インポートによって作成されるScrapboxの各ページのタイトルは、手動で指定する必要があります。
• インポート元がWorkFlowyの場合は、最上位の階層は箇条書きにならず、2階層め以下が箇条書きになります（こちらの画像の例では「小説」が最上位の階層）。
  • 元のWorkFlowyと完全に同じにするためには、インポート後に手動で修正が必要です（後述）。
• インポート元がDynalistの場合は、見出し（H1〜H3）や、Markdownで指定した書式・ハイパーリンクなども正しく変換されます。
• Dynalistにおける「ドキュメント」のタイトルは引き継がれません。
• Dynalistの内容が画像を含む場合は、エラーが出るかもしれません。

必要なもの

• npm
  • WindowsまたはMacにインストールする方法はこちらなどをご参照ください。*1
• scrapbox-converter
  • Scrapboxのヘルプにて紹介されている、html / Markdown / enex 形式のファイルをjson形式へ変換するツールです。
  • npmをインストールしたうえで、端末（コマンドプロンプト, Terminal）で
    npm install -g scrapbox-converter
    と実行すればscrapbox-converterをインストールできます。*2

Scrapboxにインポートする手順

WorkFlowyからインポートする場合は下記をご覧ください。Dynalistからインポートする場合はこちらをご覧ください。

WorkFlowyからのインポート

WorkFlowyにて、Scrapboxにインポートしたい部分を開き、画面右上の歯車アイコンもしくは一行目の右端にある「…」の形のアイコンをクリックし、“Export All”もしくは“Export”をクリック。

“Export”というタイトルのウィンドウが開きます。下の方にある選択欄で“Formatted”を選択し、一番下の“click to download”をクリック。

“workflowy-export.html”という名前のhtmlファイルがダウンロードされます。このhtmlファイルのファイル名（拡張子を除いた部分）が、Scrapboxへのインポート後にページのタイトルとなります。ファイル名を変える必要があれば変えます。ただし、

• インポート先のScrapboxに既に存在しているページのタイトルと重複しない名前をつける。

という条件を満たすようにファイル名を付けます。もし重複していると、Scrapboxに既に存在しているほうのページの内容が上書きされてしまうためです。

ここでは、例としてファイル名を“インポート1.html”としてみます。

次に、“インポート1.html”をテキストエディタで開きます。ファイル内の5行目あたりに<style>という文字があり、

70行目あたりに</style>という文字があるはずです。この<style>と</style>で囲まれた部分（行数にして70行弱）を、テキストエディタで全て削除します。

削除しおわると、6行目付近まではこのようになっているはずです。

削除し終わったら“インポート1.html”を上書き保存。

次に、“インポート1.html”が置いてあるフォルダにて、端末（コマンドプロンプト, Terminal）で次のように実行します（末尾のjsonファイルのファイル名は自由に決めることができます。jsonファイルの名前を変えても、インポート後のページタイトルには影響しません）。

scrapbox-converter インポート1.html > インポート1.json

“インポート1.html”が保存されているのと同じフォルダに“インポート1.json”というファイルができます。

次に、インポート先となるScrapboxのプロジェクトの“Settings”の中の“Page Data”のタブを開きます。

“Import Pages”のところで「参照」ボタンを押すとファイル選択のウィンドウが開くので、上述の手順で作られた“インポート1.json”を選択。Scrapboxの画面が下記のように変わったら、“Import Pages”をクリック。

Scrapboxのトップページに自動で遷移します。「インポート1」というタイトルのページが作成されています。

インポート後の修正（任意）

インポートされたページを開くと、WorkFlowyでの階層構造が再現されています。

ただし先述のように、元のWorkFlowyで最上位の階層にあった内容（「小説」）はScrapboxで箇条書きになっていませんので、必要があれば箇条書き化し*3、2階層目以下をさらに1階層下げれば*4、元のWorkFlowyと同じ階層構造になります。また、デフォルトでは元のWorkFlowyでの1行目と2行目の間に空行が1行入るようですので、これも消したほうが万全でしょう。

それらの修正を加えるとこのようになります。

Dynalistからのインポート（htmlファイルの場合）

Dynalistにて、Scrapboxにインポートしたい部分を開きます。一行目にマウスカーソルを合わせると、行頭に「≡」の形のアイコンが現れるので、それをクリック。小さなウィンドウが表示されるので、その中の“Export”をクリック。

“Export”というタイトルのウィンドウが開きます。上の方にある3つのタブのうちの“Formatted”を選択し、一番下にある“Download as file”をクリック。

“dynalist-yyyy-mm-dd.html”という名前のhtmlファイルがダウンロードされます。このhtmlファイルのファイル名（拡張子を除いた部分）が、Scrapboxへのインポート後にページのタイトルとなります。ファイル名を変える必要があれば変えます。ただし、

• インポート先のScrapboxに既に存在しているページのタイトルと重複しない名前をつける。

という条件を満たすようにファイル名を付けます。もし重複していると、Scrapboxに既に存在しているほうのページの内容が上書きされてしまうためです。

ここでは、例としてファイル名を“インポート2.html”としてみます。

次に、“インポート2.html”が置いてあるフォルダにて、端末（コマンドプロンプト, Terminal）で次のように実行します（末尾のjsonファイルのファイル名は自由に決めることができます。jsonファイルの名前を変えても、インポート後のページタイトルには影響しません）。

scrapbox-converter インポート2.html > インポート2.json

“インポート2.html”が保存されているのと同じフォルダに“インポート2.json”というファイルができます。

次に、インポート先となるScrapboxのプロジェクトの“Settings”の中の“Page Data”のタブを開きます。

“Import Pages”のところで「参照」ボタンを押すとファイル選択のウィンドウが開くので、上述の手順で作られた“インポート2.json”を選択。Scrapboxの画面が下記のように変わったら、“Import Pages”をクリック。

Scrapboxのトップページに自動で遷移します。「インポート2」というタイトルのページが作成されています。*5

Dynalistでの階層構造が再現されています。

---

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

アウトライナー実践入門 「書く・考える・生活する」創造的アウトライン・プロ [ Tak． ]

*1:筆者はnpmをManjaro Linuxにインストールして使用しています。Linuxであれば、それぞれのパッケージマネージャからインストールできると思います。

*2:Linuxなら sudo npm install -g scrapbox-converter とする必要があるかもしれません。

*3:箇条書きにするには、行頭に半角スペースを入れるか、行頭でTabキーを押す。

*4:2階層目以下を1階層下げるには、カーソルで範囲を選択をしたうえでTabキーを押す。

*5:インポートによって作成されたScrapboxのページ内に、もしも余分な記号類が見えていれば、こちらの要領でhtmlファイル内の<style>から</style>までの部分を削除してからインポートする必要があるかもしれません。

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情報整理術 [ 倉下忠憲 ]