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

Logseqは、CSS を変更することで外見を変えられます。 この記事では CSS の変更例を紹介します。 〈目次〉 CSS を変更する方法 Logseq の HTML 構造の調べ方 ブラウザを使う方法 デスクトップアプリを使う方法 CSS の変更例 左側のサイドバーの横幅を変更する 画像の横幅を制限する 画像の縦の長さを制限する 〈下位項目が閉じているときの上位項目〉の行頭バレットを分かりやすくする 選択されたブロック（行）の背景色を変える 文字色を変える 引用文の文字色を変える 外部リンクの下線（border）を消し、アンダーラインに変更する ハッシュタグのフォントサイズを変える CSS を変更する方法 変更の仕方は 2 通りあります。 Logseq の右上の…をクリックして「設定」→「一般」→「custom.css を編集」をクリックして開く custom.css を編集する。 Lo

Dynalistのモバイル版のみに適用されるCSSのサンプルを紹介します。 〈目次〉 必要なもの 適用される環境 CSSを適用する手順 CSSのサンプル フォントサイズを変更する 必要なもの Dynalistの有料版（PRO）にアップグレードする必要があります。 なお、既存ユーザーの紹介リンク経由でDynalistのアカウントを作ると、初月のみは有料版が無料になるそうです（当ブログ筆者の紹介リンクはこちら）。 適用される環境 この記事で紹介しているCSSが適用されるのは、下記の3つの環境でDynalistを表示した場合です。 モバイルアプリ（iOS版 / Android版） モバイルブラウザ デスクトップのウェブブラウザでウィンドウの横幅を500px以下ぐらいまで狭めた状態 CSSを適用する手順 Dynalistの有料版（PRO）にアップグレードした後で、Dynalistの画面の右上のメニ

ブラウザの拡張機能（アドオン）である“Stylus”（Chrome版 / Firefox版）を使って、ウェブサイトの外観を変えることができます。 この記事では、その使用例として、Dynalistのメニューの中にある任意の機能を非表示にするCSSを紹介します。 Stylus自体の使い方の解説は、下記の記事をご覧ください。 〈目次〉 概要 非表示にしたサンプル 各メニューを非表示にするためのCSS Collapse Collapse All Expand Expand all Expand to level Level 1 Level 2 Level 3 Level 4 Collapse all siblings Expand all siblings Zoom in Add note Delete Delete checked items Add to bookmarks Sort Titl

Scrapboxをダークテーマで表示する（背景色を暗い色にして、文字色を明るい色にする）ためのCSSを紹介します。 〈目次〉 スクリーンショット 事前の準備 CSSを適用する手順 CSS 参考ページ 関連記事 ブラウザのアドオンを使う方法 スクリーンショット 各ページ 背景色は#24292F、文字色は#d7d7d7です。*1 内部リンクは青色、コンテンツが作成されていない内部リンクはオレンジです。 入力中のキャレット（入力位置を示す縦線）は白です。 テロメア（更新された行を示す行頭の色）のうち、最近更新されたものは水色で表示します。最近に更新されていないものは無色（背景色と同じ）にしてあります。 文字変換中の文字色と背景色 Firefox系ブラウザの場合のみ、変換中の文字色と背景色が、このように黒とオレンジ色の組み合わせとなります。 Chrome系ブラウザなら、変換中の文字色・背景色も、通

ブラウザの拡張機能であるStylus（Chrome版 / Firefox版）を使って、Dynalistの背景色を変えるためのCSSの書き方を紹介します。 ヘッダー（ページの最上部）やサイドバーを含めて、通常見えているエリアの全ての色が変わります。*1 Stylusの使い方については、こちらの記事をご参照ください。 なお、Dynalistの有料版を利用している場合は、本記事で紹介しているCSSを、DynalistのカスタムCSSの入力欄にそのまま入力するだけでもよいだろうと思います。その場合はStylusは不要です。 〈目次〉 スクリーンショット CSS 背景色・文字色・アイコンの色 その他の細かい部分 CSSの適用先の指定 文字が見えにくい部分がある場合の対処法 （備考）Userstyles.orgからのCSSのインストール スクリーンショット 下記に示すCSSを全て適用すると、このような

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

