Continuando con mi blog en prácticas dedicado a viajes, con el fondo transparente en tonalidad azul que he ido configurado en entradas anteriores, se ve la imagen que he colocado de fondo y que se mantiene mientras nos desplazamos a través de las entradas publicadas.
Está muy bien, ofrece un aspecto fresco y atractivo al blog pero tiene un problema, que dificulta la visualización del contenido de las entradas.
El aspecto del blog es importante para atraer a nuestros visitantes porque es la primera impresión que se recibe cuando alguien accede a él. De todos modos la intención de un blog es comunicar, transmitir, bien sea ideas, imágenes, enlaces, etc...es decir contenido, elemento fundamental de un blog, por lo tanto debe ser fácil y cómodo de leer.
Como no es el caso de mi blog en prácticas, decido mantener la transparencia para poder ver la foto que he establecido de fondo, pero necesito que la zona destinada al contenido (entrada), esté en un color opaco que facilite su lectura.
Esto lo he conseguido introduciendo un código de HTML en la entrada en la que deseo modificar su fondo.
Para ello vamos a Entradas de nuestro blog. Seleccionamos la entrada que deseamos modificar y hacemo clic en Editar
Ahora vamos a la pestaña HTML como se muestra en la imagen
Se abre una ventana con el contenido de la entrada en código HTML (HyperText Markup Language o lenguaje de marcas de hipertexto, que permite crear páginas web, darles estructura y contenido).
Abrimos espacio y nos situamos en la primera línea donde escribiremos,
<div style="background: #f0ffff; padding: 30px;">
A continuación, y dejando toda nuestra entrada tal como estaba, escribimos al final de toda la entrada una última línea con </div>, para cerrar la etiqueta que abrimos al inicio.
background es el color que tendrá el fondo de nuestra entrada, en este caso es un azul muy pálido con la referencia #f0ffff y nombre "azure". Podemos cambiar el color, probando la paleta de colores que podemos consultar por ejemplo en este enlace
El atributo padding estable la distancia al borde. Es decir, creará un "hueco interno" de 30 píxeles alrededor de la capa.
Podemos modificarlo según nuestras necesidades. Por ejemplo,
- padding:1px 2px 3px 4px; Esto creará un hueco de 1 píxel por arriba, de 2 píxeles por la derecha, de 3 píxeles por abajo y de 4 píxeles por la izquierda.
- padding:10px 5px; Esto creará un hueco de 10 píxeles por arriba y por abajo y de 5 píxeles por los lados.
Primera línea de la entrada
Última línea de la entrada
</div>
Una vez realizados estos cambios, visualizo mi blog y por fin se ven perfectamente los contenidos, manteniéndose el estilo y formato ideado en un principio, manteniendo la imagen de fondo con transparencias en el blog, excepto el espacio reservado para las entradas.
Otra etapa superada!