Modificare lo spazio tra le righe e i paragrafi di un post di Blogger

Come impostare l'interlinea su Blogger e come aumentare o diminuire la distanza tra righe in un paragrafo o tra paragrafi in un post o in tutto il blog anche su mobile

In tipografia la distanza tra le righe di testo si indica con l'espressione interlinea, che non è altro che lo spazio bianco tra una riga e l'altra. Tale parametro può essere impostato negli Editor di Testo più comuni come Word e LibreOffice.

L'interlinea può essere settata anche nelle pagine web tramite il tag line-height che determina appunto la distanza tra le varie righe di un testo. Su Word per esempio si seleziona il testo a cui applicare una diversa interlinea per poi cliccare sul pulsante della stessa, che si trova a destra dei pulsanti per l'allineamento a sinistra, a destra, al centro e giustificato.

Si può quindi scegliere una interlinea di default tra 1.0, 1.15, 1.5, 2.0, 2.5, 3 oppure andare su Opzioni interlinea per visualizzare tutte le opzioni come il rientro, la spaziatura e la distribuzione del testo.

Anche l'applicazione Writer di LibreOffice ha la funzione per modificare l'interlinea che è molto simile a quella di Word. Si seleziona tutto il testo (con la scorciatoia da tastiera Ctrl+A), oppure una sua parte, per poi andare sul pulsante della Interlinea che si trova esattamente nella stessa posizione di quello di Word con l'interlinea da scegliere tra 1, 1,15, 1,5, 2. Per impostare un valore personalizzato si va su Fissa. 

COME MODIFICARE L'INTERLINEA IN UN POST DI BLOGGER

Salvate il Tema di Blogger per ripristinarlo nel caso in cui fosse necessario.  Andate su Bacheca -> Tema -> Modifica HTML e cercate la riga .post-body { per poi trovare un blocco di codice simile al seguente

.post-body {
   font-size: 110%;
   line-height: 1.4;
   position: relative; 
}

Il parametro su cui intervenire per aumentare o diminuire l'interlinea nei post di Blogger è quello evidenziato di giallo. Il valore numerico è espresso in unità em cioè 1em è la larghezza della lettera "M" maiuscola della famiglia di font in uso. Quindi se al posto di 1.4 si mette 1.5 verrà aumentata e diminuita se invece si sostituisce con 1.3.

L'interlinea può essere impostata anche in pixel, per esempio possiamo sostituire la riga evidenziata di giallo con line-height:14px; e, in questo caso, sarà indipendente dalla dimensione dei font.

Si può intervenire anche sulla interlinea della versione mobile, per i Temi di Blogger non Responsive. Si cerca la riga .mobile .post per visualizzare un blocco di codice come il seguente

.mobile .post {
   margin: 0;
}

in cui non è presente il tag line-height per impostare l'interlinea. Possiamo aggiungerla p. e. in questo modo

.mobile .post {
line-height:1.2em;
    margin: 0;
  }

per impostare un valore diverso da quello di default.

MODIFICARE L'INTERLINEA IN UN PARAGRAFO

Per evidenziare meglio una testo possiamo aumentare l'interlinea di un paragrafo con questo codice

<p style="line-height:40px;">
testo del paragrafo
</p>

che porterà a questo risultato

Al posto del tag <p> si può usare anche il tag <div> con la stessa sintassi.

MODIFICARE L'INTERLINEA TRA PARAGRAFI

Con il codice precedente si imposta l'interlinea di tutte le righe del paragrafo. Si può però cambiare solo lo spazio che intercorre tra un paragrafo e l'altro. Ecco un elenco di regole generali da usare in questi casi.

1. Usare <p style="margin-bottom:-10px;"> per diminuire di 10px la distanza dal paragrafo che sta sotto
2. Usare <p style="margin-top:-10px;"> per diminuire di 10px  la distanza dal paragrafo che sta sopra
3. Usare <p style="margin-bottom:10px;"> per aumentare di 10px la distanza dal paragrafo che sta sotto
4. Usare <p style="margin-top:10px;">  per aumentare di 10px la distanza dal paragrafo che sta sopra.

AUMENTARE O DIMINUIRE LO SPAZIO TRA 2 parti di TESTO

In linea di massima si può andare su Invio per aggiungere dello spazio tra due porzioni di testo, dopo aver posizionato il cursore alla fine del primo blocco di testo. Si può però impostare una distanza esatta.

Basterà andare su HTML e incollare tra le due porzioni di testo questo codice

<div style='margin-top:-25px;'/> o <div style='margin-bottom:-25px;'/>

per diminuire lo spazio di 25 pixel. Oppure incollare un codice come questo

<div style='margin-top:25px;'/> o <div style='margin-bottom:25px;'/>

per aumentare lo spazio di 25 pixel come abbiamo già visto in un precedente post.

MODIFICARE LO SPAZIO TRA TUTTI I PARAGRAFI IN BLOGGER

Si va su Tema -> Modifica HTML e si cerca la riga ]]></b:skin> con la scorciatoia Ctrl+F.  Se non fosse visibile si clicca sulla freccetta nera accanto alla sezione <b:skin>. Subito sopra a questa riga si incolla questo codice

.post-body p {margin-bottom:-10px;}

Dopo aver salvato il Tema si visualizzeranno i paragrafi con una distanza tra di essi diminuita di 10 pixel.

Ovviamente il valore di -10px è puramente indicativo e può essere sostituito da uno positivo per aumentare la distanza tra i paragrafi. Chi abbia poca dimestichezza con questi temi può scaricare il mio ebook gratuito Guida all'HTML e al CSS in cui troverà le informazioni propedeutiche per avvicinarsi a questi linguaggi di markup.