Como ya imaginaba, la entrada anterior no sería la última en la que hablaría de las imágenes.
En efecto, había un asunto que me estaba volviendo bastante loco y no sabía cómo resolverlo.
No me gustaba que en la versión móvil las imágenes ocuparan el ancho completo, quería que, como la imagen destacada, tuvieran un margen en ambos lados, pero por más que buscaba no daba con la solución.
Deduje, de las diferentes consultas que realicé, que la solución vendría a través de alguna regla CSS referida a las imágenes de las entradas, así que intenté aprender algo sobre el asunto.
HTML y CSS
En su día hice vía on-line un curso introductorio de HTML de los que facilita Kzgunea. No aprendí HTML, pero sí me sirvió para familiarizarme con su lógica que más que un lenguaje es una definición de la estructura de las distintas partes de la página que se muestra en la pantalla.
Después, como digo al inicio, quise aprender algo sobre CSS y las reglas para dar estilo a las diferentes partes de la estructura y vi varios vídeos de Diccionario Web que me sirvieron para darme cuenta de que yo, ni iba a profundizar en HTML, ni tampoco iba a aprender CSS.
La cosa era bastante complicada y, como todos los lenguajes, había que practicarlo de forma constante, esfuerzo que solo te podría compensar si te dedicaras profesionalmente al desarrollo de páginas web, y evidentemente, ese no es mi caso.
Sin embargo, siempre se aprende algo, y en el primer vídeo del curso de Diccionario Web conocí una forma mejor de utilizar el F12 o el Inspeccionar del botón derecho del ratón, que es lo mismo.
F12 o Inspeccionar
Yo ya sabía de su utilidad para ver tu página en los diversos tamaños, escritorio, portátil, tablet y varios modelos de móvil, pero el autor del vídeo aporta otras utilidades.
Lo primero que te recomienda es cambiar la posición del código HTML al pie de la página para trabajar más cómodamente.
La primera vez al usar F12 o Inspeccionar se te presenta el código en forma de columna a la derecha. La opción recomendada se escoge tal como se indica en la imagen:
Una vez colocadas las columnas de elementos y estilos en la parte inferior de la pantalla, el profesor del curso te indica dos utilidades muy importantes:
- La primera para descubrir qué atributos tiene cualquier elemento de una página web y poder copiar si quieres lo que te guste.
- La segunda para poder hacer cambios en tu página web sin que luego se queden guardados (F5 para restaurar la página) y así hacer pruebas sencillas. Simplemente, pulsas el selector de la izquierda del inspector y luego seleccionas el elemento a descubrir o cambiar.
Estas utilidades me abrieron otra vía de investigación para averiguar cómo hacer que las imágenes en el móvil no ocupasen el ancho completo.
Así, al seleccionar las imágenes en la versión móvil, llegué a la conclusión de que el atributo que definía la ocupación de las imágenes interiores de las entradas era max-width: 100% y, que, por tanto, si modificaba el porcentaje, por ejemplo al 90%, se conseguía lo que quería, cosa que comprobé haciendo el cambio como prueba.
Ya solo me quedaba buscar cómo modificar el atributo para todo el blog.
Gemini y el CSS
De los dos chatbots que más utilizo, Perplexity y Gemini, este último me ha demostrado ser especialmente útil para cuestiones de tecnología, así que recurro a él frecuentemente.
Me ha ayudado mucho en la corrección de los errores que se han ido produciendo en la instalación local del blog y sus soluciones siempre han sido muy detalladas, así que decidí continuar con su ayuda.
Anteriormente, había realizado múltiples consultas a Gemini sobre como hacer una regla CSS sin obtener una respuesta válida, pero claro, no planteaba bien la pregunta y la IA responde solo si sabes preguntar.
A partir de la información obtenida con los consejos del vídeo y con unas pocas pruebas, fue fácil plantear bien el prompt a Gemini:
Actúa como un experto en HTML y CSS y elabórame una regla CSS para conseguir que las imágenes interiores de las entradas tengan un atributo max-width: 90% y queden centradas.
Solo tuve que copiar la respuesta en Apariencia/Personalizar/CSS/JS personalizado
| /* Estilos para las imágenes dentro de las entradas / .entry-content img { max-width: 90%; / Limita el ancho máximo al 90% del contenedor padre / |
| height: auto; / Mantiene la proporción de la imagen al ajustar el ancho / |
| display: block; / Convierte la imagen en un elemento de bloque para poder aplicar márgenes automáticos / |
| margin-left: auto; / Centra la imagen horizontalmente aplicando margen automático a la izquierda / |
| margin-right: auto; / Centra la imagen horizontalmente aplicando margen automático a la derecha */ } |
He vuelto a utilizar las herramientas que se plantean en esta entrada con resultados satisfactorios y me imagino que las volveré a utilizar a menudo.
Migración a Ginernet.
Por cierto, he migrado el blog al hosting Ginernet para tener un dominio propio y eliminar el problema de «la conexión no es privada» debido a que la opción gratuita que tenía en el anterior hosting no incorporaba certificado SSL.
He escogido Ginernet por ser pequeño y estar en la península y, con gran sorpresa por mi parte, he conseguido migrar, aparentemente sin problemas, gracias al plugin UpdraftPlus.