概要
Greasemonkey で Trello の見にくい Description を見やすくする
経緯
Trello のカードの Description では、 Markdown を利用できるのですが、 CSS の設定がいまいちで見にくいレイアウトになっています。
そこで、同僚に Greasemonkey のユーザースクリプトを使って見出しを見やすく してもらえるように依頼しました。 すると、業務時間外で個人的に作ってくれました。感謝! ( ※業務時間外での対応を依頼したわけではない。自発的にやってくれただけ。 )
使ってみる
共通 Markdown
## H2_1 test ### H3_1_1 test ### H3_1_2 test ## H2_2 ### H3_2_1 test ### H3_2_2 test ## H2_3 ### H3_3_1 test ### H3_3_2 test
Before
GreaseMonkey 利用前。 見出しの隙間が狭く、見にくい。
After 1
私が添削する前 見出しの隙間が広くなり、見やすくなった。
After 2
私が添削した後(好みの領域) 表示条件とスタイルを少しいじりました。(しばらくしたらリポジトリにも反映されるかな?)
var update = function() { $('div.current.markeddown.hide-on-edit.js-card-desc.js-show-with-desc :header').each(function(i){ if ($(this)[0].tagName == "H2") { $(this).css("margin-bottom", "5px"); $(this).css("border-left", "5px solid #48832C"); $(this).css("border-bottom", "1px solid #48832C"); } else { $(this).css("margin", "20px 0px 5px 0px"); $(this).css("border-bottom", "1px solid #48832C"); } }); }; $(document).ready(function() { setInterval(update, 5000); });
Complete!
めっちゃ見やすくなった