ブラウザの拡張機能である“Stylus”（Chrome 版 / Firefox 版）を使って、ウェブサイトの見た目を変えることができます。この記事では、そのサンプルを紹介します。 Stylus 自体の使い方の解説は、こちらをご参照ください。 〈目次〉 Cosense Cosenseのページに掲載した画像をマウスでクリックして大きく表示したとき、画像の縦の長さを制限する ページタイトルの直下に横線をひく WorkFlowy カーソルのある行に背景色をつける 関連記事 Cosense Cosenseのページに掲載した画像をマウスでクリックして大きく表示したとき、画像の縦の長さを制限する 画像の縦の長さが、ウィンドウの高さよりも長いときに、はみ出ないようにするために使います。 max-heightの値として一応、100vhを採用していますが、それでも縦がはみ出る場合は、少し減らして90vhぐらい

〈目次〉 Firefox / Firefox系ブラウザ アドオンを使用する Side View Open in Sidebar その他のアドオン （備考）サイドバーの外観の変更 Floorpのサイドバーを利用する Vivaldi Firefox / Firefox系ブラウザ アドオンを使用する Side View Firefoxのアドオン“Side View”をインストールした後で、下記のいずれかを実行すると、目的のページがサイドバーに表示されます。 Firefoxで普通にウェブページを表示して、そのページ上で右クリックして“Open in Sidebar”をクリックする。 Firefoxで普通にウェブページを表示して、そのページ内にあるリンクを右クリックして“Open in Sidebar”をクリックする。 Firefoxのブックマークツールバーやブックマークメニューにあるブックマークを

PCのウェブブラウザのサイドバーにSpotifyを表示させておくと、ブラウザで他の作業をしている間もSpotifyを操作できます。その方法を紹介します。 ブラウザとしてVivaldiを使用する場合の手順を示します。*1 （VivaldiのサイドバーにSpotifyを表示した例） 手順 Vivaldiのサイドバー（Vivaldiの用語では『パネル』）を開き（ショートカットキー：F4）、左端のアイコンが並んでいる部分の一番下にある+のアイコンをクリックすると、URLを入力する欄が現れるので、そこにhttps://open.spotify.comと入力して、入力欄の右側にある+のアイコンをクリック。 すると、サイドバーの左端にSpotifyのアイコン（緑色の丸いアイコン）が表示されます。これをクリックすると、サイドバー内にSpotifyが表示されます。*2 操作はマウスクリックで行います。 （再

ウェブブラウザであるVivaldiの右クリックメニュー（コンテキストメニュー）は、 ウェブページ内のテキストエリア（入力欄）で右クリックしたとき ウェブページ上で右クリックしたとき リンクを右クリックしたとき 画像を右クリックしたとき テキストを選択して右クリックしたとき 音声や動画を右クリックしたとき という6通りの場合のそれぞれにおいて、右クリックメニューの内容を変更することができます。 具体的には、 項目を追加／削除する 項目を並べ替える 項目をサブメニューにまとめる（一部の項目のみで可能） 項目の名前を変える という変更ができます。その変更方法を紹介します。 Vivaldiの設定画面を開いて（ショートカット：Ctrl + F12）、左上のほうにある「外観」をクリックしてから下にスクロールすると、「メニューのカスタマイズ」というタイトルのコーナーがあります。 これのすぐ下にある選択欄

ブラウザで開いたウェブページのタイトル・URLと、そのページ上で選択したテキストを、Logseqに貼り付ける形に整形するブックマークレットを作りました。 〈目次〉 サンプル 使用環境と必要なもの ブックマークレットの使い方 ブックマークレットの登録 コピーの手順 貼り付けの手順 実行例 サンプル （「（社説）骨太の方針　防衛費の膨張が心配だ：朝日新聞デジタル」のページからLogseqに貼り付けた例） このように、1行目はコピー元のウェブページへのリンクとなり、選択範囲のテキストは2行目以降に引用形式で（1行目の下位項目として）貼り付けられます。 コピー元に空行や段落変更がある箇所では、その位置に空行が入ります（※空行を作らないタイプもあります）。 使用環境と必要なもの デスクトップ版のLogseqアプリの、バージョン0.8.1.7以上が必要です。*1*2 ブックマークレットの使い方 ブック

iPhone / iPadで使える「ショートカット」アプリにて、特定のウェブページをSafariで開くショートカットをあらかじめ作成し、それをApple Watchで利用することによって、Apple Watchでそのウェブページを開くことができます。その実行方法を紹介します。 iPhone / iPadの「ショートカット」アプリの操作方法 iPhone / iPadで「ショートカット」アプリを起動し、「すべてのショートカット」の画面で右上の「＋」アイコンをタップ。 次の画面で、下の方にある「Appおよびアクションを検索」と書かれている入力欄にSafariと入力。 そこにSafariと入力すると、その下に候補が表示されるので、そのなかの「Webページを表示」をタップ。 次の画面で、「のWebページを表示」と書かれている箇所の直前の入力欄に、開きたいウェブページのURLを入力。 左上のアイコン

