Questo articolo è di carattere tecnico, serve a me per ricordarmi la struttura del codice degli elementi utilizzati nel sito.1SDK sta per Software Development Kit.
Ignoralo pure, oppure fatti un bel trip gratuito e molto colorato. :)
Indice dei contenuti
- Classi e stili
- ★ Codici HTML utili
- Cassetti espandibili
- Note
- Lettore multimediale
- Appoggio file multimediali [MEDIA]
- Indice dei contenuti manuale
- Gestione recensioni (in lettura, in pausa, ecc.)
- Collegare un link a JQuery Colorbox
- Footnote
- Linee guida generali
Classi e stili
Di seguito alcune classi di stili personalizzate da usare all'interno degli articoli.
a_capo
Viene usata prevalentemente nel testo preformattato <pre> per forzare il word wrap, perché di default non va automaticamente a capo.
Questo è un testo preformattato senza la classe a_capo. Il testo continua su un'unica riga, a meno che non sia stato inserito un invio a capo.
Questo è un testo preformattato con la classe a_capo. Il testo va a capo automaticamente quando raggiunge il limite delle dimensioni della pagina.
Nota
Questo non vale per tutti i browser. I più stupidi — Safari per esempio — forzano sempre automaticamente il word wrap, spezzando codice che magari nelle intenzioni di chi lo ha pubblicato doveva apparire su un'unica riga.
antiquato
Vedi cassetti espandibili.
appendi_lista
Classe da utilizzare per "avvicinare" una nuova lista a una precedente, in modo che tutte le voci appaiano uniformi. Può essere utile nel caso fosse necessario creare una divisone (ad esempio col "leggi tutto"), oppure per assegnare una differente visibilità a una delle due (farla apparire soltanto agli amministratori, ecc).
Va applicata unicamente alla seconda lista (e ad altre eventualmente successive).
Nota
Non sempre è necessaria. Per esempio all'interno dei cassettini le voci di due liste differenti sono allineate correttamente; quindi usalo quando necessario (nell'indice a inizio articolo, per esempio).
Esempio di liste normali:
- Questa è la prima voce della prima lista
- Questa è la seconda voce della prima lista
- Questa è la prima voce della seconda lista
- Questa è la seconda voce della seconda lista
Esempio con la classe appendi_lista:
- Questa è la prima voce della prima lista
- Questa è la seconda voce della prima lista
- Questa è la prima voce della seconda lista
- Questa è la seconda voce della seconda lista
blinking_cursor
blinking_cursor riduce la distanza verticale della piccola immagine col medesimo nome che utilizzo come cursore lampeggiante quando voglio inserire una sorta di testo da computer anni '80. È necessario assegnarla (unicamente) al paragrafo che precede il cursore (in questo caso "OK").
Esempio:
?SYNTAX ERROR
OK
censura
censura permette di censurare parole o frasi in modo che diventino evidenti soltanto passandoci sopra il mouse.
centro / centrato
centrato permette di centrare velocemente un testo.
come in questo caso.
compact
compact va usato solo nei blocchi di tipo TAB per ridurre lo spazio tra le linguette.
Questo è un blocco TAB standard.
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
Questo è un blocco TAB con classe compact.
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
L'avevo utilizzato in una precedente versione della mia Tolkien-libreria.
dead_link
dead_link viene utilizzato quando un sito linkato all'interno di un articolo non è più raggiungibile.
Esempio:
Questo sito web non esiste più.
dialogo
dialogo consente di trasformare una comune lista in una sorta di dialogo tra personaggi:2Questo perché l'intelligentissimo html prevede di utilizzare delle immagini in sostituzione dei bullet ma non dei semplici caratteri alfanumerici; così ho rimediato con il CSS.
- Questa è una semplice lista di tre elementi
- In effetti appare proprio
- Come una normalissima lista
- Io invece sono una lista
- formattata con la classe dialogo
- Non sono molto più figa?
glitch
Un simpatico effetto di testo fuori sincronia che però, oltre alla classe, ha bisogno anche del parametro data-text valorizzato (solitamente con lo stesso contenuto di testo, ma non obbligatoriamente).
Sintassi
<div class="glitch" data-text="TESTO">TESTO</div>
indent / noindent
indent crea una indentazione di 25 pixel nella prima riga di un paragrafo. Quando si vuole che tutti i paragrafi di un articolo siano indentati, come nel caso dell'articolo sul primo capitolo della Compagnia dell'Anello, è più veloce inserire .entry-content { text-indent: 25px; } nel campo Extra CSS.
noindent rimuove l'indentazione, specialmente nel caso in cui sia stata impostata nel campo Extra CSS.
indice / nascondi / nascosto
indice è utilizzata per nascondere gli indici degli articoli molto lunghi dalla home page, dalla ricerca o dagli archivi. Compariranno soltanto all'interno degli articoli.
nascondi fa l'esatto contrario: mostra qualcosa in home page, ricerca o archivi ma non all'interno degli articoli. Per esempio se è necessario inserire messaggi particolari (come nel caso di alcune pagine dinamiche).
nascosto nasconde un elemento ovunque.
light / verylight
La classe light inserisce una trasparenza del 50% a un elemento.
La classe verylight inserisce una trasparenza del 15% a un elemento.
lista_figa
Rende esteticamente accattivante una lista numerata.
- Ciao, io sono una lista…
- … nella quale ogni voce…
- … ha un numerino colorato.
Spesso conviene abbinarlo alla classe lista_larga.
lista_larga
Separa in modo evidente gli elementi di una lista.
- Questa è una lista standard.
- Tutte le voci sono vicine.
- Ideale per un indice.
- Questa invece è una lista con classe lista_larga.
- Le voci sono molto più distanti. È ideale quando il testo contenuto è molto lungo, e questo crea dei paragrafi.
- In questo modo tutto è più pulito.
maiuscoletto
Formatta il Testo in Maiuscoletto.
margine_ridotto
Riduce di 15px il margine superiore di un elemento. Lo utilizzo principalmente sui titoli interni dei cassetti delle recensioni (come "ulteriori record" o "obiettivi degni di nota").
mistero
Aggiungi la classe mistero a un qualsiasi paragrafo vuoto (mettici almeno uno spazio, perché nei cassettini i paragrafi vuoti vengono nascosti) per creare un terrificante ammonimento di Nosferatu:
nopadding
Finora ho utilizzato questa classe prevalentemente per l'elemento TAB. Rimuove il padding e i bordi sinistro e destro all'interno del DIV, in modo che le immagini possano mantenere la dimensione standard di 666/730 pixel3Misure da rivedere, visto che con l'abbandono di Collapse-O-Magic e l'adozione di <details><summary> ho guadagnato più spazio all'interno dei cassetti. (così non si sputtana il watermark), e non sono costretto a modificarle.
Esempio di TAB normale:
Esempio di TAB con classe nopadding:
piccolo / medio / grande
Generalmente è meglio utilizzare la formattazione del testo di Gutenberg ma, in caso di esigenze particolari possono sono disponibili queste classi:
piccolo | 0.8em |
medio | 1.2em |
grande | 1.5em |
segreto
La classe segreto serve a nascondere un link all'interno del testo. Non viene mostrato sottolineato e il suo colore è molto vicino a quello del testo normale. È è possibile identificarlo osservando il cambiamento del cursore quando il mouse gli passa sopra.
Sintassi:
<span class="segreto">LINK</span>
Questo è un esempio di un link nascosto.
sticky
La classe sticky permette di bloccare un elemento in cima alla pagina quando si scrolla in basso. Inserendola all'interno di un contenitore, per esempio un <div>, questa rimarrà confinata all'interno.
Esempio:
Da questo momento Spok rimarrà in cima alla pagina fino al termine di questo cassetto.
tab_intestazione
La classe tab_intestazione abbinata a sticky consente di avere l'intestazione di una colonna fluttuante:
Nuova traduzione | Vecchia traduzione |
"Dori era un bravo tipo." | "Dori era un buon diavolo." |
"Serviti pure un’altra volta, ce n’è quanto ne vuoi e anche di più!" | "Serviti ancora, ce n’è in abbondanza e d’avanzo!" |
"Lì faceva un freddo cane…" | "Lassù il freddo stava diventando più intenso…" |
"[Gollum] stava pagaiando come un pazzo…" | "[Gollum] stava remando furiosamente…" |
"Sebbene si sentissero molto sollevati, erano anche malmostosi per quello spavento inutile." | "Sebbene fossero molto sollevati, si mostrarono un po’ seccati di essere stati spaventati per niente." |
"… non riesco a stare dietro alla lingua di questi uccelli…" | "… non riesco a comprendere il linguaggio di questi uccelli…" |
[Il vecchio Carc] "… e aveva la testa pelata." | "… e la cima della sua testa era calva." |
"Ci credo, ma sono inchiodato qui fino a mezzanotte." | "Vorrei ben dire! Ma io sono costretto a stare qui fino a mezzanotte." |
"La mia opinione non cambia nel giro di qualche alzata e calata del sole." | "Io non cambio parere coll’alba e il tramonto di pochi soli." |
È necessario creare due blocchi di colonne separate e applicare la classe tab_intestazione a entrambi (per mantenere le dimensioni al 100% con le colonne al 50%), e la classe sticky alla sola intestazione. inoltre i due blocchi di colonne vanno raggruppati, altrimenti l'intestazione si estende fino in fondo all'articolo.
Nel dubbio guarda l'articolo La nuova traduzione dello Hobbit.
zoom
La classe zoom consente di applicare un simpatico effetto zoom sulle immagini (generalmente associate a un link):
Classi Tabelle
Di default il testo all'interno delle tabelle è allineato a sinistra ma è possibile assegnare una di queste classi speciali al campo "Avanzate" > "Classe/i CSS aggiuntiva/e" per modificare questo comportamento:
tabella_sx | Allineamento a sx (default) |
tabella_c | Allineamento al centro |
tabella_dx | Allineamento a destra |
Classi di colore per formattazione codice CSS/HTML
Ci sono quattro classi di colore per formattare il codice CSS o HTML mostrato in questo SDK, ma possono essere impiegate ovunque.
col_tag | Evidenzia la punteggiatura. |
col_cmd | Evidenzia i comandi. |
col_par | Evidenzia i parametri o, in corsivo, le classi. |
col_val | Evidenzia i valori. |
esempio
<img src="pippo.png" title="Questo è un esempio">
Quando utilizzate all'interno di un blocco di testo preformattato, si può assegnare la classe codice al <pre> e usare nomi di classe semplificati: tag, cmd, par, val.
★ Codici HTML utili
Simboli
⌘ | ⌥ ⌃ |
☆ | ☆ |
★ | ★ |
’ | ’ 4Questo apostrofo è da utilizzare all'interno di stringhe HTML contenute tra virgolette singole, come ad esempio i nomi di libri e videogiochi all'interno dei tag expand. |
« | « |
» | » |
← | ← |
→ | → |
↑ | ↑ |
↓ | ↓ |
↔ | ↔ |
↵ | ↵ |
▪ | ▪ |
• | • |
¹ | ¹ |
² | ² |
³ | ³ |
© | © |
® | ® |
™ | ™ |
€ | € |
± | ± |
♥ | ♥ |
♦ | ♦ |
♣ | ♣ |
♠ | ♠ |
Punteggiatura
’ | ’ | per quando l’apice normale da fastidio ai DB |
“ | “ | |
” | ” | “virgolette finali alte” |
„ | „ | “virgolette finali basse„ |
« | « | |
» | » | |
< | < | |
> | > | |
[ | [ | |
] | ] |
Simboli senza codice (fai copia e incolla)
⇧ | ⁕ | ♪ | ♫ | ♬ | ⭑ | ⭒ | |||
➀ | ➁ | ➂ | ➃ | ➄ | ➅ | ➆ | ➇ | ➈ | ➉ |
➊ | ➋ | ➌ | ➍ | ➎ | ➏ | ➐ | ➑ | ➒ | ➓ |
Cassetti espandibili
Quando è necessario inserire un cassetto espandibile, puoi utilizzare il blocco Dettagli di Gutenberg:
Ciao, io sono un cassetto espandibile
Come me (aprimi)…
Alcuni cassetti possono apparire automaticamente aperti
Chiudi, che tira aria! :)
… e me
All'interno di un cassetto espandibile si può inserire qualsiasi blocco di Guternberg. Io, per esempio, sono un paragrafo.
Al mio interno si possono inserire altri cassetti
E così via…
Ciao bella gioia!
… l'uno dentro l'altro…
Ciao cipollino!
… all'infinito
Ciao ciao!
Non è necessario configurare niente, semplicemente scegliere il titolo e se deve apparire aperto o no. Possono essere assegnate eventuali classi.
Gestione manuale (codice HTML)
Se è necessario formattare in modo particolare il titolo (come nelle pagine dei Libri e dei Videogiochi, è necessario creare il blocco in HTML, nel seguente modo:
<details id="eventuale ID"> <summary>titolo con eventuali tag HTML</summary> Contenuto del cassetto </details>
È inoltre possibile separare le righe prima e dopo Contenuto del cassetto in modo da poter continuare a utilizzare i blocchi di Gutenberg come contenuto:
<details id="eventuale ID"> <summary>titolo con eventuali tag HTML</summary>
Blocchi di Gutenberg
</details>
Nel caso sia necessario un secondo campo allineato a destra, si può ricorrere a uno span con classe dx (o destra, o alignright):
<details> <summary>Titolo<span class="dx">Scritta a destra</span></summary> Contenuto del cassetto </details>
Questo è il risultato:
TitoloScritta a destra
Contenuto del cassetto
Per inserire una nota all'interno di un cassetto manuale (per esempio nelle recensioni di libri e videogiochi), puoi usare il seguente formato:
<!-- wp:details {"summary":"Nota","className":"info"} --> <details class="wp-block-details info"><summary>Nota</summary><!-- wp:paragraph --> <p>TESTO</p> <!-- /wp:paragraph --></details> <!-- /wp:details -->
Info
Utilizza la classe info per realizzare un cassettino (solitamente chiuso) contenente informazioni utili.
Istruzioni per la navigazione
All'interno di questo cassetto si potranno trovare informazioni utili e tutorial.
Domande e risposte
Utilizza la classe domanda per realizzare un cassettino (solitamente chiuso) contenente domande e risposte.
Qual è il colmo di un pittore?
Avere quadri che non contano e conti che non quadrano.
Aggiornamento
Gli aggiornamenti all'interno del sito vanno inseriti con un cassetto espandibile aperto con classe aggiornamento, e con la seguente formattazione del titolo:
Aggiornamento: 15 Aprile 2023
Contenuto della nota, che può contenere blocchi ed essere aperta o chiusa, a seconda dell'esigenza.
È sempre buona norma precederlo con un blocco di tipo Ancora chiamato "aggiornamento". Nel caso ce ne sia più di uno, denominare i successivi con "aggiornamento-2", "aggiornamento-3" e così via.
Importante
Il cassettino con classe importante ha i medesimi colori di aggiornamento, ma mostra una stellina al posto dell'orologio:
Importante!
Contenuto della nota, che può contenere blocchi ed essere aperta o chiusa, a seconda dell'esigenza.
Alert
Utilizza la classe alert per realizzare un cassettino (solitamente chiuso) contenente comunicazioni importanti.
Attenzione spoiler
Questa sezione potrebbe contenere informazioni di estrema importanza, come warning o spoiler.
Articolo antiquato
Ci sono articoli che col tempo sono diventati inutili, oppure sono stati sostituiti da altri più recenti. Se non li ho eliminati è perché contengono ancora informazioni degne di nota.
Per marchiare un post come "antiquato" è sufficiente inserire un cassetto (aperto) con classe antiquato:
Articolo antiquato
Questo articolo è superato. Molto probabilmente è stato sostituito da uno più recente o completamente abbandonato perché non più valido. Ho deciso di tenerlo perché contiene informazioni che ritengo comunque interessanti.5Maggiori informazioni sugli articoli antiquati.
Verrà inoltre creato un bordino tratteggiato intorno all'intero articolo, come mostrato da questo paragrafo.
Nota
Per realizzare questo effetto, senza dover impazzire modificando mezzo WordPress, ho utilizzato una funzione CSS nuovissima: :has
Potrebbe non funzionare su browser meno recenti o in versione mobile.
Se per qualsiasi motivo non si vuole che il bordino appaia nell'articolo, è sufficiente aggiungere:
primary:has(details.antiquato) { outline: 0; }
Nel campo Extra CSS del post.
Articolo aggiornato
Quando un articolo è ancora valido, ma ce n'è uno più aggiornato (per esempio la seconda edizione di un libro o di una mappa), puoi utilizzare questo tag.
Per marchiare un post come "aggiornato" è sufficiente inserire un cassetto (aperto) con classe aggiornato:
Articolo aggiornato
C'è una nuova edizione di questo libro. Il presente articolo rimane comunque interessante da leggere, perché contiene interessanti informazioni su come e perché è stato realizzato. :).
Verrà inoltre creato un bordino solido intorno all'intero articolo, come mostrato da questo paragrafo.
Nota
Per realizzare questo effetto, senza dover impazzire modificando mezzo WordPress, ho utilizzato una funzione CSS nuovissima: :has
Potrebbe non funzionare su browser meno recenti o in versione mobile.
Se per qualsiasi motivo non si vuole che il bordino appaia nell'articolo, è sufficiente aggiungere:
primary:has(details.antiquato) { outline: 0; }
Nel campo Extra CSS del post.
Cassetti colorati
Aggiungendo le classi rossa/rosso, gialla/giallo, verde, blu, è possibile colorare i cassetti:
Titolo cassetto rosso
Testo del contenuto con classe rossa o rosso. Link rosso.6Commento rosso. Link interno.
Titolo cassetto giallo
Testo del contenuto con classe gialla o giallo. Link giallo.7Commento giallo. Link interno.
Titolo cassetto verde
Testo del contenuto con classe verde. Link verde.8Commento verde. Link interno.
Titolo cassetto blu
Testo del contenuto con classe blu. Link blu.9 Commento blu. Link interno.
Nota
Nel caso in cui devi inserire un cassetto normale dentro uno speciale, utilizza la classe forza, in modo che mantenga tutti i suoi colori originali (mi ero rotto il cazzo col CSS e non avevo voglia di impazzire per rendere tutto automatico… e poi quante volte avrò bisogno di effettuare questa combinazione?).
Note
Nota
Le note sono molto limitate perché possono essere composte da un solo paragrafo.10A meno di non fare qualche porcata coi <br> nel codice HTML (ma è meglio di no). Per questo motivo, nel caso di testo più complesso, è meglio utilizzare i cassetti espandibili. Le lascio comunque perché non si sa mai; ma nel dubbio con i cassetti non si sbaglia mai.
Per trasformare un paragrafo in una nota (che di default è marroncina) è sufficiente utilizzare la classe nota.
Ciao, io sono una nota. Questo è un link.11Contenuto della nota. Link interno.
Ma aggiungendo anche la classe grigia/grigio, rossa/rosso, gialla/giallo, verde, blu (mantenendo comunque nota e separandole con uno spazio), è possibile colorarla:
Testo del contenuto con classe rossa o rosso. Link rosso.12 Nota rossa. Link interno.
Testo del contenuto con classe rossa o rosso. Link rosso.13Nota gialla. Link interno.
Testo del contenuto con classe rossa o rosso. Link rosso.14Nota verde. Link interno.
Testo del contenuto con classe rossa o rosso. Link rosso.15Nota blu. Link interno.
Testo del contenuto con classe grigia o grigio. Link grigio.16Nota grigia. Link interno.
Il colore dei link contenuti si adatterà automaticamente.
Lettore multimediale
Per inserire un lettore multimediale minimo WP mette a disposizione il blocco "audio". Sfortunatamente è poco configurabile e, per esempio, non si può disattivare l'opzione per il download (potrebbe causare qualche grana di carattere legale).
È pertanto preferibile inserire il seguente HTML personalizzato:
<!-- player multimediale --> <figure class="wp-block-audio"><audio autoplay src="URL_FILE" controls controlslist="nodownload"></audio><figcaption>ARTISTA_E_NOME_BRANO</figcaption></figure>
Se vuoi evitare l'autostart, rimuovi il parametro autoplay.
Esempio:
Appoggio file multimediali [MEDIA]
Quando inserisci file multimediali da linkare al sito, oppure materiale temporaneo di appoggio, l'URL da linkare esternamente è
https://www.lemonskin.net/io/[MEDIA]/[cartella]/[file]
[cartella] può essere [files], [immagini], video17Sì perché, per qualche strano cazzo di motivo, non si possono usare le parentesi quadre con questo termine che sembrerebbe di sistema., ecc…
Indice dei contenuti manuale
Solitamente, per inserire all'interno di un articolo un indice dei contenuti, è sufficiente utilizzare l'apposito blocco di WordPress (chiamato Publishpress). Però, siccome questo include automaticamente tutti i titoli, anche quelli minori come gli H3 degli aggiornamenti (che il più delle volte vanno ignorati), a volte è necessario crearne uno manuale.
Inserisci un titolo H2 denominato "Indice" e un semplice elenco (una lista, insomma) e aggiungi gli anchor delle sezioni a mano.
Infine assegna a entrambi i blocchi la classe indice, in modo che non appaiano nella home (o nelle ricerche).
Gestione recensioni
Le recensioni possono avere quattro stati: nascoste, in lettura, in pausa e attive. È sufficiente assegnare rispettivamente le classi OFF, lettura e pausa per impostarle. Quelle attive non necessitano di alcuna classe aggiuntiva.
Recensione normale
1.Questo è un esempio
In tre occasioni l'uomo rivela la sua natura: quando la sua mente cede all'ira, quando il suo corpo è piegato dal vino e quando deve mettere mano alla borsa.
Ci vogliono venti anni a una donna per fare del proprio figlio un uomo, e venti minuti a un'altra donna per farne un idiota. – Charles Dickens
<details class="recensione"> ...
In lettura
2.Questo è un esempio
Continua ciò che hai cominciato e forse arriverai alla cima, o almeno arriverai in alto ad un punto che tu solo comprenderai non essere la cima.
Con la classe lettura vengono nascoste la data di fine lettura (ovviamente) e il giudizio. Se c'è una citazione, verrà mostrata.
<details class="recensione lettura"> ...
In pausa
3.Questo è un esempio
Quasi tutto — le aspettative degli altri, l'orgoglio, la paura di imbarazzo o di un fallimento — semplicemente svanisce di fronte all'idea della morte, lasciando soltanto ciò che è davvero importante. Ricordarsi che dobbiamo morire è il modo migliore per evitare la trappola di pensare di avere qualcosa da perdere. Siete già nudi, non c'è alcuna ragione per non seguire il vostro cuore. – Steve Jobs
Anche con la classe lettura vengono nascoste la data di fine lettura e il giudizio. Se c'è una citazione, verrà mostrata.
<details class="recensione pausa"> ...
Nascosta
Quando una recensione è nascosta, naturalmente non sarà visibile.
<details class="recensione OFF"> ...
Riletto / Rigiocato / Platinato
Per inserire l'iconcina Riletto / Rigiocato / Platinato nelle recensioni di libri e videogiochi, valorizza lo <span> del titolo con le seguenti classi:
r = Riletto / Rigiocato
p = Platinato / Rigiocato
rp o pr = Riletto / Rigiocato e Platinato
Collegare un link a JQuery Colorbox
La classe colorbox-link-x, dove x è necessariamente un numero, trasforma automaticamente il link in una finestra Jquery Colorbox.
Se si vogliono creare gruppi di immagini basta assegnare lo stesso numero.
Aggiungendo un valore nel tag title di <a> è possibile aggiungere una didascalia al box che si apre, ma poi apparirà anche quando si sposta il mouse sopra il link.
Se, al contrario, non si vuole che un link a una immagine venga automaticamente inglobato in una finestrella colorbox (per esempio se si vuole aprirla in un nuovo tab perché di dimensioni troppo grandi), è sufficiente aggiungere la classe colorbox-off al tag <img> e, naturalmente includere in <a> il parametro:
target="_blank"
Il trucchetto funziona pure con i video18Ogni tanto va anche coi siti web, ma è molto picky a riguardo, per cui eviterei. ma, nel caso di Youtube, è necessario rispettare il seguente formato:
<a href="http://www.youtube.com/embed/CODICE?rel=0&wmode=transparent&vq=hd720&autoplay=1" class="colorbox-link-1">video</a>
Dove CODICE identifica il video.
Altri formati, come ad esempio quello che si copia e incolla direttamente dal sito di Youtube, non funzionano, perché è necessario che il video sia embedded.
Il parametro rel=0 evita che alla fine della visione vengano mostrati i video suggeriti mentre wmode dovrebbe scongiurare un po' di conflitti tra Flash e lo z-index degli elementi nella pagina.
Footnote
Per inserire delle note nel testo19Come questa. puoi utilizzare il bottone F³ nella barra dei blocchi. Questo inserisce un tag <mfn> … </mfn>.
In alternativa anche [footnote] … [/footnote] va bene, ma Gutenberg è un po' schizzinoso coi shortcode, per cui è preferibile il primo sistema.
Per coerenza generale utilizza sempre i footnote dopo la parola interessata, senza alcuno spazio.
Se è a conclusione di una frase, inseriscilo sempre dopo il punto.20In questo modo.
Se invece c'è una virgola21Inseriscimi qui., mettilo prima.
Linee guida generali
Il capolettera va messo generalmente nel primo paragrafo.
Se sta male allora meglio non metterlo. Se sta male nel primo ma bene nel secondo allora mettilo lì.
Non si dovrebbe, ma questo blog è mio e faccio come mi pare. :)
Se hai bisogno di una funzione (javascript) che copi nella clipboard il contenuto di un campo, utilizza CopiaClip().