Como tener Letra Capital en tu Blog

ay bastante gente a la que le gusta usar la letra capital en sus blogs. Me refiero a ese bonito efecto que vemos en libros y periódicos que muestran el primer carácter de un texto en un tamaño, incluso tipografía, diferente.

Yo lo he usado mucho tiempo en CiberPrensa y, como de vez en cuando me lo pregunta algún lector me he animado a realizar una guía en la que mostrar las dos maneras (que yo se) de poner Letra Capital en tu Blog.

El Modo Simple

Hay un modo de conseguirlo del modo mas rápido y sencillo, mediante un plugin. No es mala opción si quieres obtener un resultado rápido, pero tiene el inconveniente de que no controlas completamente el aspecto de la letra capital.

El proceso es este:

  1. Descarga el plugin DropCap First
  2. Descomprímelo en tu ordenador y sube la carpeta “dropcap_first” al directorio de plugins de tu servidor (/wp-content/plugins/)
  3. Activa el plugin

Si te animas, puedes retocar algo del CSS del plugin modificando el fichero ‘dropcap_style.css’, situado en la carpeta del plugin.

El Modo HTML

Aquí ya hablamos de palabras mayores (nunca mejor dicho) pues no solo vas a poder configurar el estilo CSS de un modo básico sino que incluso puedes utilizar marcas HTML especiales o, mas interesante, utilizar imágenes como letra capital. Además, lo automatizaremos con una función PHP.

Para dar un estilo diferente a la primera letra de un párrafo necesitamos enmarcarla en un elemento HTML especial al que luego añadiremos un poco de CSS para ponerlo a nuestro gusto. Utilizaremos un elemento ‘span‘ con la clase ‘letracapital‘. El párrafo resultante sería algo así:

Acuérdate de no repetir la letra después de ‘span’

El CSS

Aquí tienes que ser un poco fino pues cada plantilla tiene diferentes valores de alto de línea y tamaño de fuente, así que tendrás que adaptar esta parte a tu theme. Asumiremos, para el ejemplo, que tu párrafo estándar tiene un tamaño de fuente de 14 pixels y un algo de línea de 18 pixels.

1. ¡Flotando! – Tenemos que hace que nuestra letra capital “flote” a la izquierda para que el texto del párrafo fluya a su alrededor.

2. Tamaño de Fuente – Le asignamos un tamaño de fuente de 40 pixels (recuerda que esto puede variar dependiendo de los valores por defecto de tu plantilla), y un alto de línea de 35 pixels, lo que viene a ser el doble del alto de línea del párrafo estándar menos 1 pixel (en este caso solamente).

3. Mas Estilo – Vamos a utilizar una fuente serif, ponerla en azul y añadirle un poco de espacio a la derecha para que no se mezcle con el párrafo.

Lo normal es que tengas que jugar un poco con el tamaño de fuente y alto de línea para ajustarlo a tu plantilla. Esta es tu tarea y lo que te ofrecerá un estilo personal.

Automatizando que es gerundio

Perfecto, ya has añadido el CSS necesario a tu fichero style.css. Pero ¿a que sería un engorro tener que añadir marcas HTML cada vez que escribas un nuevo artículo?. Con este poco de PHP conseguiremos que WordPress lo haga por ti:

¿Como funciona este código?. Básicamente, coge el contenido del post y envuelve la primera letra con muestra marca especial.

Todo lo que tienes que hacer es pegar este código en el fichero ‘functions.php‘ de tu plantilla.


Ahora tu eliges cual de los dos sistemas prefieres. El primero te da resultados inmediatos y sin esfuerzo, pero el segundo es mucho mas completo y te permitirá distinguir tu blog del resto del mundo.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

Valora este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (2 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran.Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

ESTA WEB UTILIZA COOKIES PARA OFRECER LA MEJOR EXPERIENCIA POSIBLE. SI SIGUES NAVEGANDO DAS TU CONSENTIMIENTO PARA LA ACEPTACIÓN DE COOKIES Y NUESTRA POLÍTICA DE PRIVACIDAD más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar