Personalizzare le Intestazioni dentro il post nella versione mobile di Blogger.

Come personalizzare le Intestazioni dentro l'articolo nella versione mobile dei blog su Blogger.

Riprendo brevemente il tema che ho affrontato nel post precedente riguardo alla Personalizzazione delle Intestazioni inserite all'interno dell'articolo. Come ho già evidenziato le Intestazioni che si inseriscono tramite l'Editor di Blogger spesso non hanno un aspetto coerente con il loro nome.

Capita infatti che l'Intestazione Principale abbia dei caratteri più piccoli di quella Secondaria e Minore. Le Intestazioni native di Blogger vengono inserite tramite i tag <h2>, <h3> e <h4> considerato che <h1> è il tag del titolo del post. Questi tag però sono presenti nel template e servono anche per altri elementi del blog quali la data del post (h2), il titolo dei widget (h2), l'inizio della sezione commenti (h3) e la scritta Posta un commento (h4).

Anche nella versione mobile se si è scelto Personalizza su Modello > Cellulare > Ruota dentata avremo delle Intestazioni native non in linea con le aspettative di una chiara gerarchia

Questi elementi vengono configurati dall'amministratore del blog tramite il Designer Modelli  che si apre andando su Modello > Personalizza. Quindi per avere delle Intestazioni svincolate da altre regole CSS dovremo usare gli altri tag disponibili che sono <h5> e <h6>.

Per risolvere la questione dovremo incollare questo CSS sopra alla riga ]]></b:skin>

h5 {
font-size:22px;
color:#f00;
font-weight:bold;
text-transform: uppercase;
}
h6 {
font-size:18px;
color:#00f;
font-weight:bold;
}

dove personalizzare a piacere i codici dei colori e le dimensioni dei font. Per inserire l'Intestazione principale e quella secondaria dovremo quindi andare nell'Editor su HTML e digitare

<h5>INTESTAZIONE PRINCIPALE</h5>
<h6>Intestazione Secondaria</h6>

Se dopo la pubblicazione si apre il post con un cellulare, con un tablet o con uno strumento tipo Screenfly si visualizzerà una casa del genere

Ci potrebbe però essere l'esigenza di configurare diversamente le Intestazioni su mobile e su desktop. In questo caso si deve ricorrere ai tag condizionali specifici per mobile e desktop. Ecco un esempio di codice che può essere incollato subito sopra alla riga</head> e che riduce di un pixel le dimensioni dei caratteri nella versione mobile oltre che invertire i colori per maggiore chiarezza

<b:if cond='data:blog.isMobile'>
<!-- Regola Intestazioni Mobile -->
<style>
      h5 {
font-size:21px;
color:#00f;
font-weight:bold;
text-transform: uppercase;
}
h6 {
font-size:17px;
color:#f00;
font-weight:bold;
}
</style>
  <b:else/>
<!-- Regola Intestazione Desktop -->
<style>
      h5 {
font-size:22px;
color:#f00;
font-weight:bold;
text-transform: uppercase;
}
h6 {
font-size:18px;
color:#00f;
font-weight:bold;
}
</style>
    </b:if>

I due screenshot precedenti mostrano come si possa personalizzare in modo diverso le intestazioni su desktop e mobile in cui si sono alternati i colori per rendere la cosa più evidente.