Come modificare le immagini WordPress con il CSS
Apri l'indice dei contenuti
In questa guida vediamo come modificare le immagini WordPress con il CSS. Anche se WordPress è una piattaforma estremamente flessibile e facile da usare, avere una minima conoscenza di HTML e CSS (quello di cui parleremo in questa guida) ti offrirà ancora maggiore flessibilità, permettendoti di personalizzare ulteriormente l’aspetto del tuo sito.
I numerosi temi disponibili – sia gratuiti che a pagamento – permettono a chiunque di realizzare un sito dall’aspetto molto professionale, anche senza conoscere i linguaggi di programmazione.
Come sai, le immagini sono un elemento fondamentale di qualunque blog: servono a movimentare il contenuto delle pagine e, se originali, ad ottimizzarle in modo appropriato, e anche ad attrarre traffico sul sito.
Talvolta, le immagini inserite direttamente all’interno della pagina hanno però un aspetto leggermente amatoriale. Fotografie “nude”, senza alcun bordo o ombra, risultano spesso piatte. Anche se il tuo tema non lo prevede, usando il CSS è però possibile personalizzare il modo in cui appaiono le immagini sul tuo sito WordPress.
In questa guida:
- faremo un ripasso veloce della sintassi base del CSS
- vedremo quali sono le proprietà più efficaci ed utilizzate per modificare l’aspetto delle immagini
- vedremo come applicare le regole CSS alle immagini del tuo sito WordPress. Cioè, come applicarle a tutte le immagini, solo alle immagini che appartengono ad una specifica classe e alle singole immagini.
Come modificare le immagini WordPress con il CSS
Prima di continuare, voglio ricordarti che, se hai problemi sul tuo sito WordPress, non riesci a effettuare modifiche da solo e comunque hai bisogno di assistenza, puoi contattarci subito dalla pagina Servizi. Ti risponderemo tempestivamente, e risolveremo ogni problema rispondendo ad ogni tua esigenza.
Come ho anticipato, iniziamo con un breve ripasso della sintassi delle regole CSS, in modo che la terminologia usata in seguito ti sia sufficientemente chiara. Se è la prima volta che leggi di CSS, ti consiglio di iniziare con questo tutorial introduttivo e iscriverti al nostro video corso WordPress, dove trovi un modulo per imparare il CSS. Visita anche la pagina dei nostri video corsi dove puoi trovare altri utili e interessanti approfondimenti.
Nell’immagine qui sotto, puoi vedere la sintassi di una tipica regola CSS:
Il selettore serve a definire gli elementi ai quali sarà applicata la regola. La proprietà indica la caratteristica su cui andrai a lavorare: per esempio, il bordo, l’ombra, il colore, eccetera. A ogni proprietà assegnerai quindi un valore.
Vediamo ora alcune proprietà che ti saranno utili per modificare le tue immagini con il CSS.
Cominciamo con la proprietà: “Border”
Proseguiamo la nostra guida su come modificare le immagini WordPress con il CSS.
Le proprietà relative ai bordi sono quelle che probabilmente userai più spesso. Ecco le tre principali:
- border-width
- border-style
- border-color
Border-width
Border-width serve a definire lo spessore del bordo. L’unità di misura che utilizzerai sono i pixel.
Esempio:
img { border-width: 3px; }
In questo caso, le immagini avranno un bordo di spessore pari a 3 pixel.
Border-style
Border-style serve a definire la tipologia di bordo che sarà applicata alla tua immagine. Il valore default assegnato a questa proprietà è none, cioè, nessun bordo.
Puoi creare bordi:
- solid (solidi)
- dashed (tratteggiati)
- dotted (puntati)
- double (doppi)
…e altri ancora
Per visualizzare esempi dei vari tipi di bordi, ti consiglio di visitare questa pagina demo di W3School.
Border-color
Questa proprietà serve ad impostare il colore del bordo.
Il colore può essere indicato sia con i valori esadecimali (del tipo #000000), sia con valori RGB (del tipo, rgb(0,0,0)) sia con uno dei nomi previsti per il CSS (per esempio, black – qui trovi tutta la lista dei nomi).
I valori relativi alle tre proprietà appena elencate possono anche essere raggruppati per definire la proprietà generica Border.
L’ordine dei valori è il seguente:
- border-width
- border-style
- border-color
Quindi, il seguente codice:
img { border-width: 3px; border-style: dashed; border-color: green; }
sarà equivalente a
img { border: 3px dashed green; }
In entrambi i casi, il risultato finale sarà un’immagine con bordo tratteggiato verde di spessore 3px.
Border-radius
Un’altra proprietà molto interessante per modificare le immagini con il CSS è quella chiamata border-radius.
Nello specifico, questa proprietà serve a rendere gli angoli delle immagini più o meno arrotondati.
E’ possibile assegnare alla proprietà border-radius sia valori percetuali che in pixel. In generale, più alto è il valore più arrotondati saranno gli angoli.
Ecco un esempio:
img { border-radius: 20px; }
risulterà in un’immagine con angoli di questo tipo:
Circle: immagini tonde
Basandosi sempre sulla proprietà “border-radius” è possibile creare immagini tonde. È molto semplice, basta usare il seguente esempio:
.img-circle { border-radius: 50%; }
Ogni immagine che usa la classe img-circle verrá mostrata in un cerchio. Esempio:
<img class="img-circle" src="esempio.jpg">
La proprietà border-radius può essere usata anche su altri elementi, non solo immagini; può essere di grande effetto e dare ottimi risultati quando è usata con barre laterali, barre di intestazione, etichette di categorie etc.
Se vuoi avere immagini perfettamente arrotondate, dovrai usare un’immagine con la stessa larghezza e altezza. Questa funzionalità è supportata dai browser moderni, chi utilizza ancora Internet Explorer 8 vedrà ancora le immagini squadrate.
Parliamo ora delle proprietà: “Padding”, “Margin” e “Background”
Altri tre aspetti su cui puoi lavorare per modificare le tue immagini sono, appunto, padding, margin e background.
Anche in questo caso, facciamo un breve ripasso del box del CSS.
L’immagine (il nostro contenuto) si trova al centro. E’ quindi circondata dal padding, dal border ed infine dal margin.
Nel caso delle immagini, il background diventa visibile nello spazio del padding, tra il contenuto ed il bordo.
In linea di massima, se desideri che un’immagine sia circondata da uno sfondo a tua scelta, dovrai aggiungere un certo numero di pixel di padding ed un background.
Se invece desideri che il resto dei contenuti che si trovano sulla pagina siano più o meno distanziati dall’immagine, regolerai il margin.
Ecco un esempio del codice per creare un’immagine con padding di 20px sui quattro lati e sfondo rosso:
img { padding: 20px; background: red; }
Passiamo alla proprietà: “box-shadow” (per inserire delle ombre)
Se le immagini risultano troppo piatte sulla pagina, puoi aggiungere delle ombre con il CSS.
La proprietà di riferimento è appunto quella chiamata box-shadow.
Solitamente, vengono assegnati a questa proprietà quattro valori: h-shadow (la posizione dell’ombra in orizzontale), v-shadow (la posizione dell’ombra in verticale), blur (l’estensione della sfumatura dell’ombra) e color (il colore dell’ombra).
Ecco un esempio:
Tutte le immagini alle quali sarà applicata la seguente regola CSS
img { box-shadow: 10px 10px 5px green; }
avranno il seguente aspetto:
Anche in questo caso, il colore può essere definito con valori esadecimali, rgb e rgba o con il nome testuale.
La proprietà: “Trasparenza”
Talvolta, potrebbe anche esserti utile aggiustare la trasparenza delle immagini.
In questo caso, la proprietà di riferimento è chiamata opacity.
I valori vanno da 0.1 (immagine quasi del tutto trasparente) a 1 (immagine del tutto opaca).
Ecco un’esempio della regola CSS:
img { opacity: 0.5; }
Usando questa proprietà, puoi anche creare interessanti effetti. Per esempio, puoi configurare le tue immagini in modo che siano sempre leggermente trasparenti e diventino opache (quindi più visibili) quando l’utente vi muove sopra il cursore (applicando la proprietà opacity: 1; al selettore img:hover).
Ora abbiamo fatto una breve carrellata delle proprietà più utili per modificare le tue immagini. Vediamo subito come applicare tali regole.
Applicare le regole CSS a tutte le immagini del tuo sito
Se vuoi che per default a tutte le immagini del tuo sito siano applicate delle specifiche regole CSS (per esempio, per far sì che abbiano sempre un bordo grigio o gli angoli leggermente arrotondati), dovrai assegnare usare il selettore img (come negli esempi visti fino ad ora).
Questo selettore identifica tutte le immagini del tuo sito.
Applicare le regole CSS ad una classe specifica
Se desideri che siano invece applicate specifiche regole CSS solo ad alcune immagini del tuo sito, dovrai definire una nuova classe e quindi applicare la classe alla fotografia di tuo interesse.
Semplicemente, definisci la tua nuova classe all’interno del file style.css.
Per esempio, potrebbe trattarsi di una classe chiamata img.postimages (in questo caso, crei la classe .postimages alla quale vengono applicate anche le regole css della classe img).
Dovrai quindi assegnare manualmente la nuova classe che hai creato a tutte le immagini alle quali vuoi che siano applicate le relative regole.
Per farlo, aggiungi il nome della classe nella finestra di modifica dell’elemento media all’interno dell’editore WordPress.
Inline CSS
Infine, parliamo di inline CSS, cioè regole CSS che vengono inserite all’interno dell’HTML della pagina – cioè, i codici che vedi nell’Editore di Testo – ed applicate ad una singola immagine.
La sintassi del CSS inline è leggermente diversa rispetto a quella delle regole inserite nel file di style.
E’ infatti necessario usare il tag style= per indicare che i codici che seguono sono, appunto, linguaggio CSS.
Quando inserisci un’immagine all’interno dell’Editore Visuale, i codici nell’Editore di Testo avranno questo aspetto:
<p style="text-align: justify;"><img class=" size-medium wp-image-16751 aligncenter src="https://mk0soswptajfmr4mgn8.kinstacdn.com/wp-content/uploads/2012/09/social-buttons-overlap-1-300x161.jpg" alt="pulsanti social per il tuo sito" width="300" height="161" /></p>
Semplicemente, inserisci il tag style= e le regole CSS tra virgolette, in questo modo:
<p style="text-align: justify;"><img class=" size-medium wp-image-16751 aligncenter" style="border-radius: 20px" src="https://mk0soswptajfmr4mgn8.kinstacdn.com/wp-content/uploads/2012/09/social-buttons-overlap-1-300x161.jpg" alt="pulsanti social per il tuo sito" width="300" height="161" /></p>
Tra le virgolette, puoi inserire quante regole CSS desideri. Assicurati solo di separarle sempre con il punto e virgola.
Se vuoi continuare a imparare a come personalizzare il tuo sito WordPress grazie alle potenti funzionalità del CSS, dai un’occhiata alla nostra guida: “Come modificare il CSS di una singola pagina su WordPress” imparerari a cambiare il colore di un pulsante, la dimensione del testo, la larghezza di un bordo e altro concentrandoti su di una pagina specifica.
Conclusione
In questa guida, abbiamo visto come modificare le immagini WordPress con il CSS.
Sicuramente, questi semplici codici ti aiuteranno a personalizzare le tue pagine e mettere in evidenza gli elementi grafici del tuo sito.
Avevi mai pensato di modificare l’aspetto delle tue immagini?
E’ un dettaglio secondo te in grado di rendere esteticamente più bello e professionale il tuo sito, oppure temi che risulti troppo complicato da implementare?
Come sempre, per qualunque domande e/o suggerimento, ci vediamo nei commenti.
Ciao! Ho installato il Greg Mag Pro. Vorrei aprire tutti gli articoli del mio giornale cliccando sulle foto. Non so come fare! Grazie!
Ciao Francesco, possiamo insegnarti noi a farlo mediante formazione 1 a 1. Contattaci da questo link https://sos-wp.it/assistenza-wordpress/, un saluto e a presto!
Salve, complimenti per il grande contributo che offrite!
Ho una domanda: vorrei nascondere un’immagine nella visualizzazione mobile. Nelle “opzioni avanzate” dell’immagine stessa, cosa devo inserire in “classe CSS dell’immagine” che non capisco?
Ciao Nicola, in quel campo nulla a meno che non vi sia associata una classe che hai creato. Va controllato il codice CSS della immagine: https://sos-wp.it/guida-css-wordpress/. In questo caso però andranno usate le media queries ovvero uno strumento che ci consente di definire differenti regole CSS in base alla dimensione dello schermo.
Salve, non riesco a risolvere un piccolo problema da profano del CSS 😉
Sto modificando tramite Child Theme il tema Storefront. La modifica che sto facendo consiste nell’applicare un effetto sulle immagini del sito.
Ora vorrei applicare questo effetto su tutte le immagini TRANNE alcune (quelle dell’header, ndr). E’ possibile?
Grazie
Ciao Francesco, è possibile creando una classe CSS destinata alle immagini su cui non vuoi applicare la modifica. Leggi anche la guida: https://sos-wp.it/guida-css/. Un saluto e grazie del tuo commento 🙂
Ciao Andrea, ho fatto delle modifiche CSS ad uno slider in homepage, modificandone la dimensione ma ho visto che perdo la responsivitá. Cosa devo aggiungere?
Grazie!
Ciao Nicholas, in tal caso dovresti agire sulle Media Queries. Un saluto!
Ciao! Ho un problema che non riesco a risolvere. Ogni volta che inserisco una mia immagine in un post, WordPress -una volta pubblicato l’articolo- me la inserisce con un bordo che fondamentalmente non ho messo io ma lo mette ogni volta lui ahah non riesco a capire come toglierlo. Potresti aiutarmi?
Ciao, su WordPress.com o WordPress.org?
wordpress.com!
Su WordPress.com non sappiamo aiutarti :(, ci occupiamo solo della versione senza limiti di WordPress, ovvero WordPress.org. Qui puoi leggere tutte le differenze tra le due versioni https://sos-wp.it/conosci-le-differenze-tra-wordpress-com-e-wordpress-org/. Un consiglio? Passa a WordPress.org per avere molta più libertà e possibilità di crescita!
Ciao Andrea,io ho il mio sito con visuale impostata in orizzontale,mentre io ho scattato tutte foto in verticale..esiste un modo per cambiare la visuale d’impostazione in modo da ottimizzare le mie foto fatte?
Grazie mille in anticipo!
Ciao Luca, che tema usi?
Ciao Andrea, scusami ma è possibile creare una galleria di immagini in orizzontale e verticale che si incastrano quasi a formare un unico puzzle? se si che codice posso inserire? non so se mi sono spiegata bene ma vorrei creare una galleria dinamica e meno noiosa, il mio sito è composto solo dalle mie foto! ed il mio tema è divi che mi permette di inserire il css personalizzato 🙂 grazie mille!!!!!
Ciao Letizia,
tutto è possibile con WordPress 😉
Dai un’occhiata a questo plugin.
Grazie mille!!! 🙂
Grazie alla tua preziosa guida ho inserito intono alle immagini un piccolo bordo. Ho solo un problema: quando apro le immagini nel lighbox si visualizza la stessa cornice. Come posso rimuoverla nel lighbox?
Grazie mille
Ciao Bruno,
prova ad ispezionare l’elemento via CSS.
Un saluto!
Risolto! Grazie per il prezioso consiglio.
Ciao avrei una domanda forse banale: È possibile utilizzare due immagini come img background? Mi spiego meglio, l’idea prevede che il template in questione si sviluppi su un blocco centrale lasciando ampio margine a destra e sinistra; ora, vorrei occupare questi spazi inserendo due immagini diverse rispettivamente a destra e a a sinistra. È possibile? E soprattutto, eventualmente come? Grazie mille e davvero complimenti per la qualità di queste risorse.
Ciao Renato,
lavorando direttamente sul codice sicuramente si può fare, ma senza conoscere il tema e come vuoi sistemare il layout non posso darti maggiori indicazioni.
Se hai bisogno di assistenza, contattaci a supporto@sos-wp.it.
Grazie per i tuoi complimenti, continua a seguirci 😉
Salve,
Come posso modificare i caratteri diminuendoli, della parola “password” nel template twentyfourteen del sito sopra indicato?
Su quale file bisognerebbe intervenire?
Un grazie in anticipo per la risposta.
Saluti Giuseppe.
Ciao Giuseppe!
Ho visualizzato il sito in questione, ma non ho capito in quale contesto dovresti modificare modificare i caratteri della parola “password”.
Fammi sapere, in modo che possa aiutarti,
Un saluto!
Ciao
Ti ringrazio per avermi risposto. Il problema si verifica usando il PC. Con i tablet e smartphone non sussiste.
La parola password si trova sotto il nome utente per accedere nel sito. È spezzata pass word. Vorrei che apparisse intera: ,”password’.
Non so sono stato chiaro. Dovrei farti uno snap per farti comprendere meglio. Come posso allegartelo a questo messaggio?
Saluti Giuseppe.
Ciao Giuseppe,
puoi allegarmi lo snap scrivendoci a supporto@sos-wp.it?
Grazie, a presto!