Header Ads

Versaler eller gemener i bloggens rubriker

Det finns en hel del man kan göra med bloggens utseende i Malldesignern, men en funktion som saknas är att kunna välja om man vill ha gemener eller versaler i rubriker. (små eller stora bokstäver)

Det finns tre varianter vi använder i css-koden.

  • lowercase som betyder enbart gemener - små bokstäver
  • uppercase som betyder enbart versaler - stora bokstäver
  • capitalize som betyder att varje ord börjar med en versal för att fortsätta med gemener


När vi vill att rubriken ska se normal ut, alltså uppbyggd som en vanlig mening med en versal i början och sen enbart gemener fram till punkten behöver vi inte skriva något speciellt, det är grundinställningen.

Normalt sett ändrar vi rubriker i Malldesignern via Avancerat - Bloggrubrik / Bloggbeskrivning / Inläggsrubrik / Titel på gadget


Om du vill ändra på gemener/versaler på någon eller alla rubrikvarianter kan du göra det via Avancerat - Lägg till CSS.


Här fyller du i den kod du använda och sparar sen.

Det finns fyra rubrikvarianter som är intressanta:

  • .Header h1  =  Bloggrubriken
  • .Header .description  =  Beskrivningen under bloggrubriken
  • h3.post-title a  = Inläggens rubriker
  • h2  =  Datum- och gadgetrubriker

Koderna ser ut så här, lägg till de rader du är intresserad av. Se till att få med de båda { } tecken som hör till varje rubrikkod!

.Header h1 {
  text-transform: uppercase;
}
.Header .description {
  text-transform: uppercase;
}
h3.post-title a {
  text-transform: uppercase;
}
h2 {
  text-transform: uppercase;
}
Om du väljer att kopiera raderna och klistra in dem i kodrutan i Malldesignern kommer du inte att märka någon skillnad i bloggens utseende (om det fungerar likadant i din webläsare som i min).
Du "aktiverar" koden genom att skriva till en bokstav/siffra efter koden och sen radera den igen. Det här är ett programmeringsfel i Malldesignern, men som tur är är det enkelt att lösa problemet för oss. Det kan se ut så här:

h2 { text-transform: uppercase; } m
(Du raderar alltså den extra bokstaven efteråt, men du måste skriva in den via ditt tangentbord, inte klistra in den)

När du är nöjd spar du din mall .

Ps, för att de här koderna ska fungera måste du använda någon av Bloggers nya Designmallar, de man hittar i Malldesignern. Om du har en annan mall kan du lämna din blogglänk här i en kommentar och vilken rubrik du vill ändra så ska jag se om jag kan hjälpa dig.

18 comments:

  1. funkade inte för mig ... :(

    ReplyDelete
  2. Vad synd att du inte skrev din bloggadress, då hade jag kunnat kika och ge dig de koder som fungerar i din blogg...

    ReplyDelete
  3. Jag skulle vilja veta hur man gör vissa ord större i en text och även hur man färsätter dessa eller andra ord.

    /Anna

    ReplyDelete
  4. Anna, det gör du direkt i texten när du skriver. I din inläggredigerare hittar du alternativ för att göra text fetmarkerad, kursiv, färglagd och större. Titta helt enkelt ovanför texten du skriver, där har du alternativen.

    ReplyDelete
  5. Ja det trodde jag också, men det funkar inte för mig. När jag skriver får jag färgen och den storleken jag vill ha men när den publiceras/förhandsgranskas så är det bara svart och den "vanliga" storleken på texten.

    ReplyDelete
  6. Hej! När jag låtit analysera min blogg på olika gratisställen på nätet så har jag fått bakläxa för att min blogg saknar h1. Såvitt jag har förstått är det bästa att ha blogginläggens rubriker som h1 - och inte bloggens namn. Blogginläggens rubriker som h1 blir ju mer SEO-vänligt, eftersom det blir då blir just blogginläggens rubriker som kommer allra först i exvis Googles sökrad.
    Skulle vara tacksam för hjälp med att fixa detta. Eller kanske ett inlägg för alla på FDB.
    Måste också skriva att Fixa Din Blogspot verkligen är toppen. I motsats till det allra mesta på annat håll i genren på nätet alltid klart och redigt skrivet.

    ReplyDelete
  7. Hej Bengt!
    Nackdelen med Blogspots egna mallar är att de faktiskt använder h1 i rubriken, men koden ser inte riktigt likadan ut som den man annars använder till att bygga websidor. Jag tror att det är därför de här testsidorna inte ser vår rubrik som en h1-klass.
    Prova att kryssa i Utökade gränssnittskomponentmallar i din kodmall och sök sen efter h1 (via Ctrl och F) så ser du själv hur det är uppbyggt i just din mall.

    Jag har faktiskt inget riktigt bra, säkert svar på din kommentar, men det här är min gissning. Även jag har funderat över det här!

    ReplyDelete
  8. Nar jag har lyckats centrera rubriken genom att satta in en css men vill andra det sen, hur raderar man eller tar bort den css koden igen?

    ReplyDelete
  9. Super blogg du har!!!
    Det funkar dock inte att sätta din en rubrik i mina inlägg :-(... du har inte nâgot tips?

    Tack tack!

    ReplyDelete
  10. Fia - när jag testar utifrån går det alldeles utmärkt att fixa dina inläggsrubriker. Kolla så att du inte missat något tecken eller lagt koden fel.

    ReplyDelete
  11. Hej. Hur centrerar man bloggrubriken? =)
    MVH / Anna

    ReplyDelete
  12. Hej! Jag skulle gärna vilja ha hjälp med att kunna centrera rubrikerna på blogger om det går? :)

    min blogg: amanda-artmark.blogspot.com

    ReplyDelete
  13. Absolut. Gå till Mall, sedan redigera HTML. Tryck ctrl+F, klistra in h3.post-title, h4 { i sökrutan som kommer upp. Det tar dig till rätt ställe i kodmallen. Några rader under h3.post-title, h4 { hittar du:
    text-align: left;
    ändra left till center.
    Förhandsgransk, kolla så att det funkar som det ska och spara sedan. Klart!

    ReplyDelete
  14. Tyvärr Emelie, det funkar inte :( gjorde som du skrev och sökte på h3.post-title, h4 { men det gick inte söka på den =/ eller så kanske jag gör något fel?

    ReplyDelete
  15. Amanda: prova med detta:

    h3.post-title, .comments h4 {
    margin: .75em 0 0;
    text-align: center;
    }

    Lägg den precis ovanför:

    /* Widgets
    ------------------------------------------ */

    ReplyDelete
  16. Ja, det funkade! Tack så mycket Naset!:D

    ReplyDelete

-------------------------------
Lämna gärna en hälsning! Har du en bloggfråga är du välkommen att ställa den på vårt forum. På så vis kan fler svara alternativt få hjälp om de har samma problem. Tack!
Du hittar en länk till forumet högst upp till vänster här på Fixabloggen.
-------------------------------