maanantai 4. elokuuta 2014

Blogin kuvakoon helppo muutos

Olette saattaneet huomata, että viime viikolla suurensin blogini kuvat niin, että ne ovat lähes saman levyisiä kuin teksti. En käynyt sivuja läpi klikkailemassa niitä isommiksi, vaan yksi koodinpätkä sai sen aikaan. Huomaa, että koodin vaikutus ei näy ruudussa, jossa kirjoitat tekstiä, vaan vain esikatselussa ja julkaistuilla sivuilla.

Koodi tehdään näin:

Avaa Bloggerin hallintapaneeli ja hae sieltä  kohta, jonne voi lisätä CSS-koodia.

Seuraavaksi:


Siitä avautuu tämä, joka sinulla on tyhjä, jos et aiemmin ole lisännyt omaa CSS-koodia:


Kuvakoon koodi kirjoitetaan avautuvaan ruutuun. Huom! minulla on esimerkissä muutakin koodia, joita olen lisännyt aiemmin, älä välitä niistä. Kopioi tai kirjoita siis ruutuun tämä koodi:

.post-body img {
width: 555px;
height: auto;
text-align: left;
}

Kaikki välimerkit täsmälleen :)

Tuo määrittää jokaisen aiemman ja tulevan sisältöalueen kuvan kooksi automaattisesti 555 pikseliä. Tuota lukua voit muutella miten vain, eli testata, mikä on juuri sinun blogisi sopiva kuvien leveys. Korkeus tulee automaattisesti.


Klikkaa oikeasta yläkulmasta "Käytä blogissa". Kun katsot blogiasi, riippuu selaimesta, kuinka helposti saat uuden kuvakoon näkyviin. Itse teen ulkonäkömuutoksia aina Firefox-selaimella, koska siinä saa välimuistin tyhjennettyä päivittämällä sivua useaan kertaan näppäinyhdistelmällä Ctrl ja F5 (PC:llä).

Kun teet uusia postauksia, lisää kuvat kuten aiemmin, koska saatat jossain vaiheessa haluta palata siihen.

6 kommenttia :

  1. Kiitos tästä vinkistä. Olen miettinyt tämän toteuttamista siitä asti, kun luin tämän vinkin ja tänään lopulta toteutin sen. Mutta - tiedätkö onko mitään keinoa kiertää tätä jossakin yksittäisessä postauksessa?

    VastaaPoista
    Vastaukset
    1. On kyllä, mutta se pitää tehdä sen yksittäisen postauksen koodin puolella. Minä olen tehnyt näin Videot-sivulla http://www.ristiin-rastiin.fi/p/videot.html, eli siellä on parin videon kohdalla pieni kuva. Olen kirjoittanut sen sivun html-puolelle itse kuvan koodiin tämän: style="height: 113px; width: 120px;"

      Poista
  2. Kiitos tästä! Täytyy ehdottomasti kokeilla. Itse nimittäin suuremman joka kuvan yksitellen, tää helpottais kyllä kummasti! :)

    VastaaPoista
    Vastaukset
    1. On tosiaan kätevä. Olen useaan otteeseen muuttanut kuvakokoa esim. 10 pikselillä, se olisi tosi hidasta tehdä erikseen joka kuvaan.

      Poista

Related Posts Plugin for WordPress, Blogger