CSS-tyyleillä kuvista pyöreitä WordPress.orgissa

artikkelikuva-css

Toukokuinen alkukesän auringonlasku naulitsi taas minut rannan läheisyyteen puhelimeni kanssa ja yritin saada upeaa näkymää taltioitua. Esittelen otoksia tässä postauksessa sekä miten saan CSS-tyyleillä kuvista pyöreitä WordPress.orgissa. Mainitsin Peruslisäosat WordPress.orgiin -artikkkelissani, kuinka etsin keinoa muokata kuvistani pyöreitä WordPressissä, enkä ole löytänyt järkevää lisäosaa siihen. Yksi keino on tehdä CSS-tyylejä, joita lisää suoraan kuviin tekstieditorissa. Katsotaan kuinka työlästä se on käytännössä ja leikitään vähän CSS-ominaisuuksilla.

WordPress-sivuston pääteemaan CSS-tyylejä tai yleensäkään koodia ei kannata muuttaa suoraan, vaan muutokset tulee tehdä lapsiteemaan. Mikäli kajoaa pääteeman tyyleihin, voi sitä seurata, joko sivuston rikkoutuminen tai tehdyt muutokset katoavat teeman päivityksen yhteydessä. Olen syyllistynyt muokkaamana oma teemaa suoraan ja siitä on seurannut ongelmia, muun muassa teeman vaihtamisen yhteydessä. Lapsiteeman tekeminen on aika suoraviivaista ja ohjeet siihen löytyvät blogiartikkelistani Lapsiteeman luonti WordPress.orgiin.

CSS-tyylin lisääminen

Esittelen tässä yksinkertaisen keinon testata CSS-tyylejä postaukseen liitettyihin kuviin. Lyhykäisyydessään CSS-tyylin luominen ja lisääminen artikkeliin tapahtuu seuraavasti:

  1. Luo lapsiteema ja ota se käyttöön
  2. Valitse Ulkoasu -> Muokkain WordPressin käyttöliittymästä
  3. Valitse muokattavaksi teemaksi juuri luotu lapsiteema
  4. Valitse style.css -tiedosto
  5. Lisää seuraava CSS-määritys (värillisellä pohjalla) style.css tiedoston loppuun ja paina Päivitä tiedosto
    • .round-image {
      background-color: #F5F5F5;
      border: 1px solid #DDDDDD;
      border-radius: 50% 50% 50% 50%;
      padding: 4px;
      }
  6. Luo uusi artikkeli ja lisää siihen kuva
  7. Valitse Tekstieditori artikkeli-ikkunan oikeasta yläkulmasta ja etsi kuvaan liittyvä koodi
  8. Lisää round-image CSS-valitsin img class määreen jälkeen lainausmerkkien sisään, ks. esimerkki alla sekä kuvasta
    • img class = “xxx-xxx  xx-x round-image
  9. Tallenna luonnos ja esikatsele, huom. kuvan pitäisi olla soikea vaaleilla reunoilla, mikäli näin ei ole ja kuvasi näyttää alkuperäiseltä; tyhjennä selaimesi välimuisti ja klikkaa esikatselua uudestaan (välimuistiin saattaa olla jäänyt alkuperäinen kuva). Artikkeli tekstieditori round image

CSS-tyyleillä kuvista pyöreitä

Tarkoitukseni ei ole opettamalla opettaa CSS:n käyttöä vaan näyttää vähän suuntaa, miten sillä voi itse leikitellä ja millaisia pyöreitä/soikeita kuvia sen avulla saa luotua. Tarkempaa tietoa löytyy esimerkiksi w3schools.comin CSS-oppaasta tai CSS Basics -sivustolta. Olen lisännyt kaikki alla olevat CSS-määritykset lapsiteemaan, kuten edellisessä kappalessa esitin. Jokaisen kuvan vieressä on kyseiseen kuvaan liitetty CSS-tyyli, jonka voi sellaisenaan kopioida omaan lapsiteemaansa halutessaan. Sitten vain testailemaan!

 

Auringonlasku

 

Auringonlasku siintää
Auringonlasku siintää

 

.round-image {
background-color: #F5F5F5;
border: 1px solid #DDDDDD;
border-radius: 50% 50% 50% 50%;
padding: 4px;
}

 

 

Laiturin kajo
Laiturin kajo

 

 .round-image-black {
background-color: #F5F5F5;
border: 4px solid #000000;
border-radius: 50% 50% 50% 50%;
padding: 4px;
}

 

Puu

 

Rannan puu
Rannan puu

 

.round-image-dotted {
background-color: #F5F5F5;
border: 7px dotted #000000;
border-radius: 50% 50% 50% 50%;
padding: 4px;
}

 

 

 

Toukoillan puu
Toukoillan puu

 

 

.round-image-groove {
background-color: #800000;
border: 5px groove #696969;
border-radius: 50% 50% 50% 50%;
padding: 4px;
}

 

 

 

Siluetti

 

Siluetti huvimajasta - liila
Siluetti huvimajasta – liila

 

.round-image-bordrad {
background-color: #F5F5F5;
border: 5px solid #D2B48C;
border-radius: 25% 25% 25% 25%;
padding: 4px;
}

 

 

Siluetti huvimajasta - oranssi
Siluetti huvimajasta – oranssi


 

.round-image-bordbottom {
background-color: #FF4500;
border-bottom: 6px solid #FF4500;
border-radius: 50% 50% 50% 50%;
padding: 4px;
}

 

 

 

Rantaa

 

Ranta paisteessa
Ranta paisteessa

 

 

.round-image-noborder {
background-color: #FFFAFA;
border-radius: 50% 50% 50% 50%;
padding: 4px;
}

 

 

 

Loppu löpinät

Kuvien testaamista voisi jatkaa loputtomiin, mutta on aika lopettaa tähän. Toivon, että saitte noista muutamia ideoita omiin CSS-leikkeihinne!

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *