Pubblicato il 04/11/15e aggiornato il

Come usare i tool Ispeziona Elemento e Analizza Elemento per personalizzare la versione mobile di Blogger.

Come usare Analizza Elemento e Ispeziona Elemento per personalizzare l'aspetto della versione mobile di Blogger indipendentemente da quella desktop.
I browser più usati hanno già configurati degli strumenti per gli sviluppatori in grado di aiutare gli webmaster a personalizzare il layout dei loro siti. Il tool di Chrome si chiama Ispeziona Elemento mentre quello di Firefox è denominato Analizza Elemento.

Per accedere a questi strumenti bisogna aprire la pagina da investigare quindi cliccare con il destro del cursore e scegliere appunto Ispeziona Elemento in Chrome e Analizza Elemento in Firefox. In questo articolo vediamo come sia possibile personalizzare la versione mobile di un blog su piattaforma Blogger. Innanzitutto bisogna già aver attivato la versione mobile andando su Modello > Cellulare per poi cliccare sulla icona della ruota dentata, mettere la spunta a Sì. Mostra il modello per cellulari nei dispositivi mobili e selezionare Personalizza tra tutti i modelli disponibili.

personalizza-modello-blogger

Accedendo a Modello > Modifica HTML si possono trovare le righe di CSS che impostano le regole per l'aspetto del sito nella versione mobile. Tali CSS nei modelli ufficiali di Blogger si trovano solitamente sotto la riga

/* Mobile
----------------------------------------------- */


con blocchi che determinano sfondo, dimensione dei caratteri, colori ecc

personalizzare-versione-mobile-blogger

La maggior parte di questi blocchi di codice per mobile però non contengono delle impostazioni diverse da quelle desktop. Possiamo aggiungere delle apposite righe di CSS per modificare l'aspetto della versione mobile. Questo però non sempre è possibile come per esempio quando non sia presente il necessario selettore univoco.






COME USARE ISPEZIONA ELEMENTO DA MOBILE


Il tool Ispeziona Elemento di Chrome serve appunto per scoprire i selettori univoci in modo da impostare un adeguato foglio di stile. Per investigare il layout della versione mobile dobbiamo però utilizzare un altro tool come Screenfly che mostrerà l'aspetto di una pagina quando è aperta con cellulare o tablet. All'URL della pagina web di Blogger che vogliamo investigare dobbiamo aggiungere ?m=1 per poi incollarlo nel campo del tool Screenfly e andare su GO

investigare-layout-blogger-mobile

Nel menù in alto si sceglie il dispositivo tra Televisione, Computer, Tablet e Cellulare con la relativa risoluzione. In questo modo si avrà una idea molto precisa anche da computer come si vede una particolare pagina con un dato tablet o una certa marca di smartphone. Quando si è scelta la risoluzione si clicca con il destro del cursore sulla pagina e si sceglie Ispeziona Elemento

ispeziona-elemento-chrome

Si visualizzerà un riquadro nella parte bassa della pagina che potrà anche essere spostato a destra

selezionare-elemento-ispeziona-elemento

Si clicca sulla icona della freccia dentro un riquadro in alto a sinistra che diventerà di colore blu. Con tale icona di colore blu potremo cliccare sull'elemento della pagina da investigare

ispeziona-elemento-chrome[4]

Come test ho cliccato sulla data che è molto vicina al titolo del post come mostrato qui sotto

data-post-versione-mobile

Dopo averlo fatto si torna nel riquadro dello strumento, si clicca con il destro del cursore sulla riga che è stata evidenziata quindi nel menù contestuale che si apre si va su Copy CSS Path

selettore-univoco

In questo modo si potrà copiare il percorso CSS dell'elemento che in questo test è

#Blog1 > div.blog-posts.hfeed > div > h2

Poniamo si voglia solo distanziare maggiormente il titolo del post dalla data. Dovremo quindi creare un CSS specifico che abbia questa struttura

#Blog1 > div.blog-posts.hfeed > div > h2 {margin-bottom:25px;}

Tale codice va incollato su Modello > Modifica HTML subito sopra alla riga ]]></b:skin> per poi salvare il modello. Su Screenfly clicchiamo sulla icona del refresh per verificare le modifiche

refresh-screenfly-ispeziona-elemento

Il CSS inserito potrebbe però aver modificato anche l'aspetto della versione desktop. Se verifichiamo che questo è accaduto dovremo utilizzare i tag condizionali specifici per la versione mobile. Mantenendo il CSS di esempio appena usato dovremo ricavarne un codice come questo

<b:if cond='data:blog.isMobile'>
<style>
#Blog1 > div.blog-posts.hfeed > div > h2 {margin-bottom:25px;}
</style>
</b:if>

che va incollato subito sopra alla riga </head>. Si rinfresca nuovamente Screenfly dopo aver salvato il template per verificare che sia tutto a posto nella versione mobile e desktop.

 

COME USARE ANALIZZA ELEMENTO DI FIREFOX


Personalmente preferisco usare Analizza Elemento di Firefox al posto di Ispeziona Elemento di Chrome perché lo trovo più efficace. Bisogna sempre aprire la pagina da investigare su Screenfly e selezionare la risoluzione desiderata quindi si clicca sulla pagina con il destro del mouse e si seleziona Analizza Elemento dal menù contestuale

analizza-elemento-firefox

Stavolta come esempio proviamo a cambiare aspetto del titolo del post quindi clicchiamo sulla icona posta in alto a sinistra come nello strumento di Chrome. Questa diventerà blu. Dovremo poi cliccare con il mouse sull'elemento di cui scoprire il selettore,  in questo caso il titolo del post

analizza-elemento-firefox[4]

Verrà evidenziata la riga dell'HTML di quel dato elemento. Ci cliccheremo sopra con il destro del cursore e sceglieremo dal menù contestuale Copia selettore univoco. Nel test preso in esame il selettore univoco del titolo del post nella versione mobile è

.post-title

che poi è lo stesso anche per la versione desktop. Dovremo quindi utilizzare i tag condizionali per modificare solo la versione mobile creando un codice come questo

<b:if cond='data:blog.isMobile'>
<style>
.post-title {font-size:20px; color:#036; background-color:yellow;}
</style>
</b:if>

da incollare sempre sopra alla riga </head>. È stata modificata la dimensione dei caratteri e cambiato il colore quindi aggiunto anche uno sfondo. Dopo aver salvato il modello si rinfresca il tool Screenfly per verificare che si sia modificato solo da mobile e non da desktop.

analizza-elemento-firefox-mobile

Con Ispeziona Elemento di Chrome e ancora di più con Analizza Elemento di Firefox unitamente ai tag condizionali possiamo aggiungere al modello dei CSS per modificare alcuni elementi del layout del nostro sito limitatamente alla versione mobile. Si può fare anche di più e si possono personalizzare gli elementi in funzione della risoluzione del dispositivo con cui si apre. Insieme ai tool mostrati in questo articolo va utilizzato il tag @media screen come mostrato in questo post




5 commenti :

  1. Ciao Ernesto.
    Post interessante, come tutti del resto!
    Ti volevo chiedere se posso utilizzare questo procedimento per far funzionare il menu nella versione mobile del mio blog. Ho scaricato un template, da quelli che ci avevi consigliato su un post precedente, ma nella versione mobile il menu non funziona e non riesco a risolvere il problema.
    Grazie.
    Melania

    RispondiElimina
    Risposte
    1. Non credo che tu riesca a farlo. Per il menù la scelta migliore è quella di installare un menù per la versione desktop e uno diverso, più semplice per la versione mobile come questo p.e.
      http://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
      @#

      Elimina
    2. Grazie Ernesto.
      Ho provato come proposto nel post che mi hai suggerito. Quando metto i tag condizionali per visualizzare il menu solo sulla versione desktop è tutto ok. Poi quando aggiungo il css per la versione mobile si visualizza sia sul mobile che sul desktop. Così nella versione desktop ho due menù.
      Forse sono le impostazione presenti nel template che ho scaricato? O sbaglio qualcosa?
      Grazie.
      Melania

      Elimina
    3. Non ti so dire la ragione. Forse dipende dal template che ha il codice del menù anche nella sezione per la versione mobile. Puoi controllare consultando questo post
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
      @#

      Elimina
    4. Grazie Ernesto.
      Molto probabilmente il codice del menù sta anche nella sezione per la versione mobile. Per questo ho difficoltà. Ora sono riuscita a far visualizzare il menù sulla versione mobile ma quando si clicca non funziona.
      Melania

      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.