maandag 19 november 2012

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.







Read article, source: Snel de lettergrootte aanpassen in WordPress»Marijn23.wordpress.com

Geen opmerkingen:

Een reactie posten