Personalizzare gli stili degli articoli RSS

Puoi utilizzare i modelli di articoli o le opzioni CSS disponibili nel Centro editori di Google News per personalizzare la presentazione dei tuoi articoli RSS in Google News.

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:

  1. Accedi al Centro editori di Google News.

  2. Seleziona la tua pubblicazione.

  3. Fai clic sulla scheda Avanzate.

  4. Scorri fino a "Stili articolo".

  5. Nella casella Input CSS per la tua edizione, inserisci il file CSS.

  6. Per salvare e visualizzare in anteprima le modifiche, fai clic su Salva e visualizza in anteprima

  7. Dopo aver salvato il file CSS, il riquadro di anteprima sulla destra mostrerà le modifiche di stile.
    Suggerimento: puoi anche 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.

  8. Per rendere lo stile CSS visibile pubblicamente, fai clic su Pubblica. Lo stile appena pubblicato sarà visibile su Google News entro due 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

Nel Centro editori di Google News puoi utilizzare gli elementi personalizzati di Google News per conferire uno stile al tuo articolo. Esamina gli elementi disponibili riportati di seguito:
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 codice CSS, come illustrato nell'esempio riportato 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

Per applicare uno stile a tutti gli elementi nella classe style-id:my-style-id, utilizza un selettore style-id invece di un selettore elemento:
[style-id="my-style-id"] { color: #cc0000; }

Selettore sezione

Il selettore sezione deve essere utilizzato insieme a un selettore style-id o a un selettore elemento. Utilizza il selettore sezione per sostituzioni di stili in specifiche sezioni:

/* 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

Il selettore dispositivo deve essere utilizzato congiuntamente a un selettore style-id o a un selettore elemento. Utilizza il selettore dispositivo per eseguire sostituzioni di stili specifiche per il 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 ulteriori informazioni su dp e sp, consulta la guida di riferimento 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

margin

margin-right

margin-left

margin-top

margin-bottom

dp | sp {1, 2, 4}

dp | sp

dp | sp

dp | sp

dp | sp

padding

padding-right

padding-left

padding-top

padding-bottom

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>

 

 

Fallo subito nel Centro editori

 

 

È stato utile?
Come possiamo migliorare l'articolo?