Come sottolineare i titoli dei post in Blogger.

Un articolo molto breve di risposta a una domanda che ho letto adesso in un commento e che mi chiede come si possa sottolineare il titolo di un articolo in Blogger. Che io sappia ci sono solo due modi per farlo. In entrambi i casi dobbiamo andare su Design > Modifica HTML e cercare la classe di stile che determina l'aspetto dei titoli dell'articolo. Nel modello Simple del Designer Modelli si trova questo blocco di codice

h3.post-title, .comments h4 {  
  font: $(post.title.font); 
  margin: .75em 0 0;
}

Nei modelli più vecchi potrebbe essere simile a questo

.post h3 {
  text-align:justify;
  font-size: 150%;
  font-weight:bold;
 
}

Ci deve essere comunque il riferimento a h3 che individua il titolo dell'articolo mentre h2 ne individua la data, questo almeno nei modelli ufficiali. Per sottolineare il titolo si usa il tag text-decoration che ha queste opzioni

text-decoration: underline;         : sottolineatura
text-decoration: overline;             : soprallineatura
text-decoration: line-through;        : testo barrato
text-decoration: none;                 : testo puro e semplice

Per sottolineare i titoli del blog è quindi sufficiente aggiungere la riga in rosso al blocco di codice come mostrato qui di seguito

h3.post-title, .comments h4 {  
  font: $(post.title.font); 
  margin: .75em 0 0;
  text-decoration: underline;
}

Ecco come appariranno i post prima e dopo questa modifica

In linea di massima la sottolineatura prenderà il colore del titolo dell'articolo. Con questo attributo non si può fare di più. Quindi, se vogliamo inserire una sottolineatura personalizzata, bisogna inserire nello stile del titolo un bordo inferiore. Il codice va inserito nello stesso blocco, nella stessa posizione del metodo precedente e potrebbe essere così

border-bottom:2px #940F04 dashed;

dove si può personalizzare lo spessore del bordo inferiore, il suo colore e il suo stile (solid, dashed, dotted, ecc). In questo caso ecco come si modifica il titolo dell'articolo

I più esperti di voi sapranno che dashed significa tratteggiato da cui l'aspetto. Con questo metodo sono possibili più personalizzazioni ma ci sono due inconvenienti. Il bordo si vedrà per tutta la lunghezza del layout e, nel caso di un titolo su due righe, sarà visibile solo in quella più bassa.