Come personalizzare ogni aspetto del layout del blog utilizzando il tool Ispeziona elemento di Chrome che permette di trovare l'HTML e il CSS di tutti gli elementi e di ricavare anche il loro selettore univoco.
La grande maggioranza delle richieste che mi vengono fatte nei commenti su questo sito riguardano la possibilità o meno di modificare l'aspetto di alcuni elementi del layout concernenti il colore, lo sfondo, le distanze, la dimensione dei caratteri e altri parametri.
I più esperti tra i blogger che leggono questo sito sono ormai in grado di fare da soli e non mi fanno più questo tipo di richieste. A beneficio di coloro che ancora non sono ancora capaci di intervenire da soli per cambiare l'aspetto di alcuni elementi del loro blog illustrerò le funzionalità principali del tool Ispeziona Elemento di Chrome che è l'analogo di Analizza Elemento di Firefox e di Esamina Elemento di Internet Explorer.
Per accedere a questo tool si può usare la scorciatoia da tastiera Ctr+Shift+I oppure cliccare sul destro del mouse per poi scegliere Ispeziona elemento
Nella parte bassa della pagina si visualizzeranno due riquadri
![ispeziona-elemento-chrome[4]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnwmG4Bs-o3SJyED-TOTEbNwZVXg9RanRy4P3aPBUxU8uuO1bq2T4C7Va597_sUY3RupomOFlhJdNMOG8eHak5kFUHExgrMRhyqKMvVxOL4PzgJygocjB7tPWk-SNB8KcWddVohT7V5nI/?imgmax=800 "ispeziona-elemento-chrome[4]")
In quello più a sinistra ci sarà il DOM (Document Object Model) con una struttura ad albero dell'HTML della pagina che inizierà con il tag <html> e terminerà con </html>. Nella parte destra verranno invece mostrati i CSS relativi ai vari elementi. Chi non avesse pratica di questa terminologia può scaricare il mio ebook gratuito Guida all'HTML e al CSS.
Passando con il cursore sul riquadro di sinistra verrà evidenziato di celeste l'elemento a cui si riferisce quel particolare tag. Se il posizionamento del tool in basso nascondesse gli elementi che ci interessano come accade nel caso si cercasse il codice del footer si può andare sulla icona posta in alto a destra per avere una visualizzazione laterale
COME USARE IL TOOL ISPEZIONA ELEMENTO
La scheda che ci interesserà in questo contesto è la prima vale a dire Elements. Per investigare sul codice di un particolare elemento del layout si deve per prima cosa cliccare sulla icona della lente
Questa diventerà di colore celeste e potremo cliccare sull'elemento su cui investigare
Nello screenshot precedente dopo aver cliccato sulla lente è stato cliccato sul Titolo del post. Subito dopo lo strumento ha individuato l'HTML relativo al Titolo presente nel primo riquadro e il CSS visibile nel secondo riquadro. Sotto all'elemento cliccato si visualizzerà anche il selettore univoco dello stesso. Nel caso dell'esempio precedente è h3.post-title. Possiamo testare delle modifiche per vedere come cambia l'aspetto del layout. I CSS barrati sono quelli che pur essendo presenti non sono attivi perché sostituiti da altri CSS con una priorità superiore. La priorità superiore è quella che è stata inserita per ultima definita in cascata oppure con il tag !important. Ci sono anche gli stili ereditati cioè con CSS che riguardano tag inseriti più in alto nell'albero. Gli stili di questo genere vengono indicati come Inherited from
Si può cliccare su una singola riga per modificarla e per vedere l'effetto che fa. Possiamo anche togliere la spunta per disattivare quel particolare CSS
Nello screenshot precedente vediamo come si sia modificato il titolo del post passando da 22px a 40px e dalla famiglia di caratteri Trebuchet MS a quella Georgia. Si possono anche aggiungere nuove righe di codice a quelle già presenti. Facciamo l'esempio di dover aumentare lo spazio tra data del post e titolo dello stesso. Si parte da una situazione di questo genere
Si clicca sulla lente quindi si va sempre con il cursore sul Titolo del post
Cliccando sul CSS relativo al titolo possiamo digitare la nuova riga margin-top:40px; che immediatamente mostrerà come Titolo e Data del post si siano allontanati. Si può quindi settare già con questo strumento il valore in pixel della distanza tra un elemento e quello che sta subito sopra o subito sotto. Si tratta di una considerazione ovvia ma è bene ribadirlo che queste modifiche sono puramente virtuali e che scompariranno qualora si ricaricasse la pagina. Con questo sistema potremo però ricavare i dati necessari per modificare il codice cambiando il valore di un parametro o aggiungendo una o più nuove righe. Il CSS che infatti si vede nel riquadro a destra è esattamente uguale al codice che per esempio nel template di Blogger si trova nella sezione <b:skin>.
Cliccando con il destro del mouse sull'HTML di un elemento possiamo selezionare diverse opzioni
Possiamo per esempio andare su Delete per nascondere quell'elemento oppure scegliere Copy CSS path che sarebbe il percorso a discesa dei CSS dell'elemento.
COME USARE COPY CSS PATH
Facciamo un esempio di come utilizzare l'opzione Copy CSS Path per modificare un elemento anche molto secondario e che non abbia un CSS specifico. Vediamo come si possa intervenire per modificare solo una voce del Menù delle Pagine Statiche nella fattispecie quella Blogger
Si clicca sulla lente quindi sempre con il sinistro del mouse si clicca sulla Voce Blogger in modo che venga evidenziata di colore celeste. Nel primo riquadro con il destro del cursore si va sulla riga dell'HTML relativa a quell'elemento che nel frattempo è stata evidenziata. Infine si clicca su Copy CSS path e si incolla quello che si è copiato nel Blocco Note. In questo esempio si tratta di
che è il CSS specifico per quella data voce. I più esperti avranno già riconosciuto in #PageList1 l'ID del widget delle pagine statiche e in li:nth-child(5) la pseudo-classe del quinto elemento dell'elenco. Facciamo l'ipotesi che vogliamo aumentare la dimensione del font e colorare questa voce di rosso con uno sfondo giallo. Creeremo quindi un codice a partire dal selettore precedente
#PageList1 > div > ul > li:nth-child(5) > a {color:#f00; background-color: yellow; font-size:130%;}
che dovrà essere incollato subito sopra a ]]></b:skin> su Modello > Modifica HTML. Dopo aver salvato il template il menù delle pagine statiche avrà preso questo aspetto
che, a prescindere da considerazioni estetiche riguardo al test effettuato, mostra in modo evidente come si possa operare con una certa semplicità per personalizzare tutti gli aspetti del nostro sito. Ho caricato sul mio Canale di Youtube un video per integrare le informazioni testuali di questo post
Concludo ricordando che qualora un elemento avesse l'aspetto grafico modificato tramite javascript sempre con il menù contestuale del destro del mouse si può scegliere Break on… per risalire al javascript in questione per eventualmente rimuoverlo o per modificarne gli attributi.
non si trova l'icona della lente.Il post è interessante
RispondiEliminaIspezionando l'elemento nella versione mobile per distanziare il titolo dal top ho aggiunto semplicemente
Eliminamargin-top:15px !important; ed ha funzionato.
E' dannosa la modifica?
Vorrei ora solo ingrandire di 10px la barra menu' nella versione mobile.
Il sito è questo :
http://infoutili.blogspot.it/?m=1
Mi dai un consiglio.?
Grazie.Buona notte.
Dannoso per cosa? Una modifica potrebbe essere mal vista dai motori di ricerca solo se viene introdotta per ingannare i lettori tipo testo nascosto o invisibile e non se serve per rendere il layout più usabile
Elimina@#
Per la barra del menù dopo aver trovato il selettore univoco per il mobile bisogna incollare i css tra i tag < style > e < /style > per poi aggiungere i tag condizionali per il mobile e incollare il tutto sopra a < /head >
Elimina@#
Grazie Ernesto, apprezzo la tua risposta ma non ho avuto esperienza in merito. Sto facendo tutto da autodidatta. Solo quando avrai del tempo e se vorrai darmi il codice per ingrandirlo e magari operare sul colore te ne sarei grato. Se tolgo tempo alla tua vita e impegni grazie lo stesso.
RispondiEliminaeh anche io ho inserito lo stesso css
RispondiEliminah3{
margin-top:15px;
}
Solo che il mio problema e nel widget delle pagine...
e anche con ispeziona non riesco a capire dove andare a modificarlo :(
uh, funziona, anche se lo distanzia sia nel widget
RispondiEliminapagine che nei post.
Ernesto grazie.
Non è che mi dici come posso fare in modo che la distanza risulti solo
nel widget? _/\_
Ciao,
RispondiEliminauso sempre ispeziona elemento, e di solito mi aiuta a trovare i file che poi devo modificare. Ma stavolta dove di solito trovo il nome del file ad esempio style.css vedo il link del mio sito "www.sito.it (335)" ma ovviamente questo non è un file, quindi mi chiedo i css che vedo qui... dove li posso modificare?
Grazie
Se ho capito bene hai un modello che utilizza dei CSS esterni. Ci sono due possibilità. Se il CSS è di Blogger e se tu stati usando un modello ufficiale non lo puoi modificare. Se invece come credo stai usando un template scaricato da internet puoi incollare nel browser l'URL del file CSS quindi scaricarlo cliccando sulla pagina e scegliendo salva con nome. Il file lo puoi quindi aprire con un editor come Notepad++ e modificarlo quindi caricarlo su un tuo hosting. se hai un blog gratuito puoi usare Google Sites, quindi ottenerne l'URL diretto e sostituirlo nel codice
Elimina@#
Si il template è scaricato da internet, l'url del file css mi riporta al mio sito, quindi non posso scaricarlo, volendo potrei copiare il codice ma poi dove lo carico nel sito ? E soprattutto che file è? Non riesco bene a capire. Grazie della pronta risposta
EliminaCiao, innanzi tutto complimenti, non riesco a capire il menu blogger in cui incolli la linea di codice css. La mia necessità è quella di ridimensionare alcuni form all'interno di una pagina, sono riuscito a farlo temporaneamente con "Ispeziona". Dovrei applicare questa procedura in wordpress, é possibile? Che template devo editare? Grazie in anticipo.
RispondiEliminaNon conosco così bene Wordpress tanto da poterti dare delle indicazioni più specifiche, mi spiace. Comunque devi agire andando su Aspetto -> Editor e scegliere Testata o header.php quindi cercare la riga </head>. Il codice CSS da aggiungere lo puoi incollare subito sopra a quel tag compreso tra <style> e </style>.
Elimina@#
Scusa il commento è solo per mettere invia notifiche, ancora grazie
RispondiEliminaok, proverò, ma nel menù contestuale non c'è l'opzione copy css path, come posso ovviare? Grazie
RispondiEliminaDevi andare su Copy selector per poi impostare il CSS. Se per esempio il selettore è .selettore devi creare un CSS in questo modo
Elimina.selettore {margin-left:20px;}
per esempio per aumentare la distanza dell'elemento dal bordo sinistra. Questo CSS lo devi mettere tra i tag style come indicato nel commento 6.a. Se non hai esperienza di CSS puoi scaricare il mio ebook gratuito da qui
http://www.ideepercomputeredinternet.com/2012/09/guida-html-ebook.html
con informazioni propedeutiche sul tema
@#