Togliere o personalizzare il bordo dalle immagini nei post su Blogger

Scrivo questo post per rispondere ai tantissimi che mi chiedono come eliminare il bordo alle immagini nei post. Premesso che consiglio sempre di utilizzare Windows Live Writer per scrivere sul blog, che tra i tanti problemi che risolve c’è anche questo, il bordo applicato alle immagini deriva sempre da impostazioni predefinite dei vari template che non possono essere personalizzate se non mettendo mano al suo codice HTML.

Questione di pochi secondi comunque, e già che ci siamo vediamo anche come personalizzarlo invece di toglierlo.

Il bordo nelle immagini dei post

Il template Minima è il più largamente usato dagli utenti, sia perché è il primo della lista (anche sul mio primo blog usavo il Minima Black), sia perché grazie alla sua essenzialità si presta maggiormente a personalizzazioni (tant’è che in genere i vari template non predefiniti sono derivati dal Minima). Ecco come appaiono le immagini pubblicate utilizzando questo template:

Con una leggera linea a delimitarne i bordi. Altri template utilizzano decorazioni diverse.

Eliminare il bordo alle immagini

Nel caso del Minima, il codice che definisce il bordo delle immagini nei post è il seguente:

.post img {
  padding:4px;
  border:1px solid $bordercolor;
  }

Cercatene la prima riga in Layout->Modifica HTML (ricordo la funzione di ricerca dei browser che si attiva con CTRL+F) e modificatelo così:

.post img {
  padding:4px;
  border:0px solid $bordercolor;
  }

Cambiando quindi 1px in 0px. Con questa modifica abbiamo cambiato lo spessore della linea, mettendola a 0. Salvando il template ecco come appariranno le immagini:

Cioè senza bordo, o meglio con bordo invisibile.

Per completezza d’informazione, aggiungo che all’interno del codice che abbiamo trovato una riga definisce lo spazio lasciato tra le immagini e il testo:

.post img {
  padding:4px;
  border:1px solid $bordercolor;
  }

Aumentando o diminuendo quel 4px, aumenteremo o diminuiremo questo spazio.

Se non riuscite a trovare il codice da modificare nel vostro template, o non ha eliminato del tutto le decorazioni delle immagini, cercate questa riga:

]]></b:skin>

E subito prima incollate:

.post img { 
  border:none !important;
  }

E il gioco è fatto.

Modificare il bordo alle immagini

La proprietà border può essere cambiata per dare diversi aspetti al bordo alle immagini:

Quest’effetto l’ho ottenuto modificando il codice così:

.post img { 
  padding:4px;
  border:3px dashed #FF9900;
  }

La sintassi da usare per modificare la proprietà border l’ho trattata in questo articolo: si concentra su bordi di post ed altri elementi del template, ma quanto scritto per border è valido anche per le immagini nei post, basta seguire i vari esempi e applicarli al codice sopra.

Il ritratto che ho usato nell’esempio è il celebre Gli ambasciatori di Hans Holbein.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!