Come mostrare molto più grande la prima lettera di un post.

Come mostrare la prima lettera di un articolo di dimensioni molto grandi in tutte le piattaforme di blogging.

I software utilizzati nella editoria hanno la funzionalità di mostrare la prima lettera di un articolo con delle dimensioni significativamente più grandi. Questo modo di presentare i contenuti è stato mutuato dalla carta stampata in cui è molto usato. Per fare in modo che anche nel nostro blog si possano confezionare gli articoli con questa accortezza basta utilizzare il linguaggio CSS. Per i neofiti del blogging ricordo che ho pubblicato l’ebook Guida all’HTML e al CSS che può essere scaricato gratis o meglio al costo di un tweet. Si può decidere di inserire il codice apposito in modalità HTML direttamente in ciascun articolo oppure di creare una classe nel template per poi riprenderla in fase di edizione.

 

Nel primo caso, dopo aver editato l’articolo, si va in Modalità HTML e si modifica la prima lettera del post, che nell’esempio è stata mostrata come P, in questo modo

<span style="float:left; color: #222; font-size:72px; line-height:40px; padding-top:2px; padding-right:2px; padding-bottom:0px; font-family: Georgia;">P</span>rime parole

Successivamente si pubblica l’articolo come al solito

Se invece si vuole inserire la regola nel template bisogna andare su Modello > Personalizza > Avanzato > Aggiungi CSS e incollare questo codice

.iniziale {
float:left;
color: #222;
font-size:72px;
line-height:40px;
padding-top:2px;
padding-right:2px;
padding-bottom:0px;
font-family: Georgia;
}

Si posiziona il cursore dopo l’ultima parentesi graffa e si clicca su Invio. In questo modo diventerà attivo il pulsante Applica al blog in alto a destra, ci si clicca sopra per salvare. Alternativamente questo codice può essere incollato su Modello > Modifica HTML subito sopra alla riga ]]></b:skin>.

Quando si pubblicherà un articolo si va in modalità HTML e invece di incollare tutto il codice sarà sufficiente richiamare la classe di stile che abbiamo creato in questo modo

<span class="iniziale">P</span>rime parole

come mostrato nello screenshot

Naturalmente tutti i parametri colorati di rosso possono essere personalizzati secondo le nostre esigenze, alcuni possono essere tolti mentre altri possono essere aggiunti. Nel primo caso la prima lettera gigante sarà visualizzata anche nell’Editor mentre nel secondo caso solo dopo aver pubblicato l'articolo. Ho mostrato come procedere se si ha un blog su piattaforma Blogger ma la procedura può essere adattata anche ad altre piattaforme quali Wordpress.