Come ingrandire la prima lettera di un articolo in un blog sulla piattaforma blogger.

Se siete stati, come credo, nei siti di qualche edizione online dei quotidiani vi sarete certamente accorti che la grafica è decisamente più sofisticata di quella di un normale blog. Una cosa che può dare un tocco di originalità è la prima lettera dell’articolo più grande delle altre. Ecco un esempio

tratto dal mio blog di supporto. Se volete anche voi inserire questa originale impostazione grafica potete operare in due differenti modi.

Il primo consiste nell’inserire manualmente il codice necessario intorno alla prima lettera del post (nel caso preso in esame una Esse) mentre il secondo, molto più semplice, si basa nell’introduzione dell’apposito stile nel modello.

Primo caso – Cercate quale sia il colore del testo nel vostro blog andando su Layout > Caratteri e colori e copiate il codice esadecimale. Nel caso preso in esame il colore del testo era #333333. Dopo aver scritto l’articolo andate in modalità HTML e inserite il codice seguente intorno alla prima lettera dell’articolo

<span style="float:left;color:#333333;font-size:72px;
line-height:40px;padding-top:2px;font-family: Times, serif, Georgia;">S</span>

Ecco un altro esempio con la lettera D

ed ecco cosa si vede passando alla modalità Scrivi e cosa si vedrebbe pubblicando il post

I dati in rosso possono essere personalizzati come si crede e rappresentano rispettivamente

1. Il colore della prima lettera del testo che può essere scelto anche diverso da tutto il resto
2. La dimensione in pixel del carattere iniziale, in questo caso 72 ma si può scegliere anche 100
3. L’altezza del carattere. Ho scelto 40 ma si può adattare quest’altezza come si vuole per ottenere il miglior risultato dal punto di vista estetico

Secondo caso -  Andare su Layout > Modifica HTML e pigiando su F3 trovare questo blocco di codice o uno analogo

body {
  margin-top:0px;
  margin-$endSide:0px;
  margin-bottom:0px;
  margin-$startSide:0px;
  font-size: small;
  background-color: $mainBgColor;
  color: $mainTextColor;
}

Immediatamente sopra inserite il seguente codice

dropcap {
float:left;
color: #333333;
font-size:72px;
line-height:40px;
padding-top:2px;
font-family: Times, serif, Georgia;
}

Come mostrato nello screenshot 

Adesso salvate il modello. Come detto nel primo caso i dati in rosso possono essere personalizzati.

Adesso se scriverete un articolo questo sarà pubblicato normalmente come prima di queste modifiche. Nel caso in cui vogliate attivare la Prima Maiuscola Gigantesca, dopo aver scritto il post, dovete entrare in Modalità HTML e racchiudere la prima lettera dell’articolo, in questo caso una S, tra questo semplice codice

<span class="dropcap">S</span>

All’atto della pubblicazione avrete un effetto identico a quello di questo articolo.