Agregar una leyenda a las imágenes

En el nuevo editor de Blogger, las imágenes pueden ser agregadas desde el modo Edición de HTML que mostarará la ventana típica para subir imágenes que o bien desde el modo Redactar donde la ventana es un poco más sofisticada. Usando este último método, una vez que vemos la imagen, podemos hacer click en ella para cambiar su tamaño, seleccionado entre los las opciones predeterminadas, alinearla, eliminarla o Añadir una leyenda.

Justamente esto último suele traer alguna consulta respecto a la personalización ya que Blogger agrega una serie de propeidades por defecto y uno, a veces quiere cambiarlas:

table.tr-caption-container {
  margin-bottom: 0.5em;
  padding: 4px;
}
td.tr-caption {
  font-size: 80%;
}

Esta es la leyenda agregada a la imagen

Si miramos el código generado, veremos que en realidad, lo que se ha agregado es una tabla más o menos así:

<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;">
<tbody>
  <tr>
    <td style="text-align: center;">
      <a href="URL_imagen" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;">
        <img border="0" src="URL_imagen" />
      </a>
    </td>
  </tr>
  <tr>
    <td class="tr-caption" style="text-align: center;">el texto con la leyenda agregada</td>
  </tr>
</tbody>
</table>

Mucho código para una pobre imagen pero, es lo que hay.

Para darle un aspecto diferente basta agregar el estilo en alguna parte de nuestro CSS, dentro de <b:skin> </b:skin>; por ejemplo:

table.tr-caption-container { /* esta es la tabla */
  -moz-box-shadow: 0 0 30px #ABC;
  -webkit-box-shadow: 0 0 30px #ABC;
  box-shadow: 0 0 30px #ABC;
  border: 2px solid #567;
  margin: 0 auto;
  padding: 0;
}
td.tr-caption { /* esta es la leyenda */
    background-color: #334455;
    border-top: 1px solid #556677;
    color: #DDEEFF;
    font-family: Georgia;
    font-size: 20px;
    padding: 5px 10px;
}

Esta es la leyenda agregada a la imagen