kzkw.net

Dette er egentlig et triks man kan bruke på hvilken som helst side som bruker CSS til presentasjon, og er kjekk for deg som skriver om film, bøker og annet som kan inneholde spoilere for folk som ikke har sett filmen/ lest boka (osv).

Det finnes riktignok en og annen plugin for dette i WordPress, men det er bedre å bruke CSS da det er lettere å tilpasse akkurat din sides utseende.

Det man rett og slett gjør er å legge til en ny css klasse i stilarket til temaet du bruker (style.css), som man rett og slett kan kalle “spoiler”.

.spoiler {}

I .spoiler {} skal du sette inn en skriftfarge som er like eller nesten lik bakgrunnsfargen på siden din, slik at det blir umulig å lese hva som står der. Her på Norsk WP kan man for eksempel bruke hvit eller lys grå.

.spoiler {color:#eee;}

Dette gjør at man må merke teksten for å kunne lese den, men man kan også hjelpe folk med dette slik at de bare trenger å ta musepekeren over teksten for å lese. Dette gjøres ved å legge inn en kontrast bakgrunnsfarge for pseudo klassen :hover.

I dette eksemplet kan det være greit med svart eller mørk grå, for å skape en kontrast til den lys grå skriften.

.spoiler:hover {background:#333}

Hele koden du setter inn i stilarket ditt blir da:

.spoiler {
color: #eee;
}
.spoiler:hover {
background: #333;
}

Så er det bare å lagre stilarket ditt og laste det opp til temamappen din.

Når du nå skal begynne å skrive en omtale og vil benytte deg av spoiler css klassen din, så må du først ha posten din i kodemodus.

Deretter finner du teksten du ønsker å skjule og så legger du inn følgende html:

<span class="spoiler">Spoiler tekst her</span>

Du kan selvfølgelig sette inn class="spoiler" i andre html tagger også, som <div> og <p>.

Det som er viktig er å huske på og avslutte taggen på riktig sted, så ikke hele posten din blir uleselig, eller at den teksten du vil skjule blir synlig likevel. Hvis du er ekstra ‘lat’ kan du jo lage en egen hurtigknapp for merking av spoilere.

Og resultatet?

Spoiler: Det var butleren!

NB: Denne teknikken vil ikke skjule teksten for de som leser posten i feed lesere (her kan kanskje WordPress Feed Styler hjelpe i endel tilfeller), eller for folk som ser bloggen din som ren tekst.