Cosas sencillas. Cambio tipografía para pie de fotos. | Oloblogger Algunos tenéis blogs con bastantes imágenes y quizás gustéis de realzar los textos al pie (o leyendas en el argot de Blogger) con un sistema...

20 de enero de 2012

Cosas sencillas. Cambio tipografía para pie de fotos.

Algunos tenéis blogs con bastantes imágenes y quizás gustéis de realzar los textos al pie (o leyendas en el argot de Blogger) con un sistema sencillo. Si es así os prometo que más fácil no puede ser.


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; }


Un bicho grande y colorao

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

25 comentarios :

  1. Hola, muy bueno el post, ¿se podría hacer algo similar el el gadget "Imagen" de blogger, en el pié de foto?
    Saludos

    ResponderEliminar
    Respuestas
    1. Me acabo de dar cuenta de que mi respuesta no apareció, por lo que me toca rehacerla.

      Intenté 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;}

      Eliminar
  2. 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 ;)

    Buen finde...

    ResponderEliminar
    Respuestas
    1. 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 ;)

      Eliminar
  3. Como siempre, muchas gracias Oloman.
    Saludos

    ResponderEliminar
  4. Tal como dices, es muy útil para blogs de viajes. Gracias por resolver siempre nuestras dudas ;)

    ResponderEliminar
    Respuestas
    1. Felipe, te saqué en el post de hoy (25-Ene). ¿Lo viste? ;)

      Eliminar
    2. Lo acabo de ver. Siempre es un honor ser citado en la biblia del blogging :D

      Eliminar
  5. Hola Ooman, llevo tiempo intentando poner un marco a mis fotos en el blog pero todo lo que encuentro es para modificar el HTML en la plantilla y no me atrevo a meterme con cosas complicadas... Ya he tenido alguna que otra mala experiencia.. He visto como has enmarcado la ultima foto con el tema de de la leyenda pero, o soy muy torpe o no sé como lo has hecho.. Tengo algunas preguntas y espero que me leas y me ayudes, ¿ Ese código que das sirve para lo que yo quiero??? Y si sirve supuestamente ¿donde tengo que poner el código ultimo que das??. Porque soy bastante torpe en esto y no entiendo donde debo pegar ese código. En redactar no, desde luego, entonces es el HTML del editor de entradas o donde... XD, ten paciencia conmigo, jajajaja... Gracias y espero que me digas todo bien masticadito¡¡¡... Saludos¡¡...

    ResponderEliminar
    Respuestas
    1. El último código servirá para obtener el resultado que ves, sólo en fotografías incorporadas en las entradas y a las que además incluyas leyenda.

      Sólo tienes que editar la plantilla (edición HTML), buscar una etiqueta skin de apertura y otra de cierre. Entre ambas es dónde va en Blogger el estilo (CSS). Justo antes de la etiqueta de cierre es dónde tienes que añadir ese código que viste aquí.

      Una vez grabados los cambios, todas las imágenes con esas características que dije al principio te aparecerán con ese marco. Si no tienes sistema de sumarios puedes incluso hacer Vista Previa para comprobarlo antes de grabar.

      Creo que también te vendrá bien ver este enlace... ;)

      Eliminar
    2. Muchas gracias por contestar Oloman, aunque ya te digo que cuanto mas me meto en esto menos sé... Por lo que deduzco de la única manera que puedo ponerle un borde a mis fotos es modificando la plantilla de HTML y ya te digo que no me atrevo por ciertos problemillas que tuve al principio de empezar con mi blog. Te pongo la dirección por si te quisieras pasar y ver las cosas que he ido poniendo: http://soandoconperros.blogspot.com.es/ El caso es que ya me niego a modificar la plantilla y he intentado subsistir a base de gadgets y similares, aunque soy consciente que hay cosas que no se pueden poner sin meterte en el HTML de la plantilla. Para ti será muy fácil... para mi se me hace un mundo¡¡¡. Aunque ya te digo que algunas cosas si las he ido haciendo, pero al principio que era más valiente... Ahora me da miedo jorobar algo y quedarme sin el blog... Asi que mi pregunta es si hay algun forma de poner aunque sea un recuadro a cada foto sin hacer tanto lio... Tipo gadget o similar... Gracias y perdona si me extiendo mucho¡¡. Saludos

      Eliminar
    3. Sólo sé una manera y es incorporar el estilo en cada post que publiques, pero eso es un auténtico engorro.

      Vamos a ver... Cuando modificas la plantilla NUNCA puedes perder tus entradas o sea, lo principal, el contenido del blog. A lo sumo su estética, que sería como el continente. Además, siempre puedes reinstalar la plantilla y que la estética sea la del principio (antes de modificaciones).

      Añadir además que existe la posibilidad de guardar copia de seguridad de ambos (entradas y plantilla) por separado. La primera no te va a hacer falta en la vida (99% de probabilidad), pero la segunda es más que recomendable precisamente para no arriesgar nuestro diseño, repito DISEÑO, cuando hacemos cambios en la plantilla.

      Otra lectura recomendada: Cambiar la plantilla ¿quién dijo miedo?

      Seguro que puedes hacerlo tú misma, pero como acabo de abrir la "tienda", sólo añadir que por un pequeño coste lo puedo hacer yo (ver banner arriba derecha).

      Eliminar
    4. Ok Oloman tendré en cuenta tu propuesta... ;) En cualquier caso si me decido a hacerlo yo, creo que he visto en tu blog como poner recuadros a las fotos, eso sí claro modificando la plantilla.. jeje.. Bueno, ya te digo que al principio lo hice, ahora quizás me he vuelto mas cómoda y tampoco me gustaría recargar demasiado el blog, que no sé si has entrado, es más visual que otra cosa.. En realidad lo uso más como web que como blog para vender las cosas que hago y la estética es indispensable para mí.. Bueno, no te quiero aburrir, te agradezco muchisimo tu paciencia y si me decido a contratar tus servicios me pondré en contacto contigo¡¡... Eres super majo Oloman¡¡¡.. Saludos¡¡¡

      Eliminar
  6. Está fenomenal, pero el "contenedor" de la leyenda es demasiado grande para mi gusto, sobre todo porque ya subo las imágenes con marco, se podría hacer más pequeño? Gracias

    ResponderEliminar
    Respuestas
    1. Yo pienso que ya es bastante pequeño, así que no imagino cómo lo estás haciendo Adra ¿Me pasas una entrada dónde lo tengas que lo vea?

      Eliminar
    2. Gracias por responder :) Igual no me expliqué bien, mi blog es de fotos y las subo desde el editor de picasa. Antes de subirlas le pongo un marco de ese mismo editor que se llama "desviar sombra" porque me encantaba el efecto que resultaba en la primera plantilla que tuve, que era la simple. Luego cambié a la travel (que la he requetetoqueteado tantísimo que vuelve a parecer la simple,jajaja) y ahí ya no era lo mismo... Intentando recuperar aquel efecto es que llegué a este post, y a este otro y al final no sé como he usado cosas de los dos, y el resultado no me disgusta del todo. Si subo las fotos sin el marco quedan así y las que ya lo tenían, que no me apetece ponerme a quitárselo a todas porque son unas setenta, quedan así Eso es lo que yo decía que era, que es demasiado grande.

      He probado ajustando los paramétros y también a quitarles el marco on-line en google plus a las fotografías, pero ¡Oh! a muchas no puedo quitárselo porque en su momento las edité con el editor de google plus y ahora resulta que son intocables desde que el pinche editor que me de funcionar sin más de un día para otro, cuando intento a acceder me dice que no funciona el editor con mi versión de windows (uso vista) y en la ayuda de google dicen que actualice navegador, tarjeta gráfica y SO, lo tengo todo actualizadísimo, pero nada.

      Ay, Dios, siento muchísmo el rollazo que te he metido. Muchas gracias por tu tiempo, por ser tan amable y por este curro tan fantástico que haces. Soy fan :)

      Saludos

      Eliminar
    3. Pues vas a dejar de serlo pronto porque mi respuesta va a ser muy escueta: yo veo las dos imágenes de los dos enlaces que me pasas, exactamente igual :(

      De todas formas, si te he entendido, las imágenes hasta ahora publicadas tienen un efecto incorporado desde un editor (no desde CSS, no desde tu plantilla). Sí es así eso no tiene otro arreglo que no sea editarlas y recortarlas para quitar el marco previamente añadido... y volverlas a subir, claro.

      Eliminar
    4. No ;) No voy a dejar y sí, si que me has entenedido. Lo que pasa es que después de dejarte el comentario al final me decidí a reeditar todas las fotos, las que no pude hacer on-line las volví a subir esta vez sin marco. Muchísimas gracias igual. Saludos

      Eliminar
    5. OK :)
      Entonces sí que te di la respuesta acertada pero ya la aplicaste por tí misma antes de que te la ofreciera XD

      Eliminar
  7. Muy bueno señor oloman me fue muy util

    ResponderEliminar
  8. Hola. He hecho lo que dices, pero quiero ponerla un poco más grande y aunque le cambio el tamaño no hace efecto el cambio. Me deja el mismo tamaño todo el tiempo. ¿Sabrías a qué es debido? Gracias ;)

    ResponderEliminar
    Respuestas
    1. Hola Haliem. Si me pasas una dirección dónde tengas puesta una foto con texto al pie, te lo veo sin problemas.

      Eliminar
  9. Hola! ¿como se haría si la imagen no esta en una entrada, si no que es un Widget?

    Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Silver Books. Precisamente en el primer comentario de esta entrada preguntaron lo mismo y ahí mismo contesté. Si es algo distinto continúa allí mismo la conversación.

      Eliminar