Come posso stilizzare le didascalie delle immagini nei post di Blogger?

 

Per stilizzare le didascalie delle immagini nei post di Blogger, puoi intervenire sul codice CSS del tema sfruttando la classe classica di Blogger (.tr-caption) o il tag standard HTML moderno (figcaption), così da uniformarle al design del tuo blog e renderle perfettamente leggibili anche in modalità scura.

1.Apri l'editor HTML del tema:Accesso al codice.

Accedi alla dashboard di Blogger, seleziona Tema, clicca sui tre puntini accanto a Personalizza e scegli Modifica HTML.

Verifica: L'editor del codice sorgente del blog risulta aperto.

2.Inserisci lo stile personalizzato:Codice CSS per le didascalie.

Individua il tag di chiusura ]]></b:skin> e inserisci subito prima il seguente blocco CSS. Questo codice si applica sia alle vecchie strutture di Blogger che ai tag semantici moderni, utilizzando le variabili per adattarsi automaticamente anche alla modalità scura:

CSS

.tr-caption, figcaption {
  font-size: 14px; /* Dimensione leggermente più piccola del testo principale */
  font-family: inherit; /* Mantiene lo stesso font del blog */
  color: var(--text-color, #666666); /* Colore attenuato ma leggibile */
  text-align: center; /* Centra la didascalia sotto l'immagine */
  margin-top: 8px; /* Spazio tra l'immagine e la didascalia */
  margin-bottom: 16px; /* Spazio sotto la didascalia */
  font-style: italic; /* Stile corsivo elegante */
  line-height: 1.4;
}

Verifica: Il blocco CSS viene aggiunto correttamente all'interno del foglio di stile senza errori di sintassi.

3.Salva e verifica sul blog:Salvataggio e Test.

Clicca sull'icona del dischetto in basso a destra per salvare le modifiche, quindi apri un articolo del tuo blog che contiene un'immagine con didascalia.

Verifica: Le didascalie appaiono formattate in corsivo, centrate e distanziate correttamente dalle immagini.