DATE. 2010-11-26

Lite Basics

Nu är det säkert många som himlar med ögonen och tycker att det här är helt onödigt. Men många bloggar som jag är inne på kan bli så mycket snyggare bara man har koll på de saker jag kommer förklara nu...
Här är en extremt FUL blogg, men den fyller sitt syfte:




Som man enkelt kan se här så är hela bloggen uppbyggd av boxar. Det är en stor box och i den kommer det massa små. Varje box har ett namn och ett innehåll. Nu ska jag tala om vad varje box heter, vad de innehåller och hur man, lite enkelt, kan ändra på dessa. Den stilmallen jag utgår från är Fashion, ni vet den med randig bakgrund. Denna har ett enkelt kodsystem från början och är väldigt enkel att jobba med.

RÖD
Detta är bakgrunden. I stilmallen heter den "Body" och står högs upp.

GRÅ
Detta är "Wrapper" och det är den som bestämmer hur bred bloggen ska vara. Ett fel som många gör är att inte ändra bredden på denna när de gör det gula och det gröna fältet bredare. Det är då menyn försvinner och lägger sig längst ner på bloggen. Så se alltid till att det gråa fältet är större än det gula och det gröna tillsammans. Detta kan man enkelt se genom att kolla boxarnas "width". Width anges alltid i pixlar, förkortat px.
För att få ett mellanrum mellan menyn (grön) och inläggen (gul) tar man helt enkelt bort koden "background: #färgen;" Då försvinner det gråa och man ser bakgrunden (röd) istället.
Som ni också kan se är det en grå ram runtomkring. Detta beror på att det står "padding: 20px;". Den fråa ramen är alltså 20 pixlar bred. Padding står för mellanrummet som ska vara på insidan av boxen. Alltså avståndet mellan boxens ram och det som finns på insidan. Vill ni inte ha detta mellanrummet så byter ni ut 20 mot 0.

VIT
Detta är "header" och här vill många lägga in sin egna bild. De flesta vet ju redan hur man gör det. Men kom ihåg att anpassa headerns mått till eran bild, det blir alltid snyggast.

GRÖN
Detta är menyn och heter "Side" i stilmallen. I menyn så ser ni att det finns ytterligare boxar. Så om man vill att kategorier, senaste inlägg mm ska vara separata lådor är det bara att ta bort bakgrunden eller skriva "background: transparent;. Vanliga mått på en side bör ligga mellan 190-220 pixlar. Man vill inte ha den för bred men inte för liten heller. Tänk på att om ni lägger till en padding så kommer bredden att öka. Detta gäller alla boxar som har en bestämd "width". Om width är satt till 200 pixlar och padding satt till 10 pixlar betyder detta att det kommer vara 10 pixlars mellanrum mellan menyns kant och dess innehåll. Detta gör att menyn blir 220 pixlar bred.

BLÅ
Detta är rubrikerna i menyn, heter "navheader" i stilmallen. Det brukar ofta bli snyggt om man lägger till en "border", en linje under dessa för att avgränsa.

VIT och ORANGE
Dessa hör lite ihop. Vit heter "nav ul" i stilmallen och orange heter "nav li". Jag brukar skita i att använda "nav ul" och bara jobba i "nav li", annars blir det för mycket småpill. Men det beror helt och hållet på ur man vill att det ska se ut.

GUL
Detta är "content" och det gäller i princip samma sak här som med alla andra boxar. I content så hittar vi ju själva inläggen, men dessa är i sin tur egna boxar också. Content innehåller inte så mycket i sig själv. Men en sak gör den, den bestämmer hur breda din inlägg ska vara. Om du vet att du kommer lägga upp många stora bilder bör du ha en content som är runt 700 px. Då kan du med lätthet lägga upp bilder som är 600 pixlar utan att de hamnar utanför bloggen.

VIT
Rubriken till dina inlägg, heter "Entry Headers". Här brukar man dock inte bestämma hur bred den ska vara. Man använder sig istället av "margin". Som jag sa innan så är padding avståndet på insidan av boxen. Margin är avståndet på utsidan. Alltså, hur långt avstånd ska det vara mellan boxens kant och de boxar som ligger omkring den.

ROSA
"Post's body text"... Samma sak gäller här som med rubriken.

LILA
Posted by' txt... -//-



Detta var en liten miniguide. Inte för att den lärde ut så mycket men det kan vara skönt att veta hur bloggen är uppbyggd. Genom att titta på bilden och boxarna kan man enkelt se vad som är fel, i vilket kodstycke man ska justera felet och man kan lättare navigera bland alla konstiga ord.


Och kom ihåg:
Padding = insidan
Margin = utsidan

Kram på er!
STEPHANIE NILSSON SAYS...

Vad roligt att du är med och tävlar om att bli veckans blogg på min blogg. Jag avgör vem det blir på måndag! Ha det bra. KRAM!

..................................
POSTED. 2010-11-26 -- 22:34:05
Blogg. http://deliciousblondie.blogg.se/
..................................
Manal - Mitt liv som tonåring SAYS...

Hej :D gör du designer till olika bloggar :D

..................................
POSTED. 2010-12-09 -- 19:31:52
Blogg. http://baratawfik.blogg.se/
..................................
JaninaEnglund♥ SAYS...

Kan man ändra storlek på texten i inläggen också? :)

..................................
POSTED. 2011-05-26 -- 20:29:14
Blogg. http://janinaenglund.blogg.se/
..................................
Helen SAYS...

Tack för bra beskrivning!

Men lite saker om jag funderar över. Hur kan så många vara duktiga på bloggdesign? Hur har du lärt dig? Och är photoshop nödvändigt att ha när man håller på med bloggdesign?

Jag vill gärna lära mig men det verkar väldigt krångligt...

/Helen

..................................
POSTED. 2011-11-02 -- 17:23:35
Blogg. http://duochjagivarlden
..................................

Kommentera inlägget här:

Namn:
Kom ihåg mig?

E-postadress: (publiceras ej)

URL/Bloggadress:

Kommentar:

Trackback
RSS 2.0