viernes, 15 de julio de 2016

Tipografías en Blogger: un truco para tener en cuenta

El uso de fuentes tipográficas cargadas de modo online permite no sólo el enriquecimiento visual de un sitio web: también facilita la experiencia del visitante al aportar un rápido sentido de ubicación ante la lectura de cada página.

Vamos a analizar en este post una manera rápida y relativamente sencilla de dar riqueza tipográfica a nuestros blogs, usando un truco que puede implementarse directamente desde la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger (es decir, sin editar directamente la plantilla XML de nuestro blog).

Los orígenes de la idea

Para llevar a cabo la escritura del post previo (que versaba también sobre las posibilidades de cambios tipográficos en Blogger) tuve que investigar en qué sección de la plantilla se reflejan los cambios hechos desde la ventana del Diseñador, específicamente aquellos relacionados a la configuración de las fuentes a ser empleadas en mi blog.

Vuelvo a mostrar ahora la tabla que condensa la información relevada en ese momento, donde incluyo las 6 fuentes que elegí para ser usadas en el blog (en junio de 2016), —una plantilla del grupo Watermark—, y los selectores a los que estaban destinadas… todas las fuentes seleccionadas pertenecen al servicio de Google Fonts.

Variable name elementos afectados familia de fuente elegida
body.font selector="body" Roboto
header.font selector=".header h1" Luckiest Guy
tabs.font selector=".tabs-inner .widget li a" Oswald
date.font selector="h2.date-header" Cuprum
post.title.font selector="h3.post-title, .comments h4" Paytone One
widget.title.font selector="h2" Paytone One

Conviene señalar dos cuestiones, una más de base y otra coyuntural:

  1. El sistema de configuración de Blogger permite la selección de 6 fuentes diferentes, pero no permite elegir a qué selectores serán destinadas: de la tabla se infiere que 4 de las mismas están destinadas a títulos, una a los links del menú principal (sólo visible si es agregada a través de un gadget), y una sola fuente al texto de base del blog (en mi caso, Roboto).
  2. En mi configuración de fuentes, hay dos que se repiten, por lo que el sistema cargará la fuente Paytone One una sola vez (dicho de otra forma, sólo cargará 5 fuentes desde Google Fonts, y no 6).

Del post previo nos llegaba la conclusión que añadir una fuente online para ser destinada, por ejemplo, a los textos del footer de nuestro blog, no era una tarea tan sencilla (al menos, sin meternos con el código de la template XML del blog).

Pero, ¿será posible aprovechar la disponibilidad de cargar esa sexta fuente, y destinarla a un selector distinto de los previstos por el sistema?

La idea en acción

Veamos cómo funciona la idea con un ejemplo concreto.

Paso 1

Voy a reemplazar temporariamente la fuente que configuré para los títulos de los posts (concretamente, los selectores h3.post-title y .comments h4 ) por la fuente que quiero que el sistema cargue para un posterior uso (la fuente Puritan)… con esto consigo desentenderme del problema de editar directamente la plantilla.

  • Abro la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger, selecciono la categoría Entrada, y cambio la fuente previa (Paytone One de 30 px) a Puritan de 24px.

El selector  h3.post-title deberá ser reconfigurado desde ya a su valor previo (en un momento veremos cómo), pero el selector .comments h4 quedará ya con su valor definitivo  —es el que elegimos para los títulos del área de comentarios en el post anterior—.

Paso 2

Asigno la nueva fuente Puritan a los textos mostrados en el footer, y también devuelvo el estilo que tenían los títulos principales de los posts antes de ejecutar el paso 1.

  • Busco en la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger la opción Agregar CSS, y escribo lo que ves a continuación:

¿Algo más..? Nada más. Sólo 2 pasos.

Conclusiones

Como se vé, el truco propuesto es de muy rápida aplicación, y especialmente recomendable para todos aquellos que tengan algunos conocimientos básicos de HTML y CSS, pero no conozcan tanto sobre los manejos de la template XML de Blogger.

Está probado en una de las plantillas “oficiales” de Blogger (del grupo Watermark)… supongo que debe funcionar en el resto de las plantillas suministradas por Blogger, aunque en otras plantillas personalizadas no lo puedo asegurar.

Requiere sí el tener disponible alguna fuente del grupo de 6 que nos deja configurar fácilmente Blogger (debe haber alguna repetición de fuentes en nuestra configuración previa).


Desconozco si este método o truco ya ha sido presentado por alguien en la blogosfera, así como si existe algún inconveniente o contraindicación en su aplicación… desde ya cualquier comentario está más que bienvenido. Chau.

No hay comentarios. :

Publicar un comentario

Related Posts Plugin for WordPress, Blogger...