BLOG PENNA CALAMAIO®

Formattiamo con classe i nostri post

on il post di oggi voglio insegnarvi come dare un tocco di classe ai nostri post, applicando la formattazione del capolettera in modo da richiamare lo stile tipografico utilizzato nella stampa professionale. Con il termine "capolettera" si definisce la prima lettera di uno scritto, stampata con un carattere più grande rispetto alla parte rimanente del testo. Questo vezzo tipografico, ancor prima di essere utilizzato con l'avvento della stampa, era in realtà utilizzato con finalità ornamentali sin dall'epoca dei codici miniati, quando gli amanuensi erano soliti iniziare la scrittura di un testo con una lettera più grande rispetto alle altre e spesso riccamente decorata in vario modo. Di solito si utilizzavano disegni floreali, figure allegoriche o disegni di animali. Per ottenere questo effetto all'interno di un post è sufficiente agire sul codice html a meno che non si voglia di volta in volta utilizzare delle immagini che riproducono le lettere dell'alfabeto.
In questo post io vi fornirò tre esempi di formattazione del capolettera con i relativi codici , esempi che voi potrete ulteriormente personalizzare adattandoli ai colori del vostro blog o eventualmente scegliendo di utilizzare un diverso carattere.

Il primo esempio è quello che vedete all'inizio del post. Si tratta di un capolettera che si estende su diverse righe ed è caratterizzato dalla prima lettera colorata ed abbellita da un bordo. Per ottenere questo effetto, è sufficiente aprire l'editor del blog, cliccare il link "visualizza html" ed incollare al suo interno il seguente codice con le personalizzazioni del caso:

Analizziamo il codice così sarete in grado di personalizzarlo, poi vi linkerò la pagina dal quale potrete prelevarlo.

ffffff è il codice dello sfondo colorato dato alla lettera. Nel mio caso è bianco. Se il vostro blog ha uno sfondo di diverso colore dovrete modificarlo. Ad es. per il nero, dopo il simbolo del cancelletto # scrivete 000000. (Sono zeri non O).
Ad ogni modo tutti i codici dei colori li trovate qui e la pagina è anche linkata nella mia barra degli strumenti, per quelli fra di voi che la hanno già installata.
3366ff è il codice che identifica sia il colore del bordo sia il colore della lettera. Anch'essi potranno essere modificati a vostra scelta.
Times è invece il nome del carattere o font utilizzato. Provate a scrivere al posto di times "Forte" (senza virgolette) oppure "Calligraphic" e vi accorgete che il carattere del capolettera cambierà. Vi consiglio comunque di usare dei caratteri comuni, presenti di default nei programmi dei computer, altrimenti i vostri lettori non potranno visualizzarli.
C è la prima lettera della prima parola con la quale inizia il post. Se il vostro post inizia ad es. con la parola "Affetto" voi dovrete sostituire nel codice la C con la A .
justify;"> segna la fine del codice. Quindi seguendo l'esempio della parola affetto, immediatamente dopo la > dovrete scrivere "ffetto" ed a seguire il testo del vostro post.

Passiamo ora al secondo esempio:

Come potete notare in questo caso il capolettera sarà sempre esteso su più righe ma il colore dello sfondo sarà differenziato rispetto a quello del post e sarà scomparso anche il bordo. Il tutto si ottiene agendo sempre sullo stesso codice. Modificando il colore di sfondo (background) ed eliminando il tag border con i suoi attributi: border-style, border width e border-color.

Infine osserviamo la terza ipotesi.

E' in realtà lo stesso codice nel quale il colore di sfondo è stato settato come lo sfondo del blog ed è cambiato il colore della lettera.

Come dovete procedere per ottenere questo effetto nel vostro blog?
Semplice. Recatevi nell'editor del vostro blog. Cliccate il link "visualizza html" e si aprirà la finestra nella quale incollare il codice.
Prelevate il codice da qui e personalizzatelo. Incollatelo nella finestra dell'editor, poi cliccate il tasto "aggiorna" e cominciate a scrivere normalmente il vostro post.

Detto questo aspettate che abbia il tempo di studiacchiare un'altra personalizzazione e vi prometto che la condividerò con tutti voi.

(vado a farmi un caffè) Ciao da