← Wszystkie wpisy

Poradniki

Ukryj paski boczne i sekcje komentarzy na dobre

Artykuł to kilkaset słów tekstu otoczonych areną rozproszeń: kolumny trendów, przyklejone paski udostępniania, panele autoodtwarzania i sekcje komentarzy, które rzadko wynagradzają przewijanie. JustZix pozwala usunąć arenę i zachować artykuł.

Znajdź, co usunąć

Otwórz stronę, kliknij prawym przyciskiem na uciążliwy blok i wybierz Zbadaj. Zanotuj jego znacznik, id lub stabilną class. Szukasz selektora na tyle konkretnego, by trafiał tylko w hałas. Ogólne słowa typu sidebar, related, recommended i promo pojawiają się w nazwach klas na większości stron.

Główny blok ukrywający

Zacznij od listy zwykłych podejrzanych. display: none usuwa element całkowicie, odzyskując jego miejsce:

aside,
.sidebar,
#sidebar,
.related-articles,
.recommended,
.trending,
.most-popular,
.promo, .ad-slot {
  display: none !important;
}

Dodawaj lub usuwaj selektory per strona. Jeśli coś, co chcesz, znika, usuń linię, która to złapała.

Wygnaj sekcję komentarzy

Widżety komentarzy są ciężkie, wolne i często wylęgarnią złej woli. Ukrycie ich przyspiesza stronę i chroni twój nastrój:

#comments,
.comments,
.comment-section,
#disqus_thread,
.fb-comments,
[id*="livefyre"] {
  display: none !important;
}

Usuń przyklejony bałagan

Przyklejone nagłówki, pływające paski udostępniania i dymki czatu podążają za tobą w dół strony. Niektóre chcesz usunąć; dla innych po prostu powstrzymaj ich przyklejanie:

.share-bar,
.floating-cta,
.chat-widget,
[class*="cookie-banner"] {
  display: none !important;
}
header.sticky,
.site-header {
  position: static !important;
}

Przełączenie nagłówka z fixed lub sticky na static utrzymuje nawigację dostępną, ale powstrzymuje ją przed zjadaniem przestrzeni ekranu, gdy czytasz.

Odzyskaj kolumnę

Gdy pasek boczny zniknie, główna kolumna często pozostaje na swojej starej wąskiej szerokości z pustą przestrzenią obok. Rozciągnij ją z powrotem:

.main-content,
.content-area,
article {
  width: 100% !important;
  max-width: 72ch !important;
  margin-inline: auto !important;
  float: none !important;
}

float: none cofa przestarzałe układy float; max-width następnie utrzymuje teraz wyśrodkowany tekst na czytelnej mierze.

Bezpieczniejsza alternatywa dla display none

Jeśli ukrycie elementu psuje skrypt, który go oczekuje, zneutralizuj go wizualnie:

.related-articles {
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

Zapisz to jako regułę

Utwórz regułę JustZix, ustaw wzorzec URL na docelową stronę, wklej potrzebne bloki do panelu CSS i zapisz. Przeładuj artykuł — hałas zniknął, a tekst stoi sam. Buduj jedną regułę na stronę, którą czytasz często, bo selektory się różnią.

Uporządkowana strona idealnie współgra z ciepłym tłem i dostrojoną kolumną. Zobacz zbuduj własny tryb czytnika, aby uzyskać pełne podejście, zdobądź presety z naszych gotowych przykładów i pobierz JustZix, aby zacząć ciąć bałagan.

Oceń ten wpis

Brak ocen — oceń jako pierwszy.

Wypróbuj samodzielnie

Zainstaluj JustZix i wklej dowolny snippet z tego artykułu. Dwie minuty od zera do działającej reguły na wszystkich Twoich urządzeniach.

Pobierz JustZix

Funkcje · Jak to działa · Przykłady · Zastosowania