Blogin ulkoasun muokkaaminen: kuvat ja teksti saman levyisiksi

Usein suositellaan, että blogin tekstin ja kuvien tulisi olla yhtä leveitä. Ja tottahan se on, että silloin blogi näyttää tyylikkään virtaviivaiselta eikä tekstiä keskeytä mikään kapea tuhru, joka esittää kuvaa. Ehkäpä jo arvasit, että tänään teemme kuvista ja tekstistä yhtä leveitä (mutta ei pitkiä, onneksi).

Kuvien kanssa voi kikkailla paljon mutta tämä ohje on todella simppeli ja vaatii vain yhden koodinpätkän lisäämisen blogiisi. Kuvien laatu saattaa joissain tapauksissa ottaa nokkiinsa. Niin voi tapahtua, jos kuva on ladattu blogiin suht pienenä kokona ja nyt koodilla menet sitä suurentamaan. Muista siis ladata kuvasi blogiin tarpeeksi isoina mutta ei kuitenkaan niin raskaina, että niiden lataamisen menee ikuisuus. Esimerkiksi pystykuvien on oltava tarpeeksi suuria, jotta ne voivat levittäytyä näin laajalle ilman suttua.

Niin kuin aina, tämä ohje on Bloggerin ihan peruspohjaan ja se ei välttämättä toimi prikulleen oikein, jos blogipohjaasi on tehty muutoksia. Ja muistahan ottaa se varmuuskopio!

Kuvat ja teksti saman levyisiksi

1. Mene Malli -> Muokkaa -> Lisäasetukset -> Lisää CSS ja lykkää omalle rivilleen seuraavan näköinen koodi:

.post-body img { width:530px; height:auto;} 

Muokkaa luku 530 blogisi leveyteen sopivaksi.

2. Kun näyttää hyvältä, tallenna! Olet valmis!

Mutta...

Jos kuva jää kuitenkin vasemmasta reunasta vähän repsottamaan eli se ei asetu nätisti tekstin kanssa samaan linjaan, muokkaa yllä olevaa koodia alla olevalla tavalla:

.post-body img { width:530px; height:auto; margin-left: -5px;} 

Muuta luku -5 sopivaksi esikatselun avulla.


Tämä ohje on ollut viime aikoina useamman lukijan huulilla, joten toivottavasti koit sen ajankohtaiseksi!