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.