Pubblicato il 14/07/15e aggiornato il

Come usare lo strumento Ispeziona Elemento di Chrome.

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

ispeziona-elemento

Nella parte bassa della pagina si visualizzeranno due riquadri

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

visualizzazione-ispeziona-elemento






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

icona-lente

Questa diventerà di colore celeste e potremo cliccare sull'elemento su cui investigare

investigare-elemento-ispeziona-chrome

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

stili-elementi

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

modificare-elemento-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

distanza-post-data

Si clicca sulla lente quindi si va sempre con il cursore sul Titolo del post

modifica-css

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

opzioni-destro-cursore

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

modificare-elemento-layout

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

#PageList1 > div > ul > li:nth-child(5) > a

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

modificare-elemento

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. 




10 commenti :

  1. non si trova l'icona della lente.Il post è interessante

    RispondiElimina
    Risposte
    1. Ispezionando l'elemento nella versione mobile per distanziare il titolo dal top ho aggiunto semplicemente
      margin-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.

      Elimina
    2. 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
    3. 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
  2. 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.

    RispondiElimina
  3. eh anche io ho inserito lo stesso css
    h3{
    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 :(

    RispondiElimina
  4. uh, funziona, anche se lo distanzia sia nel widget
    pagine che nei post.
    Ernesto grazie.
    Non è che mi dici come posso fare in modo che la distanza risulti solo
    nel widget? _/\_

    RispondiElimina
  5. Ciao,
    uso 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

    RispondiElimina
    Risposte
    1. 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
    2. 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

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.