Es posible que nunca hayas leído u oído hablar sobre ellas, quizás no sepas su nombre, pero he aquí que es uno de esas formas de conseguir que un elemento de texto tenga un efecto visual gráfico: las letras capitales se basan en el clásico efecto que aumenta el tamaño de la primera letra de un párrafo hasta una dimensión aparentemente desproporcionada, pero que cuando ves el resultado final dices … oh, qué bonito.
El efecto final puede ser bastante exagerado, como en el ejemplo que hemos puesto arriba, o bien más suave, todo depende del tamaño, color y de la fuente que elijas para aplicar. En cualquier caso siempre puedes experimentar porque veremos que las letras capitales son muy fáciles de utilizar en WordPress.
Lo primero que tendrías que hacer es decidir dónde quieres que aparezca la letra capital. Normalmente estarás pensando en instalarla en el bloque de contenido de tus posts o quizás en los excerpts que aparecen en la página inicial de tu blog.
Una vez que lo tengas claro, lo único que tienes que hacer es localizar en qué bloque HTML se muestra dicho contenido. Y esto es muy fácil de averiguar.
Lo único que tienes que hacer es abrir en el navegador una de las páginas de tu blog y, a continuación, visualizar el código fuente. Acceder al código fuente de una página web es muy sencillo. Normalmente, si haces click con el botón derecho del ratón sobre la página en cuestión verás una opción que dice ‘Ver código fuente’ o similar. Si no aparece, siempre puedes buscar en el menú del navegador, entre las opciones de menú ‘Ver’ o ‘Edición’ puedes encontrarla, dependerá del navegador que utilices.
Una vez que tienes abierto el código fuente de la página en cuestión lo que encuentras en pantalla es el código HTML mezclado con textos, imágenes y demás contenido. En general, algo parecido a esto:
Verás que en este ejemplo hemos marcado dos zonas del código HTML. Una de ellas a la izquierda con fondo naranja es el comienzo del texto al que queremos aplicar las letras capitales, es decir, la letra ‘S’ de la frase ‘Según el caso’ es la que debería aparecer enorme.
Si retrocedes un poco en el código hacia atrás, te das cuenta de que la primera etiqueta div que aparece es ésta:
< div class="entry-content" >
Básicamente, esto significa que entry-content es la caja de contenido donde aparece el texto que queremos modificar y es justo esta información la que necesitamos. Ten en cuenta que es solo un ejemplo, es posible que tu tema WordPress utilice otros nombres similares, quizás:
< div class="entry" >
u otro cualquiera.
En este caso, lo que va entre comillas detrás de class= es lo que nos interesa y es el elemento CSS que vamos a modificar (si no sabes qué es CSS no importa).
Para ello tendrías que editar el archivo style.css de tu tema. Puedes hacerlo con un editor de textos en tu ordenador para luego subir el archivo vía FTP o bien acceder al editor de WordPress (En la Administración de tu blog WordPress: Apariencia->Editor) que te permite modificar archivos del theme directamente en el servidor.
Una vez que estás editando el archivo, solo tendrías que añadir esto al final:
div.entry-content p:first-child:first-letter {
float:left;
font-size:5em;
color: #cccc99;
text-shadow: 0.05em 0.05em #CCCCCC;
margin-right:0.10em;
line-height:90%;
}
Ten en cuenta que el anterior código está personalizado para modificar ‘entry-content’, si el elemento CSS es otro en tu caso solo tendrías que modificar el nombre de ‘entry-content’ adecuadamente.
Los atributos que se muestran en el código de ejemplo modifican el tamaño, el color y la posición de la primera letra que aparece en el bloque entry-content, pero si sabes algo de CSS puedes jugar aquí y realizar más cambios, como añadir fuentes diferentes, negrillas, cursivas, colores distintos, etc.