5 superyksinkertaista CSS-koodia, joiden avulla voit muokata WordPress-sivustoasi
CSS on vaikeaa!
Kuulostaa siltä, että voisit sanoa jotain? Et olisi yksin. CSS (eli Cascading Style Sheet) on koodauskieli, joka voi olla kova pikkuinen vauva.
Mutta sanomalla, että CSS on kova, on hieman kovaa. Kuten mikä tahansa kieli, CSS voi olla aluksi hieman hankala ymmärtää, mutta kun ymmärrät perusteet, asiat alkavat loksahtaa paikoilleen.
Paras tapa oppia CSS on ymmärtää, mikä se on ja miten se toimii. Sitten voit opetella joitakin peruskoodinpätkiä, jotka auttavat sinua hahmottamaan tuota alkuymmärrystä hieman paremmin, ja pääset suunnittelemaan hetkessä!
Meidän postauksessamme tehdään juuri näin.
Mikä on CSS?
Totta kai, CSS tarkoittaa Cascading Style Sheet, mutta kaikki kertovat sen sinulle. Se ei kuitenkaan oikeastaan auta, eihän?
Ei ole mitään helpompaa tapaa ymmärtää, mitä se on.
Ajattele HTML:ää talon runkona ja CSS:ää ulkopuolen maalauksena. Kun maalaat talon verhoilun tai värjäät etukannen, muuttaako se itse talon runkoa?
Ei, ei muuta. Sen sijaan se vain muuttaa asioiden ulkonäköä. Talon perusta ja runko pysyvät samoina.
Sitä CSS on.
Se muuttaa sivustosi ulkonäköä, mutta se ei häiritse sen perustaa tai ydintä.
Jokaiseen taloon on maalattu. Jokainen WordPress-teema käyttää CSS:ää.
Ne toimivat yhdessä luodakseen verkkosivuston, ja voit käyttää joitakin melko yksinkertaisia CSS-koodinpätkiä muuttaaksesi tuota niin sanottua ”maalia” teemassasi.
Voit itse asiassa yllättyä, kuinka helppoa se on.
Yksinkertainen CSS-muokkaus yksi: Fonttityypin muokkaaminen ja nopea oppitunti koodin kirjoittamisesta
Kun käytät Genesis Frameworkin kaltaista teemaa, jonkin niinkin yksinkertaisen asian kuin sivustollasi käytettävän fontin muuttaminen vaatii jonkin verran CSS:ää. Mutta älä huoli. Se ei todellakaan ole kovin vaikeaa.
Tehdäksesi CSS-muutoksia teemaan, tarvitset ensin mukautetun CSS-alueen, jossa voit tehdä nämä muutokset. Älä muuta teemaan sisäänrakennettua tyylitaulukkoa.
Käytä sen sijaan lisäosaa, kuten Jetpackiin ladattavaa Custom CSS -vaihtoehtoa. Kaikki CSS-muutokset, jotka teet siellä, ohittavat teemasi ennalta määritellyn CSS:n.
Ennen kuin voit muokata fonttia, sinun on selvitettävä, mitä aluetta haluat muokata.
On 7 pääaluetta, joilla voit muokata fonttia:
- Kaikki 6 otsikkofonttityyppiä
- Vartalofontti
Tunnisteen merkintätapa näissä on yksinkertainen. Jos esimerkiksi haluat muokata sivustollasi näkyvää otsikon 1 fonttia, käytät tagia h1. Jos haluaisit muuttaa Heading 2:n fonttia, tagi olisi, h2 ja niin edelleen.
Tässä on esimerkki CSS-koodin kirjoittamisesta Heading 1:n fontin muuttamiseksi:
h1 { font-family: 'Georgia'; }
Nyt on totta, että voisitte kokeilla kopioida ja liittää tuon, mutta haluan teidän ymmärtävän paremmin, miten tämä oikeasti toimii.
Ensimmäinen kirjoitettu osa (h1) on aihe, jota haluatte muuttaa. Tämä symboli ({ ) avaa koodirivisi ja tämä ( } ) sulkee sen.
Okei, okei.
Tämä kuulostaa varmaan vieläkin hämmentävältä, mutta CSS:ää opetellessani opettelin itselleni kätevän tempun, jolla muistan, miten CSS:ää kirjoitetaan oikein. Esimerkiksi näin:
h1 { avaa vaatekaappinsa oven
Etsimässä jotain, johon vaihtaa vaatteet: ’Hän löytää haluamansa’;
Ja sitten hän sulkee oven}
Takaisin aiheeseen; tässä on toinen esimerkki siitä, miten voit tehdä muutoksia fonttiin.
body { font-family: 'Arial'; }
Muuttamalla elementin h1:stä body:ksi, olen nyt kertonut Stylesheetille, että haluan vaihtaa body-fontin, joka näkyy viesteissä ja sivuilla, Arial-fonttiin.
Sehän on aika yksinkertaista?
Jos teemassasi on Google Font -toiminto, voit käyttää sivustollasi myös sieltä saatavia fontteja.
Yksinkertainen CSS-muokkaus kaksi: Muokkaa fontin väriä
Tämä pieni CSS-temppu on kiva tapa vaihtaa valikon fontin tai body-fontin väriä. Kuten edellä kirjoitetuissa koodinpätkissä, tarvitaan vain pari lyhyttä riviä koodia, jotta asiat todella muuttuvat.
Tulkoon, että haluan vaihtaa otsikko 2:n fontin värin joksikin muuksi. Voin tehdä sen noudattamalla samanlaista hahmotelmaa, jonka teimme aiemmin (muistatko tarinan?), mutta pääkoodirivejä on muutettu hieman. Näin:
h2 { color: #4f4f4f; }
Huomaa, että aiheeksi on määritelty h2 ja meillä on edelleen avaavat ja sulkevat tagit ({}), mutta tapa, jolla koodi on kirjoitettu, on kuitenkin hieman erilainen kuin edellä, kun kirjoitimme koodia fontin vaihtamiseksi.
Toisin kuin fontti, joka piti sulkea sulkeilla, (’ ’) heksaväri-elementti ei tarvitse sitä.
Nyt sinun ei tarvitse kirjoittaa koodia samalle aiheelle uudestaan ja uudestaan muuttaaksesi sen tiettyjä osia. Voit yhdistellä saman aiheen koodia, jotta asioita on helpompi löytää ja muuttaa tulevaisuudessa. Voit esimerkiksi yhdistää Fontin ja Fontin värin samalle koodiriville.
body { font-family: 'Roboto'; color: #4f4f4f; }
Näetkö, miten tein sen?
Minulla on kaksi koodiriviä tuon yhden aiherivin sisällä. Kun sinun täytyy tehdä useita muutoksia yhteen aiheeseen, koodin kirjoittaminen näin säästää aikaa. Varmista vain, että suljet nämä yksittäiset koodirivit puolipisteellä (;) ennen kuin siirryt seuraavalle riville.
huomautus: jotta muistat tehdä näin, ajattele puolipistettä pisteenä lauseen lopussa. Et koskaan päätä lausetta ilman pistettä. Älä koskaan päätä CSS-koodiriviä ilman puolipistettä.
Simple CSS Edit Three: Taustaväri ja selaimen työkalu, josta et edes tiennyt, että sinulla on
Sivusi tiettyjen asioiden värin muokkaaminen on toinen superhelppo CSS-temppu. Tarvitset vain elementin tai aiheen, jota haluat muuttaa.
Näppärä työkalu, jota monet suunnittelijat käyttävät – minä mukaan lukien – on Google-selaimen Inspect Element -työkalu. Tämäkin on mahtava, kun yrität löytää oikean aiheen, jota haluat muuttaa ja määritellä.
Sen löytämiseksi voit yksinkertaisesti tuplaklikata hiirelläsi vetääksesi esiin vaihtoehdot, kuten näet alla. Valitse Tarkasta elementti, ja voit nyt etsiä verkkosivujesi muokattavia elementtejä.
Näetkö tämän kuvan tässä?
Minulla on yksi valikkokohde korostettu eri värillä kuin muu valikkoni seisomaan. Tätä varten käytin Inspect Element Tool -työkalua saadakseni selville oikean nimen, jota voin muokata.
Nyt kun selaan valikkokohteiden yli, varsinainen koodinimi, joka sille on annettu, näkyy korostuksissani. Se, jota muutan, oli nimeltään: #menu-item-473 (Näet, että se on sen nimi keltaisessa laatikossa. Sen nimi on korostettu sinisellä.)
Se on sen kohteen nimi, jonka halusin muuttaa. Vaihtaakseni tuon valikkokohteen taustaväriä aloitan rivin sen nimellä ja ilmoitan, että haluan vaihtaa taustan, näin:
#menu-item-473 { background-color: #D65050; }
Tälleen aloitan kertomalla Stylesheetille aiheen, jonka haluan vaihtaa (#valikkokohde-473), ja sitten kerron sille, mitä muutetaan (taustaväri) ja mihin se muutetaan (#D65050).
Mitä ikinä päätätkin muuttaa taustavärin, sillä on eri nimi kuin tällä, mutta onneksi selaimesi Inspect Element -vaihtoehto tekee sen löytämisestä paljon helpompaa.
Toinen mahtava juttu Googlen Inspect Element Tool -työkalussa on se, että voit muokata asioita reaaliajassa saadaksesi asiat juuri oikeiksi, ja sitten voit kopioida ja liittää kaiken muokkaustyösi sieltä CSS Custom Style Sheet -työkaluun. Aikaa säästyy!
Simple CSS Edit Four: Float
Joskus on mukavaa pystyä tekemään jotain hieman erilaista ensisijaisen valikon tai valmiiksi määritettyjen widgettien kanssa sivustollasi. Ehkä haluaisit ottaa yhden valikkokohdan ja sijoittaa sen kauemmas oikealle kuin muut kohdat, kuten minä tein yllä kuvatun valikon kanssa. (Kuvassa myös alla täydellä leveydellä.)
Tehdäksesi tämän voit käyttää Float-koodinpätkää juuri tähän tarkoitukseen. Kuten yllä olevissa vaiheissa, sinun tulee käyttää Inspect Element Tool -työkalua etsiessäsi sen aiheen nimeä, jonka haluat muuttaa. Tässä kuvassa oleva on sama kuin edellä mainittu. (#menu-item-473)
Voidakseni saada tämän kohteen siirtymään, mutta näyttämään silti hyvältä mobiilinäytöllä, kirjoitin tämän koodin:
#menu-item-473 { background-color: #D65050; float: right; }
Se oli oikeasti niin helppoa. Nyt minulla on valikkokohta, joka erottuu, mitä tarvitsinkin. Voit soveltaa tätä myös muihin asioihin kuin valikkokohteisiisi.
Jos sinulla on esimerkiksi widget, jonka haluat sijoittaa uudelleen, voit käyttää koodinpätkää float: right; tai float: left; muuttaaksesi widgetin näyttökohtaa.
Se vaatii jonkin verran aikaa ja säätämistä, mutta CSS:n käyttö helpottuu, mitä pidempään sen kanssa pelleilee.
Yksinkertainen CSS Muokkaa viittä: Tekstin kohdistaminen
Tekstin kohdistamisen voi toki tehdä postauksessa. Mutta entä widgetin otsikot tai jotain vastaavaa?
Voit käyttää tätä CSS-koodia kohdistaaksesi helposti widgetin tekstin otsikon.
Käytän verkkosivuillani Genesis Frameworkia, ja tämä on koodi, jonka se tarvitsi kohdistaakseen widgettieni otsikot:
.footer-widgets .widget-title { text-align: center; }
Teemassasi esiintyvä elementti- tai aiheen nimi voi poiketa hieman tästä, mutta ymmärrät kyllä idean.
Tämä pieni koodi pitää tekstini footer-widgetieni otsikoissa keskitettynä, ja koska julistan .footer-widgetit yhdessä .widget-titlen kanssa, vain footer-otsikot keskitetään.
Se on siis siinä! 5 super yksinkertaista tapaa, joilla voit muokata teemaa CSS:n avulla! CSS on kuin mikä tahansa kieli. Se on aluksi vaikeaa, mutta kun pääset alun ymmärtämisen vaikeuden yli, se on lastenleikkiä.