小技チョコレート

ちょっとした小技を紹介するだけのブログです。

ブラウザの拡張機能“Stylus”の使用例(3)Dynalistのメニュー内の各機能を非表示にする

ブラウザの拡張機能(アドオン)である“Stylus”(Chrome版 / Firefox版)を使って、ウェブサイトの外観を変えることができます。
この記事では、その使用例として、Dynalistのメニューの中にある任意の機能を非表示にするCSSを紹介します。

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


〈目次〉


概要

PC版のブラウザでDynalistを開いて、各項目の行頭にマウスカーソルを合わせると、の形のアイコンが現れ、それをクリックすると、下記のようなメニューが表示されます。
このメニューの中の不要なものを、画面上に表示しないようにします。

非表示にしたサンプル

各メニューを非表示にするためのCSS

メニュー内の各項目を非表示にするためのCSSは、下記のとおり約50個あります。
なお、これらを1つにまとめた状態のCSSGistに置いてありますCSSの全体を一挙にコピーしたい場合はそちらからコピーするほうがラクだと思います。

Collapse

li.MenuItem--collapse{display:none !important}  /* Collapse */

Collapse All

li.MenuItem--collapseAll{display:none !important}  /* Collapse all */

Expand

li.MenuItem--expand{display:none !important}  /* Expand */

Expand all

li.MenuItem--expandAll{display:none !important}  /* Expand all */

Expand to level

li.MenuItem--expandToLevelParent{display:none !important}  /* Expand to level */
Level 1
li[data-level="1"]{display:none !important}  /* Level 1 */
Level 2
li[data-level="2"]{display:none !important}  /* Level 2 */
Level 3
li[data-level="3"]{display:none !important}  /* Level 3 */
Level 4
li[data-level="4"]{display:none !important}  /* Level 4 */

Collapse all siblings

li.MenuItem--collapseSiblings{display:none !important}  /* Collapse all siblings */

Expand all siblings

li.MenuItem--expandSiblings{display:none !important}  /* Expand all siblings */

Zoom in

li.MenuItem--zoomIn{display:none !important}  /* Zoom In */

Add note

li.MenuItem--addNote{display:none !important}  /* Add note */

Delete

li.MenuItem--deleteNode{display:none !important}  /* Delete */

Delete checked items

li.MenuItem--deleteCheckedNodes{display:none !important}  /* Delete checked items */

Add to bookmarks

li.MenuItem--bookmarkNode{display:none !important}  /* Add to bookmarks */

Sort

li.MenuItem--sortChildren{display:none !important}  /* Sort */
Title (A to Z)
li.MenuItem--sortTitleAsc{display:none !important}  /* Title (A to Z) */
Title (Z to A)
li.MenuItem--sortTitleDesc{display:none !important}  /* Title (Z to A) */
Date (new to old)
li.MenuItem--sortDateDesc{display:none !important}  /* Date (new to old) */
Date (old to new)
li.MenuItem--sortDateAsc{display:none !important}  /* Date (old to new) */
Unchecked first
li.MenuItem--sortCheckedStatusAsc{display:none !important}  /* Unchecked first */
Checked first
li.MenuItem--sortCheckedStatusDesc{display:none !important}  /* Checked first */
Edited (new to old)
li.MenuItem--sortEditedTimeDesc{display:none !important}  /* Edited (new to old) */
Edited (old to new)
li.MenuItem--sortEditedTimeAsc{display:none !important}  /* Edited (old to new) */
Created (new to old)
li.MenuItem--sortCreatedTimeDesc{display:none !important}  /* Created (new to old) */
Created (old to new)
li.MenuItem--sortCreatedTimeAsc{display:none !important}  /* Created (old to new) */
Reverse current
li.MenuItem--reverseCurrent{display:none !important}  /* Reverse current */

Search and replace...

li.MenuItem--searchReplace{display:none !important}  /* Search and replace... */

Indent

li.MenuItem--indent{display:none !important}  /* Indent */

Unindent

li.MenuItem--unindent{display:none !important}  /* Unindent */

Move to...

li.MenuItem--moveNode{display:none !important}  /* Move to... */

Insert template...

li.MenuItem--insertTemplate{display:none !important}  /* Insert template... */

Add checkbox

li.MenuItem--showCheckbox{display:none !important}  /* Add checkbox */

Add checkbox to children

li.MenuItem--addCheckboxToChildren{display:none !important}  /* Add checkbox to children */

Remove checkbox

li.MenuItem--hideCheckbox{display:none !important}  /* Remove checkbox */

Remove checkbox to children

li.MenuItem--removeCheckboxFromChildren{display:none !important}  /* Remove checkbox to children */

Check off

li.MenuItem--check{display:none !important}  /* Check off */

Uncheck

li.MenuItem--uncheck{display:none !important}  /* Uncheck */

Number Children

li.MenuItem--makeNumberedList{display:none !important}  /* Number children */

Stop numbering children

li.MenuItem--unmakeNumberedList{display:none !important}  /* Stop numbering children */

Manage sharing...

li.MenuItem--shareRootNode{display:none !important}  /* Manage sharing... */
li.MenuItem--getLink{display:none !important}  /* Get link */

Show all references

li.MenuItem--showReferences{display:none !important}  /* Show all references */

Export...

li.MenuItem--exportNode{display:none !important}  /* Export... */

Set as inbox

li.MenuItem--setAsInbox{display:none !important}  /* Set as inbox */

Color label(項目ごとの背景色)

ul.set-color-label-menu{display:none !important}  /* Color label */

見出し化ボタン(H1, H2, H3)

ul.set-heading-level-menu{display:none !important}  /* 見出し化ボタン */

関連記事

Stylusの使用例を紹介した記事として、こちらもあります。


YouTube Musicで「高く評価」した曲の情報を自動でエクスポートする方法

YouTube Musicで「高く評価」した曲は、それと同じアカウントでYouTubeを開いた際に、〈YouTubeにおける「高く評価」した動画〉の一覧の中に含まれています。

したがって、後者(YouTubeにおける「高く評価」した動画の情報)をエクスポートすれば、その中に含まれた形でエクスポートされることになります。

IFTTTを使うと、それが実現します。下記の記事で説明しています。

Googleスプレッドシートにエクスポートする

Evernoteの特定のノートにエクスポートする

YouTubeで「高く評価」した動画の情報をEvernoteの1個のノートに保存する - 小技チョコレート

Pocketに保存する

曲(動画でないもの)の場合も、YouTubeの動画と同じようにPocketに保存されます(下記の画像の左側のように)。

f:id:ichbin:20181117111603p:plain

はてなブックマークに投稿する

ブラウザの拡張機能“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の外部へ移動します」という転送ページは見えなくなり、すぐにリンク先のページが開かれるようになります。