Tips en tutorials voor beginners en gevorderde bloggers

Inspect element: wat is het, en wat kun je er mee?

inspect elementSoms kom je op een prachtig blog en denk je bij jezelf: welk theme zouden ze hebben gebruikt? Het is heel eenvoudig om daar achter te komen. Ik schreef er deze post over!

Maar het kan ook zijn dat je denkt: ‘Oh, wat een mooi font! Wil ik! Wil ik!’

Of je wilt iets veranderen op je eigen blog, maar je vraagt je af waar het eigenlijk zit in de html code.

Dan kun je gebruik maken van Inspect Element.

Inspect Element: wat is dat?

Inspect element is een handig gereedschap dat je een kijkje achter de schermen van een blog geeft. Je kunt het vergelijken met onder de motorkap van een auto kijken!

Inspect element laat je de onderliggende code van een blog of website zien. Dat is een mix van HTML, CSS en Javascript.

Ook kun je met inspect element dingen veranderen zonder dat dit consequenties heeft voor je blog. Je kunt bijvoorbeeld kijken wat een andere kleur voor effect heeft op je blog zonder dat je blog meteen ook die kleur heeft. Of stel, je wilt iets veranderen aan je blog, maar je weet niet goed hoe het element dat je wilt veranderen heet. Met behulp van inspect element kun je dat opzoeken. En dan weet je waar je moet zijn om het te veranderen.

Inspect Element in de praktijk

Laten we als voorbeeld Inspect Element gebruiken om te zien wat iemand als font gebruikt. Want stel je komt op een blog en je denkt: ‘Wauw, wat een leuk lettertype is dat zeg! Dat wil ik ook wel op mijn blog.’ Met Inspect Eement kun je achterhalen wat voor font dat is.

Inspect Element: welk font is dat?

Stel je komt op mijn blog Ren mama, ren en je denkt bij jezelf: ‘Wat een leuk lettertype voor de titels van de posts. Ik kan geen moment langer leven zonder te weten welk lettertype dat is!’

ren mama ren

Ik ga er even vanuit dat je Google Chrome gebruikt als browser

1. Klik met de rechtermuisknop op het element waar je informatie over wilt. In dit geval de titel van de post: ‘Hardloper Ivanka Meulman’. Nu opent een klein venstertje. (Zie hier onder) Onderaan kies je ‘Inspect Element’

inspect element

2. Vervolgens opent zich een venster met informatie. Aan de rechterkant van het scherm zie je de styles van je tekst die je wilde. Bij Font zie je nu dat het font voor de titels van de posts Parisienne is!

parisienne

Inspect Element gebruiken om H-tags te checken in Blogger

Eén van de bekende nadelen van de standaard templates voor Blogger blogs is dat de titels van je blog posts een h3 tag krijgen. En het is beter als ze een h2 tag hebben.

h2 tag

Laten we het blog Fashion Mind eens checken! Je gaat met de muis op de titel van de blogpost staan, en klikt met de rechtermuisknop. Vervolgens kies je Inspect Element. En dan zie je dat dit inderdaad een typisch Blogger blog is met h3 tags voor de post titels:

blogger

Je kunt Inspect Element dus ook goed gebruiken om te checken of een Blogger template wel optimaal is!

Samenvattend: Inspect Element

Inspect Element is een handige methode om te zien hoe een blog is opgebouwd. Zelfs als je weinig kaas hebt gegeten van CSS en HTML kan Inspect Element handig zijn. Je gebruikt Inspect Element simpelweg door naar het blog of website te gaan dat je wilt bekijken en op je rechtermuisknop te klikken.

Je kunt Inspect Element gebruiken om:

  • Te kijken hoe een element op je blog dat je wilt veranderen heet.
  • Iets te veranderen op je blog zonder dat het definitief is. Dus gewoon om eens te kijken hoe het staat.
  • Een template of theme te beoordelen. Hebben de post titels bijvoorbeeld wel H2 tags?
  • Te kijken bij blogs van anderen om te zien hoe zij hun blog hebben opgezet.

Wat vind jij van Inspect Element?

5 Responses to Inspect element: wat is het, en wat kun je er mee?

  1. Met behulp van deze functie heb ik de kleuren van mijn lay-out aangepast. Je kunt precies vinden waar een onderdeel zit en dit later in je CSS aanpassen. Het is zelfs mogelijk om een preview te krijgen in je browser zonder dat je het meteen in het echt aanpast.

Leave a reply