ブラウザの拡張機能（アドオン）である“Stylus”（Chrome版 / Firefox版）を使って、ウェブサイトの見た目を変えることができます。
この記事では、その使用例として、Dynalistのメニューの中にある任意の機能を非表示にするCSSを紹介します。
Stylus自体の使い方の解説は、下記の記事をご覧ください。
〈目次〉
- 概要
- 各メニューを非表示にするためのCSS
- Collapse
- Collapse All
- Expand
- Expand all
- Expand to level
- Collapse all siblings
- Expand all siblings
- Zoom in
- Add note
- Delete
- Delete checked items
- Add to bookmarks
- Sort
- Search and replace...
- Indent
- Unindent
- Move to...
- Insert template...
- Add checkbox
- Add checkbox to children
- Remove checkbox
- Remove checkbox to children
- Check off
- Uncheck
- Number Children
- Stop numbering children
- Manage sharing...
- Get link
- Show all references
- Export...
- Set as inbox
- Color label（項目ごとの背景色）
- 見出し化ボタン（H1, H2, H3）
- 関連記事
概要
PC版のブラウザでDynalistを開いて、各項目の行頭にマウスカーソルを合わせると、≡の形のアイコンが現れ、それをクリックすると、下記のようなメニューが表示されます。
このメニューの中の不要なものを、画面上に表示しないようにします。
非表示にしたサンプル
各メニューを非表示にするためのCSS
メニュー内の各項目を非表示にするためのCSSは、下記のとおり約50個あります。
なお、これらを1つにまとめた状態のCSSをGistに置いてあります。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... */
Get link
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の使用例を紹介した記事として、こちらもあります。
