https://blog.kyu08.com/pr-344/tags/notion/ Recent content in Notion on blog.kyu08.com Hugo -- gohugo.io ja blog.kyu08.com Fri, 08 Nov 2024 14:34:37 +0000 https://blog.kyu08.com/pr-344/posts/refine-notion-gantt-chart/ Fri, 08 Nov 2024 14:34:37 +0000 https://blog.kyu08.com/pr-344/posts/refine-notion-gantt-chart/ できること Notionのガントチャートが見づらいのをなんとかするスクリプト Before After 前提条件 NotionをChromium系のブラウザで利用してい <h2 id="できること">できること</h2> <p>Notionのガントチャートが見づらいのをなんとかするスクリプト</p> <h3 id="before">Before</h3> <p><img src="before.webp" alt="before.webp" loading="lazy" /></p> <h3 id="after">After</h3> <p><img src="after.webp" alt="after.webp" loading="lazy" /></p> <h2 id="前提条件">前提条件</h2> <p>NotionをChromium系のブラウザで利用していること</p> <h2 id="やり方">やり方</h2> <ol> <li>下記のリンクからStylusをインストール <a href="https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja" target="_blank" >https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja</a></li> <li>Manageをクリックして管理画面を開く <img src="open-management-window.webp" alt="open-management-window.webp" loading="lazy" /></li> <li>Write new styleをクリック <img src="click-write-new-style.webp" alt="click-write-new-style.webp" loading="lazy" /></li> <li>次のCSSを入力しURLのブロックに<code>URLs starting with: https://www.notion.so/</code>を指定しSaveをクリック <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">notion-selectable</span>.<span style="color:#a6e22e">notion-page-block</span>.<span style="color:#a6e22e">notion-timeline-item</span> <span style="color:#f92672">a</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: rgba(<span style="color:#ae81ff">255</span>, <span style="color:#ae81ff">255</span>, <span style="color:#ae81ff">255</span>, <span style="color:#ae81ff">0.15</span>) </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><img src="set-configs.webp" alt="set-configs.webp" loading="lazy" /></li> <li>みやすくなる <img src="after.webp" alt="after.webp" loading="lazy" /></li> </ol>