見出し画像

noteが読みやすくなるブックマークレット

noteのページが読みにくかったので

左右の余白を埋め、行間を詰め、左側にある謎のフロートアイコンを消すブックマークレットを作りました。使うとnoteのページが劇的に読みやすくなるように感じます。

使い方

ブックマークバーにある任意のお気に入りを編集して


以下をコピペしてURLに張り付けて保存して
javascript:(function(){var widthElems=['article','section','main','aside','details','figcaption','figure','footer','header','nav','summary','time'];for(var k=0;k<widthElems.length;k++){var wElems=document.querySelectorAll(widthElems[k]);for(var l=0;l<wElems.length;l++){wElems[l].style.width='90%';}}var tElems=['p','h1','h2','h3','h4','h5','h6','li','span','a','div'];for(var t=0;t<tElems.length;t++){var elems=document.querySelectorAll(tElems[t]);for(var i=0;i<elems.length;i++){elems[i].style.lineHeight='1.0';}}var delElems=document.querySelectorAll('div.p-article__sideCreatorInfo');for(var j=0;j<delElems.length;j++){delElems[j].parentNode.removeChild(delElems[j]);}})();
noteのページ上でブックマークバーからクリックするのみ

実行結果例

過去投稿したnoteにて動作確認

Before:画面を埋め尽くす余白。行間も広く、読むのが一苦労。そして、左側には何のためにあるのか分からないフローティングアイコンが...。読むためには何回もスクロールが必要です。


After:なんということでしょう!セマンティック要素にwidth:90%を上書きすることで左右の余白が適度に調整され、本文の行間が概ねline-height=1.0に統一され心地よくなりました。そして、邪魔だった左上のアイコンも消えています!最後まで読むのに必要だったスクロールも、もう必要ありません。

参考

改行とインデントをつけて記載します。配列で指定した要素について過不足などはあるかもしれません。

javascript:(function() {
    var widthElems = ['article', 'section', 'main', 'aside', 'details', 'figcaption', 'figure', 'footer', 'header', 'nav', 'summary', 'time'];
    for (var k = 0; k < widthElems.length; k++) {
        var wElems = document.querySelectorAll(widthElems[k]);
        for (var l = 0; l < wElems.length; l++) {
            wElems[l].style.width = '90%';
        }
    }

    var tElems = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'span', 'a', 'div'];
    for (var t = 0; t < tElems.length; t++) {
        var elems = document.querySelectorAll(tElems[t]);
        for (var i = 0; i < elems.length; i++) {
            elems[i].style.lineHeight = '1.0';
        }
    }

    var delElems = document.querySelectorAll('div.p-article__sideCreatorInfo');
    for (var j = 0; j < delElems.length; j++) {
        delElems[j].parentNode.removeChild(delElems[j]);
    }


})();

おまけ Qiita横幅調整用

javascript:(function(){var elems=document.querySelectorAll('.p-items_main');for(var i=0;i<elems.length;i++){elems[i].style.maxWidth='90%';}})();


この記事が気に入ったらサポートをしてみませんか?