Google Website Translator

tiistai 4. marraskuuta 2014

Blogin kuvien kulmien pyöristys

Olen aikanani pyöristänyt blogini teksteihin liittämieni kuvien kulmat.Kyllästyin hiljattain pyöristykseen, jonka olin tehnyt ja halusin hieman lieventää sitä. Olin kuitenkin hukannut muistiinpanoni siitä, miten alkuperäisen pyöristyksen tein. Aikani kaiveltuani löysin taas tiedot, joten jaan ne nyt kanssanne.

Blogin kaikkien tekstiin sijoitettujen kuvien kulmien pyöristäminen

Mene blogisi HTML-editoriin. Ainakin bloggerissa se löytyy kohdasta Malli -> Muokkaa HTML-koodia
Bloggerissa saat etsijän päälle seuraavasti:siirrä kursori johonkin HTML-tekstin kohtaan ja paina Ctrl+F. Kirjoita aukeavaan hakuruutuun hakusanaksi .post-body img ja paina Enter. Muissa blogialustoissa .post-body img täytynee etsiä manuaalisesti.



Sulje hakuruutu ja muuta hakasulkujen väliin seuraava teksti:
.post-body img {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
} 
Nykyisissä kuvissani käytän pyöristystä 10px. Aiemmin se oli 25px. Voit valita minkä tahansa luvun väliltä 0-100. Luvulla 100 saat nelikulmaisesta kuvasta pyöreän.

Tallenna malli ja katso blogiasi.

Blogin tekstiin sijoitetun yksittäisen kuvan muuttaminen pyöreäksi


Tekstiin sijoitetun yksittäisen kuvan voi pyöristää koska vain seuraavin keinoin:

Mene jälleen blogin HTML-editoriin. Etsi taas kohta .post-body img. Älä koske siihen, vaan sulje hakuruutu ja lisää .post-body img ohjeiden (kohta voi olla tyhjä lukuunottamatta hakasulkuja) päättävän hakasulun jälkeen kokonaan uusi teksti:
.round img {
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-khtml-border-radius: 100px;
}

Oman sivuni HTML-koodi näyttää tältä:















Tallenna jälleen malli ja siirry muokkaamaan sitä tekstiä, jonka sivulle haluat pyöreän kuvan.

Yleensä, kun olet lisännyt sivulle kuvan, sivun HTML-koodi näyttää suunnilleen seuraavalta:












Loit aiemmin .round img:llä uuden "säännön" HTML-koodisi CSS-osaan. Tässä valitsin nimeksi .round. Nyt sinun täytyy ottaa se käyttöön. Se tapahtuu vaihtamalla class="separator" classiksi, joka määriteltii CSS-koodiin eli class="round". Jos haluat täysin pyöreän kuvan, tarkasta myös, että kuvasi leveys ja korkeus ovat saman mittaiset. Uusi koodini näyttää tältä:












Päivitä tekstisi. Kun avaat blogisi, haluamasi kuvan pitäisi olla pyöreä ja muiden samanlaisia, kuin aikaisemmin. Oma tekstini muutosten jälkeen:

Voit muuttaa kuvasi takaisin peruskuvaksi tekemällä class-muutoksen toisin päin. HTML-editorissa tehtyä uutta .round img:tä ei tarvitse poistaa. Se on jatkossa aina käytettävissä näillä ohjeilla missä tahansa vanhassa tai uudessa tekstissä.

Kristiina

6 kommenttia:

  1. Neuvosi on hyviä, mutta minulle kaikki tekninen on "ulko-Mongoliaa". Ihailen ihmisiä jotka taitavat näitä muokkausjuttuja. Ihailen!!

    VastaaPoista
    Vastaukset
    1. Oh :). Näitä tulee aina sillon tällön tutkittua, kun haluaa vähän jotain uutta ilmettä. Kiitos kuitenkin kehuista. Yritän yleensä tehdä ohjeista aika pikkutarkkoja ja helppoja toteuttaa. Itse etsiessäni löydän yleensä usein ohjeita tyyliin: "Mene sinne sivulle ja napsauta tästä ja saitkin jo lisäyksesi tehtyä." Tuntuu helpolta, mutta sitten, kun tekemisen alkaa niin prosessissa on paljon, paljon muutakin kuin mene ja napsauta.

      Poista
  2. Moi! Tiedätkö miten saisi noihin "suositut tekstit" kuviin pyöreät reunat...?

    VastaaPoista
    Vastaukset
    1. Joo. Löysin sinulle vastauksen. Mene kuten kuvien pyöristyksessä on neuvottu HTML-editoriin + ja avaa hakuruutu (Ctrl+F). Laita hakusanaksi teksti: ]]>. Löydettyäsi tämän kohdan lisää vlittömästi sen yläpuolelle seuraavat rivit:

      .popular-posts .item-thumbnail img {
      webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      }

      Tallenna malli

      Tällä Suosituimpien tekstien kuvien kulmat muuttuvat hieman pyöreämmiksi. Muista, että mitä suurempaa lukua käytät, sitä suurempi on pyöristys (radius 100px=pyöreä)

      Poista
  3. Kiitos. Onnistuin lopulta pitkällisen yrittämisen jälkeen.

    VastaaPoista
    Vastaukset
    1. Yleensä se vaatii yrittämistä, koska ei ole itse tehnyt sitä alkuperäistä koodia.

      Poista

Mielipiteesi on aina tervetullut :)