REDAZIONE

Il titolo e la descrizione preimpostati nella maggior parte dei template messi a disposizione in Presentazione > Template sono simili a questo:

Grazie al Foglio di stile presente nella sezione Presentazione > Opzioni avanzate è possibile, in modo semplice, personalizzare sia il loro font che il colore.

Prima di modificare il font bisogna sapere che sul Web non tutti i font sono visibili, poiché, per vedere un font è necessario che questo sia installato nel computer da cui si naviga.
Sul Web, i font più utilizzati perché più diffusi sono: Verdana, Arial, Times, Courier, Georgia, Helvetica.
Detto questo, per modificare il font del titolo e della descrizione, cerchiamo, all’interno del Foglio di stile, queste righe di codice:

#banner h1 {
    font-weight: bold;
    padding: 80px 20px 0px 350px;
}

#banner h2 {
    font-size: 80%;
    padding: 0px 20px 0px 350px;
}

dove #banner h1 definisce il titolo e #banner h2 la descrizione.

Ai due elementi dobbiamo inserire la riga di codice che definisce il font:

Ad esempio, se vogliamo che il font del titolo sia Arial scriviamo:

#banner h1 {
    font-weight: bold;
    padding: 80px 20px 0px 350px;
   font-family: Arial;
}

Font standard: Arial

Se invece vogliamo utilizzare dei font “non standard” nel codice possiamo inserire una lista di font, come:

#banner h1 {
    font-weight: bold;
    padding: 80px 20px 0px 350px;
   font-family: Lcd, Impact, Arial;
}

In questo modo, se chi visualizza il blog non ha installato sul suo computer il font Lcd, il browser mostrerà il titolo in Impact, ma, se nel computer non è presente nemmeno l’Impact, come font sostitutivo viene visualizzato l’Arial.

Font: LCD

Font: Impact

 

Per cambiare il colore, invece, dobbiamo solo sostituire i valori di color dell’elemento #banner a che troviamo sempre nel Foglio di stile:

#banner a {
    color: #047D9C;
    font-weight: bold;
    font-size: 80%;
    text-decoration: none;
}

I valori esadecimali possono essere sostituiti con altri numeri esadecimali oppure scrivendo, in inglese, il nome del colore. Ad esempio:

#banner a {
    color: red;
    font-weight: bold;
    font-size: 80%;
    text-decoration: none;
}

Per utilizzare colori ancora più personalizzati però consigliamo di inserire i valori esadecimali, ad esempio:

#banner a {
    color: #DF1C2D;
    font-weight: bold;
    font-size: 80%;
    text-decoration: none;
}

Buon Lavoro!

Link correlati:
- Come modificare la dimensione e la posizione del titolo del blog
- Come modificare l'header del blog