Per personalizzare la presentazione dei tuoi articoli RSS in Google News, puoi utilizzare i modelli di articoli o le opzioni CSS disponibili nel Centro editori.
Personalizzare gli articoli con CSS
In qualità di editore, puoi utilizzare la funzione Stili articolo per personalizzare la presentazione dei tuoi articoli RSS. Per iniziare il processo, procedi nel seguente modo:
- Accedi al Centro editori.
- Seleziona la tua pubblicazione.
- Fai clic su Google News.
- Fai clic su Articoli del feed.
- Nella casella Input CSS per la tua edizione, inserisci il file CSS.
- Per salvare e visualizzare in anteprima le modifiche, fai clic su Salva e visualizza anteprima.
- Dopo aver salvato il file CSS, il riquadro di anteprima a destra mostra le modifiche apportate allo stile.
- Suggerimento: puoi visualizzare un'anteprima degli stili salvati con la modalità Designer di Google News su dispositivi Android o iOS. Potrebbe volerci anche un minuto prima che le modifiche allo stile siano visibili in modalità Designer.
- Per rendere lo stile CSS visibile pubblicamente, fai clic su Pubblica.
- Lo stile appena pubblicato sarà visibile in Google News entro 2 ore.
HTML in Google News
Google News non pubblica esattamente l'HTML che gli editori utilizzano nei loro feed. Quando Google News aggiunge alla sua libreria articoli generati dall'editore e li trasforma in dati che i suoi clienti possono leggere, non è in grado di distinguere determinati tag. Di conseguenza, Google News segnala un errore di sintassi se si impostano due tag diversi che vengono trasformati nello stesso tag. Ad esempio, aggiungere stili sia al tag <div> sia al tag <p> genera un errore di sintassi.
Di seguito sono riportate alcune delle modifiche apportate da Google News all'articolo HTML generato dall'editore:
| Tag dell'editore | Tag di Google News |
|---|---|
| <div> | <p> |
| <em> | <i> |
| <strong> | <b> |
| <small> | <cite> |
| <strike> | <s> |
| <del> | <s> |
Selettori elemento consentiti
Elementi HTML
Il Centro editori di Google News supporta i seguenti tag HTML:
-
<a>
-
<b> | <strong>
-
<blockquote>
-
<cite> | <small>
-
<del> | <s> | <strike>
-
<div> | <p>
-
<em> | <i>
-
<h1>
-
…
-
<h6>
-
<ol>
-
<q>
-
<sub>
-
<sup>
-
<u>
-
<ul>
Importante: la presenza di una barra verticale "|" tra i tag indica che solo a uno dei tag verranno applicati gli stili a causa delle modifiche apportate all'elemento HTML (vedi sopra).
Elementi di Google News
| Elemento di Google News | Descrizione | Screenshot di esempio |
|---|---|---|
| <ns-caption-copyright> | Copyright di un'immagine | 1 |
| <ns-caption> | Testo della didascalia sotto l'immagine | 2 |
| <ns-edition-name> | L'intestazione del nome della pubblicazione | 3 |
| <ns-author-timestamp> | Testo dell'intestazione con autore e data di pubblicazione | 4 |
| <ns-author-timestamp-separator> | Puntino tra l'autore e la data di pubblicazione | 5 |
| <ns-slideshow-copyright> | Copyright sotto le diapositive | 6 |
| <ns-slideshow-caption> | Didascalie sotto le diapositive | 7 |
| <ns-subtitle> | Sottotitolo dell'articolo | 8 |
| <ns-title> | Testo del titolo dell'articolo | 9 |
| <ns-header-divider> | Divisore tra il titolo dell'articolo e il timestamp dell'autore | 10 |
| <ns-logo> | Logo nella parte superiore dell'articolo | 11 |
Esempi di stili CSS
Puoi applicare uno stile ad alcuni elementi del tuo articolo in Google News modificando il file CSS, come illustrato nell'esempio di seguito:
CSS di esempio
/* Tutti i link sono rossi. */
a { color: #cc0000; }
/* Tutto il testo dell'articolo sarà nero, centrato orizzontalmente e su sfondo bianco. */
p {
color: #000000;
-ns-block-align: center;
/* Il colore di sfondo impostato nel tag 'p' modifica lo stile dell'intero articolo. */
background-color: #FFFFFF;
/* Le impostazioni dei caratteri nel tag 'p' diventano gli stili "predefiniti" sovrascritti dalle regole degli stili negli altri tag. */
font-weight: 300;
font-size: 14sp;
font-style: normal;
vertical-align: baseline;
}
/* Ci sono elementi specifici di Google News di cui puoi modificare lo stile. */
ns-title {
font-weight: 700;
text-decoration: underline;
}
/*
* Applica stili a tutti i tag con l'attributo " class="style-id:firstHeaderOne" " per impostare un testo in rosso.
* Esempio di HTML interessato: <h1 class="style-id:firstHeaderOne">
*/
[style-id="firstHeaderOne"] { color: #cc0000; }
/*
* Per sostituzioni di stili in specifiche sezioni. Utilizza il nome della sezione.
* Ad esempio: per rendere tutti i link nella sezione "Top News" grigi.
*/
a [section="Top News"] { color: #0c0c0c; }
/* Gli stili style-id possono essere utilizzati insieme alle sostituzioni della sezione. */
[style-id="my-style-id"] [section="Top News"] { background-color: #cc0000; }
/* È possibile redigere stili personalizzati anche per gli articoli pubblicati su tablet. */
[style-id="my-style-id"] [section="Top News"] [device="tablet"] { background-color: #cc0000; }Estensioni CSS specifiche per Google News
Selettore style-id
style-id:my-style-id, utilizza un selettore style-id invece di un selettore elemento:[style-id="my-style-id"] { color: #cc0000; }Selettore sezione
/* Testo nero su sfondo bianco per tutte le sezioni. */
p { color: #000000; background-color: #FFFFFF; }
/*
* Testo bianco su sfondo nero per la sezione "Top News".
* Il valore che segue "section=" deve corrispondere a un nome di sezione valido.
*/
p [section="Top News"] { color: #FFFFFF; background-color: #000000; }
Selettore dispositivo
/* testo nero su sfondo bianco per tutti i dispositivi. */
p { color: #000000; background-color: #FFFFFF; }
/*
* Testo bianco su sfondo nero per i tablet.
* Al momento, questo selettore potrebbe assumere solo i valori "all" e "tablet".
*/
p [device="tablet"] { color: #FFFFFF; background-color: #000000; }
Dichiarazioni delle proprietà e valori consentiti
Google News consente solo le seguenti cinque categorie di dichiarazioni di proprietà CSS:
Informazioni su "dp" e "sp".
I pixel indipendenti dalla densità (dp) sono un'unità di misura che viene utilizzata al posto dei pixel (px) perché i diversi dispositivi hanno densità di pixel differenti. Utilizzare i "dp" assicura uno stile omogeneo su dispositivi con densità di pixel diversa.
Pur essendo in genere uguale ai "dp", l'unità di misura "pixel indipendenti dalla scala" (sp) dipende anche dalle dimensioni del carattere impostate dall'utente. Pertanto, all'aumentare delle dimensioni del carattere, aumenteranno anche le dimensioni di un sp.
Per scoprire di più su dp e sp, consulta la guida di riferimento di Material Design.Stili dell'elemento blocco disponibili
| Nome | Valori |
|---|---|
line-height |
decimal-number | percentage |
text-align |
left | right | center | justify |
-ns-block-align |
left | right | center |
-ns-display |
visible | gone |
|
|
dp | sp {1, 2, 4} dp | sp dp | sp dp | sp dp | sp |
|
|
dp | sp {1, 2, 4} dp | sp dp | sp dp | sp dp | sp |
Stile del testo
| Nome | Valori |
|---|---|
font-family |
<family-name> |
font-size |
dp | sp |
font-weight |
bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
font-style |
normal | italic |
letter-spacing |
dp | sp |
text-decoration |
none | underline | line-through |
text-transform |
capitalize | uppercase | lowercase | none |
vertical-align |
baseline | super | sub |
Stile degli elementi HR
| Nome | Valori |
|---|---|
-ns-hr-width |
dp | sp |
-ns-hr-align |
left | right | center |
-ns-hr-thickness |
dp | sp |
Stile degli elementi blocco e testo
| Nome | Valori |
|---|---|
background-color |
<hex-color> |
Stile degli elementi span e HR
| Nome | Valori |
|---|---|
colore |
<hex-color> |