torstai 26. maaliskuuta 2015

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!

17 kommenttia:

  1. Jättikiitos ohjeesta! nyt tääkin puakapää sai kuvat samankokoisiksi :)

    VastaaPoista
  2. Kiitos vinkistä, tätä olen tosiaan miettinyt. :) Käytin tätä omassa blogissani, eikä se toiminut.
    Olen jo sinun neuvoillasi poistanut kuvista kehykset, joten kun menin kohtaan "Lisää oma CSS" siellä oli jo pätkä tekstiä. Johtuukohan tästä koodista jotenkin ettei toiminut? :D Saako näitä kahta koodia toimimaan samaan aikaan?

    Ja anteeksi huono selittämiseni, olen hieman huono näissä asioissa! :D

    VastaaPoista
    Vastaukset
    1. Hyvä selitys oli :) Jännä juttu, minulla toimi molemmat koodit samaan aikaan. Tuossa alemmassa kommentissa on lisää koodia, jota voit kokeilla :D

      Poista
  3. Tästä oli varmasti monelle hyötyä! Itsehän olen saanut tuon jo aiemmin kohdalleen, mutta jos tätä perfektionistista tyylittelyä saa nyt katsella useammasta blogista niin kiitos! :D

    Haluaisin vain lisätä yhden jutun, joka minulla esti kuvien ja tekstin tasaamisen, enkä meinannut tähän löytää ratkaisua sitten mistään. Nimittäin kuvien kehykset. Ei, ne näkyvät kehykset poistin jo aikoja sitten, mutta näkymättömät reunat jäivät vielä kummittelemään, ne jotka siis näkyvät vain maalaamalla (ja siirtämällä sitä kuvien kohtaa pari pikseliä oikealle). Mun oli ihan pakko jakaa tämä aiheeseen kuuluva vinkki, että mahdollisimmat vähät joutuisivat painimaan saman ongelman kanssa! Se maaginen koodi taisi olla tämä:

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: 0px;
    background: #ffffff;
    border: 0px solid #eeeeee;
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .0);
    }

    VastaaPoista
  4. Moikka! Ja tuhannesti kiitoksia ohjeistasi, olen käyttänyt niitä paljon ja jakanut linkkejä tänne vinkkeihisi myös blogissani.. Osaisitko neuvoa näissä "related posts" -asioissa lisää: Asensin Linkwithin'n, koska nRelate loppuu. Tiedätkö, onko jotain nRelatea vastaavaa, eli parempaa kuin Linkwithin? Ja sitten toinen kysymys, saako bloggerin mobiiliversioon jotenkin koodattua nuo "related posts", joko Linkwithin:llä tai sitten jollain uudella? Kiitos, jos olet näihin ehtinyt perehtyä ja voit näitä avata! :) -Katri

    VastaaPoista
    Vastaukset
    1. En ole tutustunut hetkeen näihin related posts -vempeleisiin. Omanikin poistin nRelaten loputtua (tai taisi se olla jo hyvissä ajoin ennen sitä). Tässä olisi ehkä uuden postauksen paikka!

      Poista
    2. Kiitos kovasti jos jaksat paneutua!:)

      Poista
  5. Kiitos tästä :) Pitää kokeilla tätä joku päivä!

    VastaaPoista
  6. Kiitos! Tätä juuri tarvitsin. Bloggerin kuvakoko "Suuri" oli aika pieni ja "Erittäin suuri" taasen teki sen, että kuvat olivat osin oikean sivupalkin päällä. Mutta tämä taisi ratkaista asian, hienoa ja iso kiitos. Osa kuvista asettuu nyt oikein nätisti, osan vasen reuna jostain syystä himpun verran oikeammalta.

    VastaaPoista
    Vastaukset
    1. Kiva kuulla, että ehkä ratkaisi probleeman.

      Poista
  7. Hei, kiitos kirjoituksistasi. Ohjeistasi on ollut ihan valtava apu omaa blogia rakentaessa! Tätäkin ongelmaa olin jo ehtinyt pohtia ties kuinka kauan ja koodi toimikin muutoin oikein hienosti, mutta muutti Pin it hover -buttonin sitten myös saman levyiseksi. Pitänee miettiä jos tuosta Pin it nappulasta luopuisi kokonaan :)

    VastaaPoista
    Vastaukset
    1. Ah, kiva ongelma! Tämä onkin tällainen mahdollisimman yksinkertainen koodi. Voi olla, että tuolle löytyy jokin oma pikku lisäyksensä.

      Poista
  8. Luen blogiasi säännöllisesti ja poimin hyviä neuvoja käytäntöön. Kenties nyt olisi kuitenkin jo aika kiittää, eikä vain vierailla vastausten äärellä! ;) Vinkeistäsi on ollut hurjan iso apu miettiessä parannuksia omaan blogiin. Kuva "ongelman" ratkaisu on ollut pidempään mietinnässä myös täällä. Yritin jo etsiä siihen omin neuvoin apua, tuloksetta tosin. Tämä tulikin kuin tilauksesta. Kiitos, olet oikea aarre! :)

    VastaaPoista