Hitta rätt i kodmallen med Google Chrome

Har du funderat över hur vissa kan hitta precis rätt del i koden på vilken websida som helst och kunnat säga vad du ska ändra på för att få den effekt du vill ha?

Har du hört uttrycket källkod?
Källkod är den kod vi utomstående kan se på din blogg eller websida utan att logga in på din blogg eller websida. Det ser lite olika ut beroende på vilken webläsare och vilka plugins vi använder, men oftast kan vi se tillräckligt för att hjälpa dig med de flesta problem utan att logga in.

Om du har Google Chrome installerat på din dator (du behöver inte använda den webläsaren för att surfa till vardags ) så kan du också jätte-enkelt hitta rätt kod på vilken websida du vill. Alla webläsare har samma funktion på något vis, men jag föredrar Chrome eftersom den är enkel att använda och lära sig.

Skulle du dessutom vilja testa att använda Chrome för att surfa kommer du att upptäcka en extremt snabb webläsare, men det är ett annat kapitel...

När du har installerat Chrome på din dator och öppnat webläsaren går du till din blogg eller den websida du vill kolla koden på. Högerklicka på den plats på en sida du vill veta koden till. Tryck på Granska Komponent!

Du kommer att få upp en popupruta som ser ut ungefär som den här:

 

På vänster sida hittar du HTML-koden, alltså innehållet på din blogg och hur det är uppbyggt. Antagligen kommer du att känna att det ser ganska rörigt ut, men ju mer du lär dig om hur man bygger upp websidor desto mer kommer du att förstå. Till att börja med är det bra att veta att vilken text eller bild du än söker i din blogg kan du hitta den till vänster.

Lägg gärna märke till att allt har ett eget id eller en "class".

Ett id är något som styr bara ett enda element, kanske en header eller bloggens rubrik.

En klass (class) är något som styr en hel grupp av element, kanske alla rubriker som har storleken: h2 eller alla bilder som är länkade vidare: a img. En klass kan användas många gånger medans ett id bara kan användas en gång.

Till höger hittar du din bloggs CSS-kod, alltså den kod som styr hur ditt innehåll ser ut.

Längst ner i rutan hittar du förstoringsglaset.
Om du tryckte på en sak när du högerklickade men det inte blev rätt kan du använda dig av förstoringsglaset för att välja rätt element att ta reda på koden för eller om du vill veta egenskaperna för ett annat element.

I listan till höger om förstoringsglaset kan du klicka på respektive element (blåmarkerade på websidan) tills du kommer till det element du valt. Tryck där för att se vad som är vad, genom blåmarkeringen på websidan (din blogg) blir det enklare att ta reda på vilket element som heter vad med den här listan.

Antagligen låter det här jätteavancerat, men testa! Det är inte så svårt och det kommer absolut att hjälpa dig att hitta rätt plats i kodmallen att ändra på det du vill fixa till!

Säg att du vill ändra på hur rubrikerna i blogginläggen ser ut i din blogg.
Högerklicka på rubriken och du får fram den här rutan (på ett ungefär)

Här ser du att blogginläggens rubriker heter .post h3 och att fonten har en storlek på 18 px. Du vill att rubrikerna ska vara större så du går antingen till Malldesignern och kopierar hela stycket men skriver font-size: 22px; eller så går du till din kodmall och ändrar direkt där.

Nu när du vet vad du söker efter i koden kommer du att kunna förändra allt på ett mycket enklare sätt och din blogg kan se ut som du vill!
Visst är det bra!