Snel de lettergrootte aanpassen in WordPress

Regelmatig wil ik een aantal woorden in mijn blogs in grotere of kleinere letters neerzetten. Dit lukt niet altijd direct. Ik google wat rond en vind dan tutorials, howto’s, plugins en html-codes. Om het makkelijker te kunnen terugvinden schrijf ik er deze blog over. Ik leg het uit in kleine stappen en met voorbeelden die je zo kan gebruiken voor je eigen blog.

Zelfs met weinig technische kennis kan je je lettergroottes op je eigen blog na het lezen van dit bericht aanpassen.Er zijn plugins voor WordPress te vinden om de lettergrootte te regelen en er zijn mogelijkheden om in je code, CSS of PHP-bestanden aanpassingen te doen. Voor de WordPress-optimalisatie is dit niet altijd aan te raden. En daarbij werken niet alle plugins op de door WordPress gehoste blogs. WordPress-themes staan ook niet altijd toe lettertypes en lettergroottes aan te passen in de code.

De grote vraag is dan:

Hoe kan ik op een snelle manier mijn lettergroottes aanpassen zonder plugins te gebruiken, code aan te passen of toe te voegen?

Hoe kan het dan wel?

Om de lettergrootte (font size) aan te passen op een WordPress-site kan je simpel de HTML <span> tags gebruiken. En nog nauwkeuriger, het gaat dan om style. Dit doe je in de html-editor of tekst-editor, niet in de Wysiwyg-editor.

Voorbeeld

Om kleine letters te krijgen gebruik je dan de volgende tags. Waarbij de tekst natuurlijk tussen de twee tags komt te staan.

<span style=”font-size: xx-small;”>Dit worden kleine letters</span>

Dit worden kleine letters

Van klein naar groot

Er zijn zeven lettergroottes van xx-small naar xx-large. Let erop dat je ook daadwerkelijk de code in kleine letters tikt. “XX Small” wordt niet herkend, “xx-small” is de juiste code. Hieronder staat zeven keer dezelfde regel met daarachter de gebruikte code.

Lorem ipsum dolor sit amet – xx-small

Lorem ipsum dolor sit amet – x-small

Lorem ipsum dolor sit amet – small

Lorem ipsum dolor sit amet – medium

Lorem ipsum dolor sit amet – large

Lorem ipsum dolor sit amet – x-large

Lorem ipsum dolor sit amet – xx-large

HTML-editor

Nu zie je hierboven de voorbeelden staan, wat je nodig hebt voor je eigen blog zijn de codes om de lettergrootte aan te passen. In de html-editor zien deze voorbeelden er als volgt uit.

<span style=”font-size: xx-small;”>Lorem ipsum dolor sit amet – <strong>xx-small</strong></span>

<span style=”font-size: x-small;”>Lorem ipsum dolor sit amet – <strong>x-small</strong></span>

<span style=”font-size: small;”>Lorem ipsum dolor sit amet – <strong>small</strong></span>

<span style=”font-size: medium;”>Lorem ipsum dolor sit amet -<strong> medium</strong></span>

<span style=”font-size: large;”>Lorem ipsum dolor sit amet – <strong>large</strong></span>

<span style=”font-size: x-large;”>Lorem ipsum dolor sit amet -<strong> x-large</strong></span>

<span style=”font-size: xx-large;”>Lorem ipsum dolor sit amet -<strong> xx-large</strong></span>

Succes

Voor de duidelijkheid, de tags voor dikgedrukte tekst <strong></strong> kan je uiteraard nog weghalen op je eigen blog. Succes met deze uitleg.

Advertenties

Over Marijn Krijger

Marijn Krijger is marketeer, blogger en webautochtoon. Specialist in: Strategie, Online marketing, CRM, Content en Analytics.
Dit bericht werd geplaatst in Handig, Marketing, Persoonlijk en getagged met , , , , , , , , , . Maak dit favoriet permalink.

2 reacties op Snel de lettergrootte aanpassen in WordPress

  1. King Billy zegt:

    Thx. Zeer nuttig. Weet jij ook hoe je links naar andere website’s in blogs een ander tekstkleur kan geven? Onderstreping als duiding voor ‘links’ wordt vaak niet opgepikt, heb ik ervaren. Dit kan men o.a. afleiden uit de gegevens die Statcounter geeft.

    • Goede vraag. Ik weet niet of dat in de door wordpress gehoste blogs kan, bij een geupgrade theme zal het wel lukken, want dan kan je het CSS-bestand aanpassen.
      Een kleur aanbrengen in de tekst lukt wel, maar als je er dan een link bijzet, wordt die kleur weer teruggezet naar blauw.
      Als ik het antwoord tegenkom, laat ik je het weten.

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s