Agencia de Marketing en sevilla

Cómo ocultar los titulares de una página con CSS y StyleBot

Índice del artículo

Este mediodía tuve una conversación por Twitter acerca de los conocidos como ‘malos titulares’. En esta categoría se engloban tanto los titulares que pueden llevarte a engaño como los conocidos como clickbait, esos horrorosos titulares gancho del estilo “Un perro se comió a un hombre, y te parecerá increíble lo que sucedió después”.

Soy consciente de que este tipo de titulares no sólo llevan a engaño sino que además, paradójicamente, pueden causar que pierdas el interés en el artículo: si fuera un texto bueno, no necesitaría semejante gancho para atraer, ¿no?

Para este pequeño tutorial vamos a utilizar Chrome con la extensión Stylebot, la cual nos permite aplicar cambios de CSS por sitios web, guardándolos en memoria. Estoy seguro de que en Firefox, Safari o cualquier otro navegador podríamos encontrar extensiones similares; todo es buscar en Google.

Una vez instalada la extensión, nos encontraremos con un pequeño icono a la derecha de nuestra barra de direcciones, con el texto CSS en negrita y cursiva. Nos vamos, por ejemplo, a un artículo cualquiera del New York Times.

Al pulsar en el icono antes mencionado, nos aparece un menú en el que debemos de pulsar “Open StyleBot…”, gracias a lo cual nos aparecerá la siguiente barra lateral.

Si pulsamos en el icono que representa un cursor sobre un rectángulo, podremos seleccionar uno de los elementos de la página. Yo he seleccionado la etiqueta que contiene el título, h1.entry-title. (h1 es la etiqueta, entry-title la clase). En la barra lateral de StyleBot tenemos todas las opciones básicas de CSS: cambiar tamaño de texto, añadir negrita o cursiva, cambiar color, etcétera. Bajamos en esta ventana hasta ver la sección Layout and visibility, y pulsamos en Visibility: hide.

Una vez hecho esto, se grabará en la memoria de nuestro navegador, y hasta que no utilicemos el botón reset page, todos los contenedores que tengan la misma etiqueta y la misma clase se mantendrán ocultos, ocultando así los falsos titulares a la vista.

Para terminar de ocultarlos deberíamos seleccionar también los titulares de los artículos relacionados, cuyos enlaces caen bajo h3.entry-title.

Obviamente esto carece de utilidad real, ya que sin un titular que ojear de forma rápida no podemos ni hacernos una somera idea (por muy equivocada que esté) acerca del contenido del artículo; sin embargo, puede ser muy útil en casos en donde el diseñador o la agencia de publicidad no haya tenido en cuenta la accesibilidad por gente de diferentes capacidades, ya que te permite cambiar colores, ampliar tamaño de letra o escoger una tipografía más fácil de leer.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad
Abrir chat
Hola 👋
¿En quieres destacar sobre tu competencia? ¡Escríbeme!