Aangepaste CSS

Met aangepaste CSS kun je de vormgeving van je website aanpassen. En Jetpack heeft een functie om de CSS van je website aan te passen. “Aangepaste CSS” klinkt erg moeilijk, dus waarschijnlijk heb je geen idee wat dit betekent en wat je ermee zou kunnen doen.

Het goede nieuws is: ook als je niet weet hoe iets precies werkt kun je het gebruiken. Dat doe je immers iedere avond als je het licht in je huis aandoet.

Aangepaste CSS

Ik had het theme Twenty Twelve geïnstalleerd omdat ik dat een lekker fris een eenvoudig theme vond. Maar … in dit theme staat er standaard een dun randje om de afbeeldingen. En dat vind ik lelijk.

Om een dergelijke kleine aanpassing te doen kun je de functie Aangepaste CSS van Jetpack gebruiken.

Jetpack heeft nog veel meer functies. Als je die andere functies niet gebruikt is het niet voor de hand liggend om een grote plugin als Jetpack te installeren. Je kunt dan beter een kleine plugin installeren zoals bijvoorbeeld Simple CSS.

W3 schools

Je kunt heel leuke dingen leren over CSS op W3 schools. Vreselijk leuk! Met oefenopdrachten en alles wat je nog meer nodig hebt.

Hoewel het heel erg de moeite waard is wat tijd door te brengen met spelen op W3 schools, kost dit wel tijd en je wilt je aanpassingen natuurlijk nú aanbrengen.

Kleine aanpassingen

Als je een probleem hebt met het uiterlijk van een theme, dan ben je vast niet de eerste met dat probleem. Hierdoor mag je verwachten dat er bij de zoekresultaten iets te vinden zal zijn, meestal op het forum van WordPress.

  • Formuleer eerst een goede, heldere zoekopdracht in het Engels
Twenty Twelve randen om afbeeldingen

Om iets te vinden over lelijke randen om afbeeldingen in het theme Twenty Twelve heb ik als zoekopdracht gebruikt: Twenty Twelve image borders.

Als je dit zo doet moet je soms eerst een paar zoekresultaten aanklikken voordat je vindt wat je zoekt, maar reken er maar op dat het antwoord op dergelijke simpele problemen op het WordPress forum te vinden is.

Aangepaste CSS

  • Als je gevonden hebt wat je zocht, activeer je de plugin voor CSS.
  • Als je Jetpack gekozen hebt klik je daarna op configureren.

Nu zie je een verwijzing naar een heleboel uitleg. Die uitleg heb je nodig als je zelf iets wilt gaan bedenken, maar zoals je niet precies hoeft te weten hoe de stroom ontstaat waarop je lampje brandt, zo hoef je nu ook niet alles te weten.

Plak de aangepaste CSS die je op het WordPress forum gevonden hebt in het daarvoor bestemde veld van Jetpack aangepaste CSS en kijk naar het voorbeeld. Als het werkt sla het dan op en klaar ben je. Of niet. En als het niet werkt sla je het natuurlijk niet op.

Kleuren van titels en links

Toen ik de afbeeldingen had aangepast zag ik natuurlijk nog zaken die in mijn ogen niet helemaal perfect waren: de kleuren van de links en de kleuren van de titels van pagina’s en artikel.

De kleuren van de links en de kleuren van de titels heb ik op dezelfde manier aangepast: opzoeken wat het zou moeten zijn en in Jetpack aangepaste CSS geplakt.

Onderstreepte links

Ik wilde de links ook graag onderstrepen omdat dit prettig is voor mensen die lijden aan een vorm van kleurenblindheid. Dit zou ik natuurlijk handmatig kunnen doen voor iedere link afzonderlijk, maar door de CSS aan te passen gaat het sneller en efficiënter want op deze manier is het uitgesloten dat ik een link vergeet te onderstrepen.

En zo kun je geleidelijk aan met een klein beetje moeite je hele website aanpassen aan je wensen.

Vindbaarheid van je website

Je kunt erg leuk spelen met aangepaste CSS, gewoon eens proberen. Maar van leuke kleuren wordt je website niet beter vindbaar.

Als je hulp wilt bij het verbeteren van de vindbaarheid van je website, weet dan dat je een privé training SEO kunt krijgen.

Judith de Vries

 

Over Judith de Vries

Marketing voor eenpersoons dienstverlenende bedrijven:

  • erkende Mailchimp expert
  • erkende Mailerlite expert
  • SEO Yoast gecertificeerd
  • Inbound marketing gecertificeerd
Aangepaste CSS was last modified: by
Credits

Met dank aan AlexanderStein voor het materiaal van de kopafbeelding

Aangepaste CSS was last modified: by