Linuxのデスクトップ環境がCinnamonのとき、パネル（Windowsの場合のタスクバーに相当するもの）に表示されている文字のフォントを変える方法を紹介します。 （赤線部分のように、パネルに直接載っている文字のフォントを変えます） ただし、パネルに設置したアプレットのメニュー画面（例）のフォントは、この方法では変更できません。変更できるのは、パネルに直接載っている文字だけです。 設定の手順 システム設定の中にある「テーマ」を開き、 その画面の一番下の「デスクトップ」の項目に表示されているものが、その時点でパネルに適用されているテーマなので、その名前をメモしておきます（下記の画像の場合なら"Adapta-Nokto-Eta"がテーマの名前）。 ~/.themes/（テーマの名前）/cinnamon/cinnamon.cssというファイルをテキストエディタで開きます。上掲の例なら~/.t

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

ウェブブラウザ（Chrome系ブラウザ / Firefox）の拡張機能である“Stylus”の使い方の基本的なところを解説します。 〈目次〉 インストール Chrome系ブラウザへのインストール Firefoxへのインストール 「インストール済みのスタイル」を管理する画面を開く 新しくスタイルシートを作成する 適用先を指定する 作成済みのスタイルシートを編集する 作成済みのスタイルシートを削除する 適用のオン／オフを切り替える ツールバーから切り替える方法 「インストール済みのスタイル」の画面から切り替える方法 適用例 インストール Chrome系ブラウザへのインストール ChromeウェブストアのStylusのページを開き、「Chromeに追加」のボタンを押してインストール。 Firefoxへのインストール Stylusのページを開き、「Firefoxへ追加」のボタンを押してインストール

ウェブブラウザの拡張機能（アドオン）である“Stylus”（Chrome版 / Firefox版）を使って、ウェブサイトの見た目を変えることができます。この記事では、そのサンプルを紹介します。 Stylus自体の使い方の解説は、下記の記事をご覧ください。 〈目次〉 Twitter PCブラウザ版で左側のサイドバーをスクロールするためのスクロールバーを消す タイムラインに表示されているツイートのフォントサイズを変える Web版のTwitterで「＃ 話題を検索」・「トレンド」・「おすすめユーザー」・「フッター」を非表示にする 「トレンド」欄内の広告を消す（旧UI） 左下のアカウント表示を消す 「○○さんがフォローしています」をPCのブラウザにおいて非表示にする サイドバー内の“Twitter Blue”を非表示にする DuckDuckGoの検索結果の横幅を変える Evernote Web E

〈目次〉 設定のしかた 備考 スタイルシートの例 ダークテーマ 各ページの下に表示される関連ページの大きさを変える トップページに表示される各ページを1行ずつに細く表示する 各ページの下に表示される「関連ページ」を各1行ずつに細く表示する トップページで、ページ一覧が表示される領域の横幅の最大値を変える 各ページのタイトルと本文が入る領域の横幅の最大値を変える 各ページの下の「関連ページ」一覧が表示される領域の横幅の最大値を変える 各ページのタイトル・本文・関連ページが表示される領域の横幅の最大値を変える 引用部分の文字をイタリックにしない コード記法のフォントサイズを変える 本文中の画像に枠線を付ける 本文中のリストのマーカーの色を変える 入力中の文字色と背景色を変える 設定のしかた Scrapboxに独自のスタイルシートを適用する手順はこちらに説明されています。 備考 下記の各スタイル

機能 PCのブラウザ（FirefoxアドオンまたはChrome拡張機能が使えるブラウザ）でTwitterのタイムラインを閲覧している場合にのみ、「○○さんがフォローしています」という但し書き付きのツイートをタイムラインに表示させないようにすることができます。 設定の手順 “うみの さち”さんのブログ「ツイッター：「○○さんがいいねしました」を非表示にする」で紹介されている方法を応用します。このリンク先で説明されている「導入手順」を実行すると、ブラウザにStylusというアドオン（拡張機能）がインストールされます（2020年5月22日現在、リンク先では「更新を停止します」と書かれていますが、使用することはできると思います）。 Stylusの設定画面を開きます。Firefoxの場合は、「アドオン」を一覧する画面を開き、Stylusのアイコンの右側にある「設定」をクリック。Chrome系ブラウザ