Partimos de la base de que las imágenes se suben mediante el editor de entradas y luego se pincha en ellas para añadir una leyenda (habilitado sólo desde la pestaña Redactar). Si lo hacéis así, en principio se obtiene algo como esto.
 |
| Un bicho |
Pues bien, el truco consiste en aprovechar que a la celda correspondiente al texto del pie, Blogger siempre le asigna automáticamente una clase determinada. Esta es tr-caption.
Sabiendo esto, sólo tenemos que incorporarla a nuestro CSS y asignarle las propiedades que queramos:
.tr-caption { font-family: Arial, Helvetica; font-weight: bold; color: red; }
|
| Un bicho grande |
Hemos escogido una fuente muy escandalosa adrede para que veáis la diferencia, pero ahí podéis poner a vuestro gusto itálica, negrita, cambiar el color, el tamaño y por supuesto la tipografía. En algunos casos incluso podría ser interesante usar una tipografía del tipo de las que imitan la escritura manual. Supongo que eso estaría bien para fotografías de viajes comentadas mediante este sistema y cosas similares.
Y para redondear recordamos también el posible uso de esta otra clase que corresponde a la tabla completa de imagen+leyenda y que nos permitía realzar el conjunto: tr-caption-container.
table.tr-caption-container { padding: 10px; background: #ffffff; box-shadow: 1px 1px 5px #000000; }
td.tr-caption { font-family: Courier, "Courier New", monospace; }
td.tr-caption { font-family: Courier, "Courier New", monospace; }
|
| Un bicho grande y colorao |
¿Vemos otro post al azar por si le encuentras utilidad?
Hola, muy bueno el post, ¿se podría hacer algo similar el el gadget "Imagen" de blogger, en el pié de foto?
ResponderSuprimirSaludos
Me acabo de dar cuenta de que mi respuesta no apareció, por lo que me toca rehacerla.
SuprimirIntenté decirte que sí, pero que la clase que tendrías que usar sería la de .Image. Esto afectaría a todas las imágenes que incluyas en el blog mediante el gadget Imagen. Si lo que quieres es modificar sólo algunas de ellas, entonces tendrías que localizar su id que sería #ImageX. Por ejemplo:
#Image2, Image4, Image5 {border: 1px solid #000000;}
Es muy sencillo como deces Oloman, pero se ve chulo y además hay muchas personas que no tienen ni idea de cómo hacer estos cambios, así que es muy útil oportuno ;)
ResponderSuprimirBuen finde...
Con el tiempo que llevo haciendo esto hay cosas fáciles que nunca he explicado y sobre las que siempre se me olvida hablar, pero es algo a lo que de vez en cuando pongo remedio ;)
SuprimirComo siempre, muchas gracias Oloman.
ResponderSuprimirSaludos
Y cómo siempre... No hay de qué Gildo ;)
SuprimirTal como dices, es muy útil para blogs de viajes. Gracias por resolver siempre nuestras dudas ;)
ResponderSuprimirFelipe, te saqué en el post de hoy (25-Ene). ¿Lo viste? ;)
SuprimirLo acabo de ver. Siempre es un honor ser citado en la biblia del blogging :D
Suprimir