La apariencia de un artículo puede verse enteramente afectada por la separación entre letras, palabras y líneas. Al escribir una entrada en nuestro blog, buscamos una correcta configuración y en ningún caso deseamos que al publicarla, los párrafos sean alternos o que sus letras, palabras o líneas muestren una separación distinta a la que utilizamos en el resto del contenido textual.
Gracias al CSS, todo esto puede evitarse y una configuración general puede atribuírsele al texto.
Diseño>Edición de HTML>expandimos artilugios
Busca un bloque similar a alguno de estos dos:
.post-body {
margin:0 0 .75em;
line-height:1.6em;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}
Seguidamente, añade las líneas en color verde:
.post-body {
letter-spacing: 0px;
line-height: 20px;
word-spacing: 0px;
margin:0 0 .75em;
line-height:1.6em;
}
.post-body {
letter-spacing: 0px;
line-height: 20px;
word-spacing: 0px;
font-size: 110%;
line-height: 1.4;
position: relative;
}
Esta misma configuración es la que utilizo actualmente en El Balcón. Como puedes ver, cada párrafo muestra el mismo estilo y las letras o las palabras mantienen una misma cifra de separación.
La línea letter-spacing: 0px; indica la separación entre letras. Aumenta la cifra (0) en caso de querer incrementar la distancia.
Por otra parte, line-height: 20px; indica que las líneas estarán a 20 píxeles de distancia una de otra. Al igual que anteriormente, también puedes modificar la cifra.
Finalmente, word-spacing: 0px; indica que las palabras tendrán 0 píxeles de separación por lo que se mostrarán a una distancia estándar (utilizada por la mayoría de páginas web).
A continuación te mostraré párrafos con una configuración distinta. Tal vez podría interesarte utilizar alguno...
En este último caso apliqué también la propiedad color para editar el color del texto. Recuerda que puedes hacer uso de la tabla de colores para escoger tu color favorito.
Para modificar el tamaño del texto, bastaría con hacer uso de la línea font-size:13px; en la que el valor 13 representa el tamaño y puede modificarse. La línea se añadiría justo después del .post-body {.
Todas estas propiedades puede utilizarse también en los títulos de las entradas:
Encuentra la etiqueta ]]></b:skin> y añade justo antes este bloque:
.post-title{
AQUI INCLUYE LAS PROPIEDADES
}
Bastará con sustituir AQUI INCLUYE LAS PROPIEDADES por los atributos CSS que se explican en esta entrada.
Haz vista previa para comprobar el resultado y guarda la plantilla si quedaste conforme con el nuevo aspecto de tus entradas.
