Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Modificar las entradas de tu blog: separación entre letras, palabras y líneas

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.

Lourdes Caballer dice...

Bueno el tutorial, he cambiado mis títulos y ahora tienen el aspecto que buscaba. No cabe duda que tus explicaciones son incomparables, Jaime.

Jaime Trujillo Escobedo dice...

Lourdes, ha sido muy agradable tu comentario. Estoy seguro de que los títulos tendrán ahora un diseño único y personal.

Laube dice...

Insuperable. Desde hace tiempo, quería modificar mis párrafos y distancia entre caracteres. Me va a servir muchñisimo, Jaime.
Eres un crack!
Un besote

Anónimo dice...

Muy bueno Jaime pero hay personas a las que les gusta hacer el justificado en ambos lados y obligatoriamente los espacios entre letras serán diferentes.

Jaime Trujillo Escobedo dice...

Lo mejor de todo, Laube, es que la configuración escogida funcionará por igual en cualquier navegador y con la mayoría de las plantillas que blogger ofrece (tanto del diseñador como antiguas). Como siempre, un placer leer tus palabras. Abrazote!

Jaime Trujillo Escobedo dice...

Anónimo, precisamente los espacios entre líneas no se verían afectados al utilizar el atributo text-align: justify; para justificar el texto, dado que sería la separación entre palabas la que cambiaría. Otorgando un valor alto a word-spacing: 0px; nos premitirá disimular un poco la separación (que variará dependiendo de la palabra) e igualarla.

Laube dice...

Jaime, ya he implementado este truco para la plantilla. Me encanta!!!!! Llevaba mucho tiempo queriendo hacer unas cosillas con la letra, pero no había manera...
Muchas gracias guapetón. Qué haríamos sin tu ayuda!
Un besote

Jaime Trujillo Escobedo dice...

Laube, al menos como lo visualizo desde mi ordenador, el texto de tus entradas se lee a la perfección e incluso no había pensado en lo cómodo que es mostrar recetas con dicha separación (los ingredientes y los pasos a seguir destacan más). Nuevamente, gracias a ti por tus palabras de agradecimiento. Abrazos.

David dice...

Jaime muchas gracias, he querido hacer esto desde hace antes, saludos desde Perú!

Jaime Trujillo Escobedo dice...

¡Pues me das una alegría, David! Seguro que obtuviste un resultado muy atractivo. Saludos desde España.

Gra dice...

clarisimo!!!!
Ya forma parte de mi resumen de tips importantes!!!
Gracias por compartir tanto!!!
Saludos!!!

Jaime Trujillo Escobedo dice...

¡Perfecto Gra! Espero que te ayude a modificar el texto de tu plantilla.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo