Come modificare il modello di Blogger per mostrare molto grande il primo carattere del post.

Come mostrare automaticamente tutte le prime lettere degli articoli in modo molto grande per riprendere lo stile grafico di libri e quotidiani.

Nelle antiche pubblicazioni magari elaborate a mano dagli amanuensi la prima lettera di un libro o anche di una pagina era spesso un capolavoro artistico. Questa tradizione si è protratta nei secoli anche dopo la diffusione della stampa. Si possono trovare moltissimi esempi di libri con il primo carattere molto più grande di tutti gli altri.

Anche la stampa quotidiana è rimasta influenzata da questo gusto tipografico e non sono pochi i giornali che utilizzano tuttora questa scelta grafica. Abbiamo già visto come si possa fare lo stesso per un post su Blogger o su Wordpress. Si tratta semplicemente di inserire un CSS inline con una differente regola per la prima lettera. Questa operazione andrebbe però fatta per tutti gli articoli.

Se per esempio l'articolo iniziasse con le stesse parole di questo post si dovrebbe andare in Modalità HTML e incollare questo codice prima di digitare tutto il resto del testo

<span style="float:left; color: 191919; font-size:72px; line-height:40px; padding-top:2px; padding-right:2px; padding-bottom:0px; font-family: Georgia;">N</span>elle antiche

che produce questo risultato

Il codice precedente funziona in tutte le pagine web e con tutti i CMS quindi anche in Wordpress ma ha la controindicazione di dover sempre incollare tale codice all'inizio di tutti gli articoli. Si può creare una regola generale e incollarla nel modello subito sopra alla riga ]]></b:skin> ma dovremo comunque andare su Modalità HTML per poi riprendere il selettore univoco  impostato.

CONFIGURARE MOLTO GRANDE LA PRIMA LETTERA IN BLOGGER

Nei modelli ufficiali di Blogger il contenuto principale del post ha come selettore univoco div.post-body quindi si può creare un codice per avere la prima lettera dei post molto grandi in modo automatico e questo per tutti gli articoli che abbiamo pubblicato e che pubblicheremo in futuro.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la sezione <b:skin> intorno alla 15-esima, 20-esima riga. Si clicca sulla freccetta nera posta a sinistra per visualizzare tutto il codice. Fatto questo si cerca la riga ]]></b:skin> con Ctrl+F e, subito sopra, si incolla

div.post-body:first-letter {
    float: left;
    font-size: 3.8em;
    font-family: Georgia;
    color: #191919;
    margin-right: 0.10em;
    line-height: 65%;
    text-shadow: 0.04em 0.04em #D1D1D1;
}

con questo risultato

Ho preferito utilizzare l'unità di misura em al posto dei pixel. Tale unità prende come base la dimensione standard dei caratteri utilizzati. Quindi 3.8em significa che la lettera sarà 3,8 volte più grande del carattere normale. La dimensione della interlinea della lettera grande è impostata sul 65% e sono stati introdotti anche il margine destro e l'ombreggiatura della lettera. Ovviamente si possono personalizzare i codici dei colori e la famiglia di font utilizzata (Georgia).  Se il codice non funzionasse significa che il selettore univoco del vostro blog è diverso da quello colorato di viola. Dovrete quindi cercarlo da soli utilizzando per esempio lo strumento Ispeziona Elemento di Chrome. Il primo carattere molto grande sarà visualizzato anche nella Homepage, nelle pagine di archivio e in quelle delle etichette e pure nella versione mobile del blog.