Pubblicato il 22/04/14e aggiornato il

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.

carattere iniziale grande 

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

prima-lettera-gigante

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

letttera iniziale grande

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.




6 commenti :

  1. Come si suol dire, questo post capita proprio a fagiolo. :) Grazie mille

    RispondiElimina
  2. Ciao Ernesto. Ho provato ad inserire il codice nei css seguendo la tua procedura, ma non è successo nulla. Sai da cosa può dipendere?

    RispondiElimina
    Risposte
    1. Quello nel modello o quello direttamente nel post? In ogni caso questo deve funzionare per forza a prescindere dal tuo modello. Forse non hai seguito bene la procedura. Anzi ti dirò che nel caso in cui il codice sia inserito nel post si dovrebbe vedere la lettera grande già nell'Editor.
      @#

      Elimina
  3. Ora ho provato ad incollare il codice direttamente nel post in modalità html, ma mi vengono più grandi le prime parole, anzichè solo la prima lettera. Dove sbaglio? :-/

    RispondiElimina
    Risposte
    1. Leggi bene il post e guarda l'immagine catturata per capire meglio
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.