22. kesäkuuta 2019

Blogin koodausta osa I: Aloitus ja blogin perussäädöt

Tein itselleni toisen testiblogin (Kahvimörön Koodiluola) tätä blogisarjaa varten. Pääset katsomaan blogia livenä täällä. Otathan myös huomioon, että julkaisen sarjaa palan kerrallaan. Suosittelen myös sinua tekemään itsellesi testiblogin.

Kyselin Facebookissa parissakin ryhmässä sitä, minkälaisia koodausvinkkejä haluaisitte minun jakavan blogissani! Vastauksia tuli muutamia ja yhdessä viestissä toivottiin aivan perusasioita, joten otan ne ensimmäisenä käsittelyyn. Keskitän tämän blogisarjan kuitenkin nimenomaan blogin koodaamiseen, joten jos haluat oppia nettisivujen tekoa, suosittelen W3Schools.net sivustoa. Sivusto on englanniksi!

Mikäli sinulla ei ole blogissasi vielä lainkaan sisältöä, suosittelen tekemään sinne yhden pidemmän julkaisun, jossa on ainakin seuraavat asiat:
• 2-4 kappaletta tekstiä (Lorem Ipsum voi auttaa tässä)
• kuva (itse käytän kuvan asetuksissa Alkuperäinen koko ja otan linkin pois klikkaamalla julkaisun teon yläreunassa olevaa Linkki tekstiä, mutta jätetään toistaiseksi kuvan asetukset vielä tekemättä) ja kuvateksti
• Johonkin kohtaan tekstiä laitettuna linkki, lihavointi, kursivointi, alleviivaus ja yliviivaus
• Tageja (eli tunnisteita) 1-X määrä (blogia muokatessa mitä suurempi määrä, sen parempi)

Lähdetään liikkeelle blogin yleisilmeestä, jota on melko helppo mukauttaa jo Bloggerin omillakin työkaluilla. Siirry siis Bloggerin paneelissa kohtaan Ulkoasu(1.) ja sen jälkeen klikkaa linkkiä teeman suunnittelutyökalu(2.) 


Olen itse aina käyttänyt Bloggerissa ensimmäistä teemavaihtoehtoa, jonka se antaa. Eli valitaan Teemat-osiossa Yksinkertainen ja ensimmäinen vaihtoehto sen alapuolelta. Älä välitä tässä kohtaa blogin väreistä tai asetteluista, ne kaikki muutetaan vielä.

Taustaväri-osiossa pystyt valitsemaan joko valmiin kuvan tai lisäämään omasi sivun taustaksi. Tässä blogissa olen käyttänyt pelkästään taustaväriä, mutta laitetaanpa tällä kertaa toistuva kuva taustaksi ja käytetään apuna tätä sivustoa. Valitsen itse taustakuvan nimeltä Fancy Cushion Pattern.


Tämän jälkeen klikkaa Ei mitään -tekstiä(1.), joka on kellertävällä pohjalla ja valitse valikosta Lataa kuva(2.) ja Selaa. Kun kuva on latautunut, valitse Valmis. Koska kuvassani ei ole mitään erityistä kuvaa, jonka haluaisin alkavan tietystä kohtaa, annan tasauksen olla siinä, missä se on nyt. Tämä kohta siis määrittää sen, missä kohtaa sivua taustakuva on. Valikko, jossa lukee Laatta, määrittää taustakuvan toistumissuunnat. Annan sen myös olla. Valikkojen alla on valintalaatikko. Valinnan ollessa päällä, taustakuva liikkuu samalla, kun sivua rullailee ylös ja alas. Koska haluan kuvan pysyvän paikoillaan, otan valinnan pois.

En ymmärrä, miksi Säädä leveyksiä kohta on seuraavana, koska kun teet muutoksia kohtaan Ulkoasu, joudut säätämään leveydet uudestaan. Hypätään siis suoraan kohtaan Ulkoasu. Tässä osiossa pystyt määrittämään blogin asettelun, eli minne sijoitat tekstin, minne widgetit (ts. gadgetit). Minusta nämä oletusasetukset ovat hyvät ja toimivat, mutta voit halutessasi muuttaa niitä (esim. laittamalla sivupalkin oikean sijaan vasemmalle). Itse pidän nämä asetukset ja huomautan, että kun myöhemmin alamme säätämään sivupalkkia ja sen sisällä olevia widgetejä, koodauksen kannalta on tärkeää, onko sivupalkki vasemmalla vai oikealla. Mutta voit valita tässä kohtaa kumman tahansa, kerron myöhemmin, miten sivupalkin sijainti huomioidaan.


