generated at
ポップアップメニューをさっぱりさせてみる

久々にカスタマイズしてみたよー!
とりあえずデフォルトと並べてみよう。 Copy plain までがデフォルトのボタンね。


やったこと
修飾ボタンをアイコン化
ボタン周りの線を削除

ついでに、カスタムボタンも絵文字にしてシンプルにしてます。このへんはお好みで。
📯 はんこ記法的なやつ
🔳 チェックボックスになるタグ 2を選択範囲の行頭に追加

style.css
/* ポップアップメニューの修飾ボタンをアイコン化 */ .popup-menu .button-container .button.strong-button > strong, .popup-menu .button-container .button.italic-button > i, .popup-menu .button-container .button.strike-button > strike { display: inline-block; width: 0; text-indent: -9999px } .popup-menu .button-container .button.link-button::after, .popup-menu .button-container .button.strong-button::after, .popup-menu .button-container .button.italic-button::after, .popup-menu .button-container .button.strike-button::after { font: 900 100%/normal 'Font Awesome 5 Free'; display: inline-block; min-width: 16px; text-align: center } .popup-menu .button-container .button.strong-button::after { content: '\f032' } .popup-menu .button-container .button.italic-button::after { content: '\f033' } .popup-menu .button-container .button.strike-button::after { content: '\f0cc' } /* ポップアップメニューのボタン周りの線を消す */ .selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }

ポップアップメニューのボタンを作るスクリプトはこんな感じ。
script.js
// フキダシ scrapbox.PopupMenu.addButton({ title: '💬', onClick: text => `[{ ${text}]` })

初出 2019-06-18
2021-07-06 Font Awesome のアップデートに対応