← Todos los artículos

Tutoriales

Oculta barras laterales y secciones de comentarios para siempre

Un artículo son unos cientos de palabras de texto rodeadas de una arena de distracciones: columnas de tendencias, barras fijas para compartir, paneles de reproducción automática y secciones de comentarios que rara vez recompensan el desplazamiento. JustZix te permite borrar la arena y conservar el artículo.

Encuentra qué eliminar

Abre la página, haz clic derecho en el bloque ofensivo y elige Inspeccionar. Anota su etiqueta, su id o una class estable. Buscas un selector lo bastante específico para alcanzar solo el ruido. Palabras genéricas como sidebar, related, recommended y promo aparecen en nombres de clase en la mayoría de los sitios.

El bloque básico de ocultación

Empieza con una lista de los sospechosos habituales. display: none elimina el elemento por completo, recuperando su espacio:

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

Añade o quita selectores por sitio. Si algo que quieres desaparece, borra la línea que lo atrapó.

Destierra la sección de comentarios

Los widgets de comentarios son pesados, lentos y a menudo un sumidero de mala fe. Ocultarlos acelera la página y protege tu estado de ánimo:

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

Elimina el desorden fijo

Las cabeceras fijas, las barras flotantes para compartir y las burbujas de chat te siguen página abajo. Algunas las quieres fuera; a otras, solo deja de fijarlas:

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

Cambiar una cabecera de fixed o sticky a static mantiene la navegación disponible pero impide que se coma el espacio de pantalla mientras lees.

Recupera la columna

Una vez que una barra lateral desaparece, la columna principal a menudo se queda en su antiguo ancho estrecho con espacio vacío al lado. Vuelve a estirarla:

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

El float: none deshace las maquetaciones flotantes heredadas; el max-width luego mantiene el texto ahora centrado en una medida legible.

Una alternativa más segura a display none

Si ocultar un elemento rompe un script que lo espera, neutralízalo visualmente en su lugar:

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

Guárdalo como una regla

Crea una regla de JustZix, fija el patrón de URL a tu sitio objetivo, pega los bloques que necesites en el panel CSS y guarda. Recarga el artículo — el ruido desapareció y el texto queda solo. Construye una regla por cada sitio que leas a menudo, ya que los selectores varían.

Una página despejada se empareja perfectamente con un fondo cálido y una columna afinada. Consulta crea tu propio modo de lectura para el tratamiento completo, consigue preajustes en nuestros ejemplos listos para usar, y descarga JustZix para empezar a recortar el desorden.

Valora este artículo

Sin valoraciones — sé el primero.

Pruébalo tú mismo

Instala JustZix y pega cualquier snippet de este artículo. Dos minutos de cero a una regla funcionando en todos tus dispositivos.

Obtener JustZix

Funciones · Cómo funciona · Ejemplos · Casos de uso