Scrapboxのブックマークレット（“Scrap to ○○”）が機能しないときに、チェックするとよいところを紹介します。 ブラウザのブックマークに追加したScrapboxのブックマークレットをマウスで右クリックして「編集」（Firefoxなら「ブックマークを編集」）を選択すると、下記のような画面が表示されます。 （Firefoxでの例。Chrome系ブラウザでも同様の表示が出ます） この中の「URL」の欄の文字列を見ると、冒頭のほうに、次のような箇所があると思います（●●●の部分には当該のScrapboxのプロジェクト名("Project name")が入るので、各人ごとに異なっています）。 window.prompt('Scrap "●●●" to この●●●の部分に半角のシングルクォーテーション'（＝アポストロフィ）が含まれている場合は、それを消したうえで「保存」の操作をすれば、ブ

iPadやiPhoneのSafariで開いたウェブページを、 テキストを（画像化せず）テキストのままで ページ上の画像も含めて ページのレイアウトを維持して GoodNotes 5に転載する方法を紹介します。 amity_senseiさんが「みんなが知らない、純正アプリのiPad読書術。【Kindle × Apple Books】 - YouTube」という動画の中で紹介していた手順を応用したものです。 〈目次〉 必要なもの 実行環境 実行例 手順 必要なもの iPadやiPhoneにGoodnote 5がインストールされていること 実行環境 本記事で紹介している方法を筆者が実行できたときのiPad / iPhoneのシステムバージョンと、Safari / Goodnote 5のバージョンはこちらです。 OSやこれらのアプリのバージョンが旧いと、この方法は実行できないかもしれません。 iP

Chrome系ブラウザで文字が不鮮明だったり、文字の輪郭がギザギザして汚く見えたりする場合、フォントをNoto Sans JP（無料）に変更すれば、見やすくなるかもしれません。 比較 Windows版のGoogle Chromeにおける比較です。 文字の輪郭、特に曲線部分の滑らかさに違いがあるのが分かります（クリックで拡大）。 源真ゴシックP使用時（不鮮明な例） Noto Sans JP使用時 Noto Sans JPのインストール方法 Windows10へのインストール方法を示します。 ブラウザでNoto Sans JP - Google Fontsにアクセスし、右上の“Download family”をクリックすると、“Noto_Sans_JP.zip”という名前のZIPファイルがダウンロードされます。 このZIPファイルを解凍すると、拡張子が.otfのファイルが6個現れます。 Win

Firefoxでウェブページを開いたときに、本来であればアイコン（図形）として表示されるはずのものが、テキストに置き換えられている場合があります。 例えば、Googleニュースのトップページにおいて、「おすすめ」や「フォロー中」などの行の先頭にあるアイコンが、 （正しい状態） 次のように文字に置き換えられている場合です。 これはおそらく、「アイコンフォント」というものが正しく表示されていないからこのようになってしまっているのだと思います（実はそうではないのかもしれませんが、専門知識がないので真相は分かりません）。このような状態のとき、本来のアイコンを表示できるようにFirefoxの設定を変える手順を紹介します。 Firefoxのウィンドウの右上にある≡の形のアイコンをクリックするとメニューが開きます。その中の「オプション」をクリックすると、Firefoxの設定画面が開きます。 設定画面の左

Firefoxのバージョン81.0以降で、Firefox起動中にキーボード等を用いたメディアコントロール（音楽や動画を再生／一時停止するなど）の操作をすると、Firefoxのウィンドウの左上のところに大きな通知が数秒間出るようになりました。 バージョン85.0以降のFirefoxにおいて、この通知を出さないようにする方法を紹介します。 （メディアのコントロールをしたときに数秒間出る通知） 注意点 下記の手順（通知が出ないようにする手順）を実行すると、Firefox内でのメディアコントロールの機能（キーボードを使って、音楽や動画の再生／一時停止などをする機能）も無効になります。 設定の手順 Firefoxの設定画面にて、「メディアをキーボード、ヘッドセット、仮想インターフェースで操作する」の項目をオフにする。 以上です。 備考 Firefoxの画面上に出る上述の通知を、そのつど手動で消したい

Scrapboxの設定画面の“Page Data”のタブに用意されているブックマークレット（Scrap to ○○'s project）で取り込むURLやテキストを、Scrapboxの既存のページに追記させることができます。 （https://scrapbox.io/projects/プロジェクトURL/settings/page-dataにあります） 事前の準備 ブラウザがChrome系の場合は、設定画面の中の「ポップアップとリダイレクト」の項目を許可する必要があるかもしれません。 追記の手順 Scrapboxに「ヒグマ」というタイトルのページが既に存在していて、そのページへ追記する場合を例として説明します。 追記したいウェブページのURLを開いて（追記したいテキストがある時はそれをマウスなどで選択して）ブックマークレットをクリックすると、中央に入力欄が表示されます。 この入力欄には、最

Linux用のランチャーであるAlbertにコマンド（トリガー）を入力して、特定のウェブページをブラウザで開く方法を紹介します。 Albertが備えている“WebSearch”の機能を流用したものです。*1 〈目次〉 機能 必要なもの 設定の手順 ウェブページの開き方 Tips 機能 特定のコマンド（トリガー）を、Albertの中で特定のURLに紐づけたうえで、そのコマンドをAlbertに打ち込むことで、そのウェブページをブラウザで開けるようになります。 必要なもの AlbertまたはAlbert-liteをインストールします。 Albertのインストールや起動の仕方についてはこちらの記事をご参照ください。 設定の手順 Albertを起動し、ウィンドウの右上にある歯車のアイコンをクリックすると、設定画面が開きます。 設定画面の左上の“Extension”タブをクリック。そして下のほうにある

こちらの4種類の方法があります。 1つのウィンドウ内を分割する Side ViewなどのアドオンとFirefoxのサイドバーを利用して横方向に2分割*1 下記のFloorpブラウザの「分割ビュー」を利用して横方向に2分割 個々のタブごとに個別のウィンドウを開く Tile Tabs WE（アドオン） ウィンドウを手動で開いて並べる Floorpの「分割ビュー」 Firefoxをベースに開発されているブラウザ Floorp には「分割ビュー」という機能があり、1つのウィンドウを横に2分割することができます。 横分割したときの左右のどちらかで開きたいタブを一つ選び、タブ上でマウスを右クリックして「分割ビューで開く」をクリックし、「左側で開く」もしくは「右側で開く」をクリック。 すると、そのタブ（画像では「毎日新聞デジタル」）の左側にオレンジ色の縦線が描画されます。 その状態で他のタブをマウスでク

Firefoxの外観を変更することができるuserChrome.cssの適用例を紹介します（Firefoxのバージョン69または70以降では有効にならない場合があるかもしれません）。 userChrome.cssの作り方については、こちらの記事をご参照ください。 〈目次〉 サイドバーの最上部にあるヘッダーを非表示にする サイドバーとブラウザの間の仕切り線を非表示にする サイドバーとブラウザの間の仕切り線の太さを変える サイドバーの横幅の上限をなくす ツールバーのブックマークメニューから余分な項目を消す サイドバーの最上部にあるヘッダーを非表示にする サイドバーの最上部にあるタイトルのような部分を非表示にします。 適用前 適用後 CSS（ソース） #sidebar-header { display: none; } サイドバーとブラウザの間の仕切り線を非表示にする サイドバーとブラウザの間を

ブラウザの拡張機能である“Stylus”（Chrome 版 / Firefox 版）を使って、ウェブサイトの見た目を変えることができます。この記事では、そのサンプルを紹介します。 Stylus 自体の使い方の解説は、こちらをご参照ください。 〈目次〉 Dynalist チェック済み項目に付く取り消し線を表示しない チェック済み項目の先頭にチェックマーク（✓）を表示する 行頭のバレットを消す 横幅を調整する 画像の最大横幅を指定する 画像の最大縦幅を指定する インラインコードの文字色を変える Roam Research Twitter（ツイート）の展開を避ける 半角スペースがある位置で改行されるのを防ぐ 本文中に貼り付けた画像の横幅や縦の長さの最大値を指定する はてなブログ 編集画面の「お題」を非表示にする TweetDeck カラムの横幅を変える 引用されたツイートの本文の色を変える コト

（追記）Downthemall!は2019/09/26からFirefoxで再び使えるようになっているみたいです。 Firefoxの拡張機能Download Starは、Downthemall!の代わりになります。 インストールと使い方 FirefoxでDownload Starのページを開き、「Firefoxへ追加」のボタンをクリックしてインストール。 すると、FirefoxのツールバーにDownload Starのアイコンが表示されます。 コンテンツをダウンロードしたいウェブページをFirefoxで開き（ここでは例としてUnsplashのトップページを開いています）、Download Starのアイコンをクリックすると、ポップアップが表示されます。 このポップアップ内で、保存先フォルダの指定や、保存対象にするファイルの指定などをします。 保存対象にするファイルは、ファイルの種類や名前で絞