← Все статьи

Туториалы

Настройки Notion в JustZix — широкие страницы, шрифты и режим фокуса

18 мая 2026 · автор JustZix Team

Notion гибок в плане содержимого, но жёсток в плане внешнего вида. Узкая колонка текста, один шрифт, нет режима фокуса, таблицы баз данных сливаются в одно серое пятно. Изменить это в настройках нельзя — но можно изменить одним CSS-правилом JustZix. Это руководство проходит по шести настройкам, которые реально меняют ежедневную работу в Notion, каждая в виде готового к вставке фрагмента.

Почему CSS, а не настройки Notion

Notion намеренно держит внешний вид под контролем — он хочет, чтобы каждая страница выглядела одинаково на любом устройстве. Для команды это разумно, но раздражает, когда у вас 27-дюймовый монитор, а текст занимает треть экрана. JustZix накладывает ваш CSS поверх notion.so в браузере: Notion ничего не знает об изменении, а вы получаете свою вёрстку. Правило привязано к домену, поэтому работает везде — и в личном рабочем пространстве, и в корпоративном — не трогая аккаунт.

Более широкие страницы и полная ширина

В Notion есть постраничный переключатель «полная ширина», но включать его нужно вручную на каждой странице. CSS-правило делает это глобально и позволяет задать собственную максимальную ширину:

/* Более широкая колонка содержимого на каждой странице Notion */
.notion-page-content {
  max-width: 1100px !important;
  width: 100% !important;
}

/* Шапка (обложка, заголовок) выравнивается с содержимым */
.notion-page-content > .notion-cover,
.notion-page-content > [class*="layout"] {
  max-width: 1100px !important;
}

Задайте max-width так, как подходит вашему монитору — 900 px удобно для чтения, 1300 px — вариант в стиле таблицы. Селектор .notion-page-content охватывает и обычные страницы, и страницы базы данных, открытые как запись.

Режим фокуса — скрыть боковую панель и верхнюю полосу

Когда вы пишете документ подлиннее, левая панель и верхняя полоса только отвлекают. Режим фокуса прячет оба элемента и отдаёт содержимому весь экран:

/* Режим фокуса: прячет боковую навигацию и верхнюю полосу */
.notion-sidebar-container {
  display: none !important;
}
.notion-topbar {
  opacity: 0;
  transition: opacity .2s ease;
}
.notion-topbar:hover {
  opacity: 1;
}

/* Содержимое забирает место скрытой боковой панели */
.notion-frame {
  margin-left: 0 !important;
}

Верхняя полоса не исчезает полностью — она становится прозрачной и возвращается при наведении мыши, так что меню «Share» и история страницы по-прежнему доступны. Держите эту настройку отдельным правилом и переключайте её с панели действий, когда захотите вернуть полную навигацию.

Свой шрифт и межстрочный интервал

Notion предлагает три шрифта. Если вы предпочитаете конкретную системную гарнитуру или просто хотите больший межстрочный интервал для долгого чтения, переопределите это напрямую:

/* Свой шрифт и более свободный интервал в тексте */
.notion-page-content,
.notion-page-content [placeholder] {
  font-family: "Charter", "Iowan Old Style", Georgia, serif !important;
  line-height: 1.7 !important;
  font-size: 17px !important;
}

/* Заголовки остаются без засечек для контраста */
.notion-page-content h1,
.notion-page-content h2,
.notion-page-content h3 {
  font-family: "Inter", system-ui, sans-serif !important;
}

Оформленные блоки callout и цитаты

Стандартные блоки callout и цитаты в Notion ненавязчивы до невидимости. Усильте их, чтобы они действительно цепляли взгляд:

/* Более заметные блоки callout */
.notion-callout-block {
  border-left: 4px solid #2f6fed !important;
  border-radius: 6px;
  background: rgba(47,111,237,.07) !important;
}

/* Цитаты с более крупным мягким акцентом */
.notion-quote-block {
  border-left: 4px solid #888 !important;
  font-style: italic;
  padding-left: 16px !important;
}

/* Блоки toggle с более чёткой подписью */
.notion-toggle-block > div:first-child {
  font-weight: 600;
}

Базы данных — строки в полоску и липкие шапки

За длинными таблицами баз данных трудно следить взглядом. Чередующиеся полосы на строках и шапка, прилипающая при прокрутке, решают обе проблемы:

/* Полоски зебры в режиме таблицы */
.notion-collection-item:nth-child(even) {
  background: rgba(0,0,0,.035) !important;
}

/* Липкая шапка таблицы при прокрутке */
.notion-table-view-header-row,
.notion-collection-view-header {
  position: sticky !important;
  top: 0;
  z-index: 5;
  background: var(--bg, #fff) !important;
}

/* Более чёткая линия под шапкой */
.notion-table-view-header-row {
  border-bottom: 2px solid #ccc !important;
}

Скрытие комментариев и настройки блоков кода

Ветки комментариев бывают полезны, но на справочной странице они только захламляют поле. Блоки кода, в свою очередь, выигрывают от более крупной моноширинной гарнитуры:

/* Скрыть ветки комментариев на поле */
.notion-discussion,
[class*="comment-thread"] {
  display: none !important;
}

/* Более читаемые блоки кода */
.notion-code-block {
  font-family: "JetBrains Mono", "Fira Code", monospace !important;
  font-size: 14px !important;
  border-radius: 8px;
  background: #1e1e2e !important;
}
.notion-code-block code {
  line-height: 1.55 !important;
}

Если вы предпочитаете просто сворачивать комментарии, а не прятать их, замените правило на JS, которое кликает по кнопкам сворачивания на document_idle — но для большинства страниц достаточно статического display: none.

Объединение настроек в набор

Каждая настройка выше работает сама по себе, но настоящее удобство — держать их отдельными именованными правилами: «Notion — широкие страницы», «Notion — режим фокуса», «Notion — зебра в базах». Тогда с панели действий вы включаете именно то, что нужно на конкретной странице, и отключаете режим фокуса одним кликом, когда хотите вернуть навигацию.

Готовые правила для Notion есть в нашем каталоге — посмотрите примеры для notion.so, скопируйте то, что подходит, и подстройте под свой монитор. Установите JustZix и перекройте Notion под себя за несколько минут.