FirefoxのサイドバーにTwitter(などのウェブページ)を表示する方法

Twitterを表示する場合の手順を説明します。他のウェブページを表示したい場合は、下記の4で入力するURLを別のものに変えてください。

1: Firefoxのアドオン“Open in Sidebar”をFirefoxにインストールします。

2: Firefoxのメニューバーの中の「ブックマーク」から「すべてのブックマークを表示」をクリック。

f:id:ichbin:20190213220352p:plain

3: 「ブラウジングライブラリー」というタイトルのウィンドウが開きます。左のサイドバーの「すべてのブックマーク」の中のどこか適当なところをマウスで選択し、上部の「管理」メニューから「新しいブックマーク」をクリック。

f:id:ichbin:20190213220506p:plain

4: 「新しいブックマーク」というタイトルの小さいウィンドウが開くので、URLの欄にhttps://mobile.twitter.comと入力して「追加」ボタンを押す(TwitterのURLはモバイル版を使ったほうが見栄えが良いと思います。URLの欄以外への入力は適当でかまいません)。

f:id:ichbin:20190213220522p:plain

5: Firefoxのブックマークメニューを開き、上述の手順で作ったブックマークをマウスで右クリックし、末尾の“Open Bookmark in Sidebar"をクリック。

f:id:ichbin:20190213220619p:plain

このようにサイドバーでTwitterが開きます。

f:id:ichbin:20190213220649p:plain

備考

  • Side View”というアドオンでも同様のことができます(解説動画)。
  • Vivaldiであれば、「パネル」の中にウェブページを読み込む機能を使うことによって、同様のことができます。

記事にするほどでもない小技集(7)


〈目次〉


Linux版のSpotifyでローカルファイルの再生ができない場合の対処法

デスクトップ環境がGNOMEのときに再生できなくても、Cinnamonならできるかもしれません。AURからインストールしたSpotify(バージョン1.0.98.78-1)をManjaro LinuxのCinnamonバージョン(2019/02/21時点での最新版)で使った場合に、ローカルファイルを再生できることを確認済みです。

ウェブページのURLやタイトルを、自由なフォーマットでクリップボードにコピーできるFirefoxのアドオン

Format Linkは比較的知られているようですが、取得がうまくいかない場合もあるので、代わりとしてLink Text and Location Copierも使えます。新しいフォーマットを追加した時に、その設定内容が正しく反映されない場合は、設定画面をリロードすれば何とかなるようです。

Vivaldiを使用中にAltキーを押すとメニューが開いてしまうのを防ぐ方法

ブラウザのVivaldiを使っている時に、Altキーを含むショートカットキーを押すと、Vivaldiのメニューが開いてしまうことがあります。

f:id:ichbin:20190128104228p:plain
(メニューが開いた状態)

Vivaldiで「メニューの位置を切り替え」という操作をする(Ctrl + mのショートカットキーを押す)と、メニューの各項目がVivaldiのタイトルバーに並ぶ状態になります。この状態では、Altキーを押しただけではメニューが開かれなくなります。

f:id:ichbin:20190128104300p:plain

noteの編集画面をダークテーマにする方法

PCのウェブブラウザで、noteの「テキスト」形式の記事の編集画面を開いた際に、ダークテーマにする方法を紹介します。

設定方法

Chromeの拡張機能Firefoxのアドオンとして利用できるStylusに下記のスタイルシートを適用します。

Stylus自体の使い方の解説は、本記事では割愛しますので、別の記事こちらなどをご参照ください。

適用例

文字色は灰色(#ccc)、リンク部分は白色です。引用部分は黒字で、背景色が灰色(#ddd)。フォント(字体)およびフォントサイズは変更していませんので、それぞれのブラウザの設定を継承します。

f:id:ichbin:20190119124002p:plain

コードブロック部分は枠線が付きます。画像の見た目は通常と変わりません。

f:id:ichbin:20190119124120p:plain

リンクをプレビュー表示した部分と、行頭の「+」アイコンはこのように見えます。入力中のカーソルは白です。

f:id:ichbin:20190119125526p:plain

スタイルシートと適用先の指定

/*全体の背景色*/
div.header-new__inner, button.c-button, body{background:#252a30 !important}

/*文字色*/
span.c-button__label, h1, div#note-body p, div#note-body h3{color:#ccc !important}

/*リンク部分の文字色*/
div#note-body a{color:#fff !important}

/*引用部分の背景色*/
.ns-note .note-body blockquote{background-color:#ddd !important}

/*コードブロック部分の枠線*/
pre.p-textNoteCode{border:solid 1px #ccc}

/*「下書きを保存しました」のダイアログ*/
div.modal-window__foot--close button{background-color:#fff !important}

Stylusの「適用先」のセクションにて、「正規表現に一致するURL」を選んだうえで、

f:id:ichbin:20190119125253p:plain

その右側の欄に次のように入力してください。

https://note.mu/(notes/new|.*/edit)$