Tämän jälkeen siirrymme Säädä leveyksiä kohtaan, jossa määritämme blogin leveyden. Käytän samoja asetuksia kuin tässäkin blogissa, eli koko blogin leveys 1100px ja oikea (tai vasen) sivupalkki 300px. Tämän jälkeen pääsemme käsittelemään Lisäasetuksia, jotka käymme suhteellisen nopeasti läpi tämän ensimmäisen osuuden loppuun. Parhaiten näistä oppii yksinkertaisesti kokeilemalla rohkeasti.

Sivun teksti mitä fonttia blogissa pääosin käytetään, minkä kokoista ja väristä se on. Omat valintani: Georgia, 13px ja #111111
Taustat määrittävät blogin eri osuuksian taustavärit. Omat valintani järjestyksessä vasemmalta oikealle: #111111 (tällä ei tosin ole väliä taustakuvan vuoksi), #f5f5f5 ja läpinäkyvä
Linkit kohdassa pääset määrittämään sitten linkkien värit. Itse käytän linkin normaalina värinä aina samaa kuin käytyä väriä, koska en hirveämmin välitä siitä että linkin väri vaihtuu jos olet sitä kerran klikannut. Osoitusväri kertoo minkä väriseksi linkki tulee, kun viet hiiren sen ylle. Omat valintani: #cc1177, #cc1177 ja #999999
Blogin otsikko käsittelee nimensä mukaisesti blogin otsikkoa ja vaihtoehtoja löytyy samaan tapaan kuin ensimmäisessä kohdassa. Omat valintani: Dancing Script, I-klikattuna päälle (kursivointi), 70px ja #333333
Blogin kuvaus jos olet lisännyt blogillesi kuvauksen, pystyt määrittelemään sen näkyvyyden tässä. Itselläni tätä ei ole käytössä

Skipataan tässä kohtaa osiot Välilehtien teksti ja Välilehtien tausta (nämä tulevat käyttöön, jos lisäät blogillesi erikseen sivuja).

Tekstin otsikko kohdassa voit määrittää julkaisujesi otsikon. Huom! Otsikon väri blogin etusivulla määrittyy linkin värin mukaan! Omat valintani: Crushed, 30px
Päivämääräotsikko on otsikon yläpuolella oleva päiväys. Muokkaamme tätä myöhemmin lisää, mutta nyt voit valita yllä olevaan tapaan miten se näkyy blogissa. Omat valintani: #888888, transparent (oletuksena), Trebuchet ja 10px
Tekstin alatunniste on julkaisun alaosassa oleva laatikko, jossa näkyvät tagit, jakopainikkeet, kirjoittajan nimi, jne. Pidän tekstin värin oletuksena (#666666), mutta vaihdan taustaväriksi Läpinäkyvän. Varjon väriksi laitan #999999 jotta se erottuu paremmin taustasta
Gadgetit muuttavat päivämäärää (en kyllä ole varma miten), kuvatekstiä ja widgetien otsikkoja. Tutustumme näihin paremmin kun lähdemme koodaamaan sivua, mutta toistaiseksi voit muokata niistä tähän hetkeen parhaimman näköiset. Omat valintani: Trebuchet, 11px, #666666 ja #cc1177 (nuolet Blogiarkistossa)
Kuvat kohdassa voit määrittää julkaisuissa näkyvien kuvien reunat, taustavärin ja kuvatekstin värin. En itse käytä kuvatekstejä, joten pidän sen värin oletuksena (laitan kuvatekstin kuitenkin koodiblogiin). Sekä reunaan että taustaväriin laitan transparent, sillä mielestäni kuvat näyttävät julkaisuissa paremmilta ilman ylimääräistä kikkailua.
Aksenteissa pystyt muuttamaan mm. sivupalkin ja julkaisun erottavan viivan väriä. Jätän tällä kertaa Välilehtien reunusvärin määrittämättä, sillä blogissani ei ole erikseen sivuja, joita varten tarvitsisin välilehtiä. Erottavan viivan väriksi asetin #666666
Mobiilipainikkeen väriä en ole koskaan ikinä muuttanut


Näin pääsimme perussäätöjen loppuun. Muista klikata suunnittelutyökalun oikeassa yläreunassa näkyvää oranssia painiketta (Käytä blogissa), jotta muutokset tallentuvat blogiisi. Seuraavassa osassa säädämme ensin ikonin, otsikkokuvan, julkaisun ja widgetin perusasiat Ulkoasu-valikossa ja aloitamme koodauksen muokkaamalla otsikot!

Ei kommentteja:

Lähetä kommentti