Lätta upp med bilder

Börja blogga 101Bloggar har en tendens att bli ett ganska textfokuserar medium. Bloggpost på bloggpost matar ut mer eller mindre väl valda ord. Problemet är att det kan kännas ganska mycket på en gång, läsaren blir trött av att bara se text på text på mer text. Det är ditt jobb, som bloggare, att motverka detta, och ett av de bästa sätten är att använda bilder.

Bilder används helt enkelt för att ge texten lite mer grafisk framtoning, och för att ge läsaren lite andrum. Det enklaste sättet att använda bilder på är att helt enkelt bryta av textflödet med en (mer eller mindre) relevant bild, och sedan fortsätter texten.

Så här:

Små ninjor som kollar på moln

Det kan dock upplevas som lite påträngande att använda bilder på det här sättet, speciellt om själva texten egentligen inte tjänar på bilder, det finns inget att illustrera eller förklara. Man kan få känslan av att bilden bara slängdes in bara för att man skulle ha en bild, och det kan i viss mån kanske stämma. Skall du bryta textflödet så markant som ovan så är det bäst om bilden verkligen tillför något till texten, en förklaring eller en bild från filmen du skriver om, eller något liknande.

Flytande bilder

SolrosEn annan variant är att använda lite mindre bilder och låta dem flyta till höger eller vänster, med texten bruten runt dem. Detta kan lätt göras i antingen HTML-kod eller med CSS, eller med bloggplattformen självt. De flesta bloggplattformar låter dig välja var du vill att bilden skall visas, och sedan ser din bloggs tema/mall till att bilden hamnar snyggt i relation till texten. Som bilden här till höger, exempelvis.

Det är generellt lättare att låta en bild flyta till höger än till vänster. Vi är helt enkelt med vana vid raka vänstermarginaler, än högermarginaler, och en bild som flyter till vänster bryter av marginalen. Det kan förstås göras snyggt, men man får ofta pilla lite mer med bildstorlek och liknande.

Bilder som flyter till höger eller vänster med texten bruten omkring sig bör inte vara alltför stora, helst inte bredare än halva den totala bredden på textkolumnen. Så om textkolumnen är 500 pixlar bred så bör din bild inte vara bredare än 250 pixlar, och troligen blir det snyggast runt 200 pixlar eller rentav lite mindre i bredd. På samma sätt så bör bilder som bryter texten helt vara ganska breda, gärna lika breda som textkolumnen, men det går bra med smalare bilder också, i synnerhet om du centrerar dem.

Fixa ditt tema

Kom ihåg syftet med bilderna: de skall lätta upp din text. Se därför till att de kan göra det, genom att ha en design/ett bloggtema som lägger till ordentligt med utrymme mellan bilden och texten. Vill du hacka din CSS själv så föreslår jag minst 10 pixlar i margin, helst 15 eller rentav 20 om din design tillåter det. På den här sajten har vi följande kod för bilder som flyter till höger samt vänster:

.alignleft, img.left { float:left; margin: 0 15px 15px 0; }
.alignright, img.right { float:right; margin: 0 0 15px 15px; text-align:right; }

Sno den om du vill, placeras i ditt bloggtemas CSS-fil (style.css i temats mapp om du kör WordPress). Se dock till att undersöka om temat redan har något liknande, då bör du ersätta det med kodsnutten ovan. Gör en säkerhetskopia ifall du inte skulle bli nöjd, så att du lätt kan återställa temat.