← Tous les articles

Tutoriels

Masquez les barres latérales et les sections de commentaires pour de bon

17 mai 2026 · par JustZix Team

Un article, c'est quelques centaines de mots de texte entourés d'une arène de distractions : rails de tendances, barres de partage collantes, panneaux de lecture automatique et sections de commentaires qui récompensent rarement le défilement. JustZix vous permet de supprimer l'arène et de garder l'article.

Trouvez ce qu'il faut supprimer

Ouvrez la page, faites un clic droit sur le bloc fautif, et choisissez Inspecter. Notez sa balise, son id, ou une class stable. Vous cherchez un sélecteur assez spécifique pour ne toucher que le bruit. Des mots génériques comme sidebar, related, recommended et promo apparaissent dans les noms de classes de la plupart des sites.

Le bloc de masquage principal

Commencez par une liste des suspects habituels. display: none supprime entièrement l'élément, récupérant son espace :

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

Ajoutez ou retirez des sélecteurs par site. Si quelque chose que vous voulez disparaît, supprimez la ligne qui l'a attrapé.

Bannissez la section de commentaires

Les widgets de commentaires sont lourds, lents, et souvent un puits de mauvaise foi. Les masquer accélère la page et protège votre humeur :

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

Éliminez le désordre collant

Les en-têtes collants, les barres de partage flottantes et les bulles de chat vous suivent le long de la page. Certains, vous les voulez partis ; pour d'autres, empêchez-les simplement de coller :

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

Faire passer un en-tête de fixed ou sticky à static garde la navigation disponible mais l'empêche de manger l'espace écran pendant que vous lisez.

Récupérez la colonne

Une fois une barre latérale partie, la colonne principale reste souvent à son ancienne largeur étroite avec de l'espace vide à côté. Réétirez-la :

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

Le float: none annule les mises en page flottantes héritées ; le max-width garde alors le texte désormais centré à une mesure lisible.

Une alternative plus sûre à display none

Si masquer un élément casse un script qui s'attend à sa présence, neutralisez-le visuellement à la place :

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

Enregistrez-le comme règle

Créez une règle JustZix, réglez le motif d'URL sur votre site cible, collez les blocs dont vous avez besoin dans le panneau CSS, et enregistrez. Rechargez l'article — le bruit a disparu et le texte se tient seul. Construisez une règle par site que vous lisez souvent, car les sélecteurs varient.

Une page désencombrée se marie parfaitement avec un fond chaud et une colonne ajustée. Voyez construisez votre propre mode lecture pour le traitement complet, récupérez des préréglages dans nos exemples prêts à l'emploi, et téléchargez JustZix pour commencer à couper le désordre.