Chrome / Firefoxの拡張機能 Stylus の基本的な使い方

ウェブブラウザ(Chrome / Firefox)の拡張機能である“Stylus"の使い方の基本的なところを解説します。


〈目次〉


インストール

Chrome

ChromeウェブストアのStylusのページを開き、「Chromeに追加」のボタンを押してインストール。

f:id:ichbin:20190308112938p:plain

Firefox

Stylusのページを開き、「Firefoxへ追加」のボタンを押してインストール。

f:id:ichbin:20190308113054p:plain

「インストール済みのスタイル」を管理する画面を開く

ツールバーに表示されているStylusのアイコンをマウスでクリックし、「管理」のボタンをクリック。*1

f:id:ichbin:20190310135810p:plain

「インストール済みのスタイル」という画面が開きます。

f:id:ichbin:20190308114227p:plain

新しくスタイルシートを作成する

上述の「インストール済みのスタイル」という画面にて、左側にある「新スタイルを作成」のボタンをクリック。

f:id:ichbin:20190308134109p:plain

「スタイルを追加」という画面が開きます。

f:id:ichbin:20190308143405p:plain

左上の「名前を入力してください」と書かれている欄に、このスタイルシートの名前を自由に入力します。
右上の「コード1」という入力欄に、スタイルシートCSS)を入力します。

このスタイルシートを、例外なくすべてのウェブページに適用させたい場合は、左上の「保存」ボタンを押します。設定はそれで完了です。
特定のウェブサイトやウェブページにのみ適用させたい場合は、下記の手順を実行します。

適用先を指定する

「コード1」に入力したスタイルシートを適用する対象(ウェブサイトや特定のURL)を指定する手順です。
「コード1」の入力欄の下にある「+」のアイコンをクリックすると、

f:id:ichbin:20190308135301p:plain

下記の画像のように選択肢が表示されるので、どれか1つを選び、

f:id:ichbin:20190308134928p:plain

「コード1」に入力したスタイルシートを適用させたいウェブサイトやウェブページが適用対象に含まれるように、右側の入力欄にURLやドメインを入力します。
例えば、Twitterを適用対象にしたい場合は、このように書くことができます。*2

f:id:ichbin:20190308135719p:plain

この入力欄の右側にある「+」のアイコンをクリックすれば、適用先を指定するための新しい入力欄がここに追加されます。

ここまで終えたら、左上の「保存」ボタンを押します。

f:id:ichbin:20190308140401p:plain

「保存」ボタンを押した後は、この画面は閉じてもかまいません。

作成済みのスタイルシートを編集または削除する

「インストール済みのスタイル」の画面で右側に表示されている各スタイルの名前をクリックすると、「スタイルを編集」という画面に入ります。
名前の右側に表示されている×のアイコンをクリックすると、そのスタイルを削除できます。

f:id:ichbin:20190308120818p:plain

適用のオン/オフを切り替える

ツールバーから切り替える

上述の手順で作成したスタイルシートの適用先(この例ではhttp://twitter.com/で始まるURL)に当てはまっているウェブページをブラウザで開いた状態で、ブラウザのツールバーに表示されているStylusのアイコンをマウスでクリックします。

f:id:ichbin:20190308144442p:plain

このウェブページに適用されているスタイルシートの名前が表示されており、それぞれの行頭に、適用のオン/オフを切り替えるチェックボックスがあります。

「インストール済みのスタイル」の画面から切り替える

上述の「インストール済みのスタイル」の画面にて、各スタイルシートの名前の左側にあるチェックボックスにチェックを入れるとオン、外すとオフとなります。

f:id:ichbin:20190308143206p:plain

*1:ブラウザのメニューから開く方法もありますが、説明は割愛します。

*2:この例では、選択肢として「次で始まるURL」を選んでいますが、その他の選択肢を選ぶこともでき、各選択肢に応じて右側の入力欄に入力すべき文字列が異なります。

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


〈目次〉


Firefox

Side Viewを使う方法

Firefoxのアドオン“Side View”をインストールした後で、下記のいずれかを実行すると、目的のページがサイドバーに表示されます。

  • Firefoxで普通にウェブページを表示して、そのページ上で右クリックして“Open in Sidebar”をクリックすると、そのページがサイドバーに表示されます。
  • Firefoxで普通にウェブページを表示して、そのページ内にあるリンクを右クリックして“Open in Sidebar”をクリックすると、そのリンク先のページがサイドバーに表示されます。
  • Firefoxのブックマークツールバーやブックマークメニューにあるブックマークを右クリックして“Open in Sidebar”をクリックすると、そのページがサイドバーに表示されます。

Open in Sidebarを使う方法

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

Vivladi

Vivaldiであれば、「パネル」の中にウェブページを読み込む機能を使うことによって、いわゆる「サイドバー」の位置にウェブページを表示させることができます。

Vivaldiの左上のメニューで「表示」の項目を開き、「パネルを表示」にチェックを入れます。

f:id:ichbin:20190226081126p:plain

画面の左端にある「+」のアイコンをクリックすると、

f:id:ichbin:20190226081451p:plain

パネル(サイドバー)で開きたいURLを入力するウィンドウが表示されます。そこにURLを入力して右端の「+」をクリック。

f:id:ichbin:20190226081716p:plain

すると、そのページのアイコンが画面の左端のところに表示されます。それをクリックすると、そのページがパネルで開かれます。

f:id:ichbin:20190226082018p:plain
Twitterを開いた状態)

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


〈目次〉


Dynalistで既存のアイテム(項目)への内部リンクを素早く作る方法

行頭にて、半角で[[と入力してから、リンク先にしたいアイテム(既存のアイテム)に含まれている文字を1文字以上入力すると、候補が表示されます。

f:id:ichbin:20190302165719p:plain

候補の中から選択したアイテムへの内部リンクが作られます。

f:id:ichbin:20190302165759p:plain

なお、リンク先のアイテムの先頭から書く必要はありません。

f:id:ichbin:20190302165930p:plain

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

デスクトップ環境がGNOMEのときに再生できなくても、別のデスクトップ環境ならできるかもしれません。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