31. toukokuuta 2021

Koodinurkka 1: Blogin ulkoasun muokkaamisen aloitus

Tein jo aiemmin postauksen blogin ulkoasun muokkaamisesta, mutta sen jälkeen Blogger muutti huomattavasti ulkoasuaan tuolla muokkauksen puolella, joten aloitetaan tämä projekti siis alusta!

Voit seurata blogin muokkaamista livenä täältä!

Ensimmäiseksi suosittelen tekemään oman testiblogin. Vaikka sinulla olisi blogi jo valmiina, on muokkaukset parempi suorittaa ensin testiblogissa, jotta nykyinen blogin ulkoasu ei rikkoontuisi ja lukijat näkevät sitten vasta valmiin ulkoasun keskeneräisen sijaan.

Kun olet saanut blogin tehtyä, lisää sinne vähintään kaksi postausta, jotka sisältävät vähintään seuraavat elementit (mitä enemmän sisältöä, sen parempi, voit tehdä postauksista identtiset):

• Kaksi erillistä kappaletta tekstiä (voit käyttää kappaleiden luomiseen esim. lorem ipsumia)
• Kaksi kuvaa, joista toisessa ei ole kuvatekstiä ja toisessa on
• Alleviivattu sana ja/tai lause
• Boldattu/lihavoitu sana ja/tai lause
• Kursivoitu sana ja/tai lause
• Yliviivattu sana ja/tai lause
• Linkki
• Viisi hashtagia/tunnistetta (toisessa postauksessa korkeintaan kolme samaa hashtagia!)

Kun olet julkaissut tekstin, valitse vasemmasta sivupalkista kohta Teema ja rullaa alemmas kunnes pääset kohtaan Simple. Aseta sitten teemaksi keltataustainen, ensimmäisenä oleva teema (Bold). Tämän jälkeen siirry sivupalkissa Teeman yläpuolella olevaan Ulkoasu kohtaan. Sivulla näkyy paljon erilaisia laatikoita, joista ei vielä tässä kohtaa tarvitse välittää. Klikkaa laatikoiden yläpuolella olevaa linkkiä "teeman suunnittelutyökalulla". Huom! Säätöjä tehdessäsi, muista tallentaa aika ajoin säädöt sivun oikeassa alareunassa olevasta kuvakkeesta.

Aukeavan sivuston pitäisi näyttää kutakuinkin yllä olevalta. Tehdään alkuun blogin ulkoasusta hyvin simppeli, koska muokkaamme sitä myöhemmin sitten CSS koodin avulla. Klikkaa oranssia laatikkoa Taustakuva tekstin alla ja valitse mikä tahansa kuva. Tämän jälkeen valitse laatikosta Poista kuva. Siirry sitten kohtaan Ulkoasu, eli hypätään toistaiseksi "Säädä leveyksiä" kohdan yli.

Tässä kohtaa pystyt valitsemaan miltä blogisi näyttää. Haluatko siihen kaksi sivupalkkia vai pelkästään yhden. Onko sivupalkki vasemmalla vai oikealla vai onko sivupalkkia lainkaan? Koska teemme peruseditointia, jätetään valinta sellaiseksi kuin se on, mutta valitaan alatunnisteeksi ensimmäinen vaihtoehto.

Nyt voimme siirtyä kohtaan Säädä leveyksiä. Syy miksi hyppäsimme tämän ylitse löytyy siitä, että mikäli olisimme säätäneet leveydet ensin ja sitten muokanneet ulkoasun asettelua, olisi leveydet pitänyt säätää uudelleen, koska jostain syystä Blogger päättää laittaa leveydet perusasetuksiin ulkoasun säädön jälkeen. Säädän itse leveyden 1000px ja sivupalkin leveyden 250px. Siirrytään kohtaan Lisäasetukset.

Ensimmäisenä lisäasetuksissa pääsee säätämään sivun perustekstin fonttia ja kokoa. Olen itse todennut että Trebuchet on omaa silmääni miellyttävin valmiista vaihtoehdoista, joten valitsen sen ja fontin kooksi kirjaan 11px, koska pidän hieman pienemmästä tekstistä. Tekstin värin asetan HEX-arvolla.

Oman värin saa asetettua siten, että valitset ensin värillisten pallojen alapuolelta kohdan LISÄÄ ja sen jälkeen aukeavasta valikosta alareunan plusmerkin. Tästä aukeaa valikko, jossa pystyt määrittämään värin joko liikuttamalla palloa värikartalla tai kirjoittamalla suoraan HEX-arvon oikeaan kohtaan. Kun olet valinnut mieleisesi värin, klikkaa kohtaa Sivun teksti jonka vieressä on nuoli alaspäin, valitse Taustat.

Tässä kohtaa ulompi tausta jää valkoiseksi, vaikka valitsisit jonkin toisen värin, mutta ei välitetä toistaiseksi siitä. Päätausta on varsinaisen blogin väri. Tässä vaiheessa itse suosin valkoista taustaa. Värin voi muokata samaan tapaan kuin tekstinkin värin, aivan kuten kaikki muutkin jatkossa muokattavat värit. Ylätunnisteen taustan asetan läpinäkyväksi, mutta voit itse määrittää tähän myös värin, jos haluat. Sitten voit klikata Taustat kohtaa ja valita Linkit.

Aseta linkin pääväriksi mieleisesi väri. Käyty väri tarkoittaa sitä, että kun linkkiä on klikattu, niin linkin värin saa eriväriseksi. Tämä kertoo käyttäjälle, että hän on jo lukenut linkin takaa löytyvän tekstin. Itse suosin kuitenkin tässä kohtaa samaa väriä, kuin linkin päävärikin, jotta sivu pysyy ns. siistinä. Osoitusväri taas tulee linkin väriksi silloin, kun hiiri viedään linkin päälle. Suosittelen vahvasti, että tämä on erivärinen päävärin kanssa, joko täysin erilainen tai hieman erisävyinen. Valitse sitten Linkit kohdan takaa osio Blogin otsikko.

Muokkaa otsikko haluamaksesi, niin kooltaan, fontiltaan kuin väriltäänkin. Siirry sitten kohtaan Blogin kuvaus ja valitse sille haluamasi väri. Itselläni blogin kuvaus on pois päältä, joten sen muokkaaminen on turhaa itselleni. Välilehtien teksti osuus määrittää ns. navigaation fontit. Emme ole vielä luoneet näitä, joten skipataan tämä kohta (kuten myös Välilehtien tausta). Voin myöhemmässä koodinurkan postauksessa neuvoa miten nämä välilehdet luodaan ja sisällyttää samaan postaukseen niiden muokkaamisen.

Postauksen otsikon fontti kannattaa pitää selkeänä ja ottaa huomioon, kirjoitatko otsikon aina isolla vai käytätkö tavanomaista kirjoitusasua, sillä tämä vaikuttaa huomattavasti fontin valintaan. Itse pidän paljon Oswald fontista. Se on lihavampi teksti ja muistuttaa osittain Impact fonttia, joka on myös yksi suosikeistani. Oswald on kuitenkin hieman Impactia selkeämpi ja ohuempi, joten se on hyvä otsikkofontti. Pienensin otsikon kooksi 20px. Päivämääräotsikon pidän melko vaaleana verrattaen otsikon väriin, koska se on toissijainen informaatio postauksessa. Se ei kuitenkaan ole turha info, joten sen on hyvä näkyä kuitenkin suhteellisen selkeänä. Taustavärin pidän läpinäkyvänä, jotta päivämäärä ei pompsahtaisi liikaa silmille. Fontiksi valitsen Trebuchetin, kooksi 10px ja otan lihavoinnin pois klikkaamalla b-nappulaa.

Tekstin alatunniste on postauksen alareunassa oleva laatikko, jossa näkyy oletuksena mm. blogin kirjoittajan nimi, hashtagit, päivämäärä ja jakopainikkeet. Asetan itse taustavärin läpinäkyväksi ja fontin värin aavistuksen vaaleammaksi kuin postauksen fontin väri. Varjo ei varsinaisesti ole varjo alatunnisteessa, vaan suora viiva sen alapuolella. Valitsen tähän suhteellisen vaalean värin, jotta se ei erottuisi liikaa, mutta kuitenkin sen verran, että se erottaa postauksen edellisestä postauksesta.

Gadgetit koskevat lähinnä sivupalkissa olevia laatikoita. Otsikon fontiksi kannattaakin valita sellainen fontti, joka erottuu selkeänä myös pienessä koossa. Valitsin itse otsikoksi Roboto Mono koska se näytti hauskalta ja selkeältä. Otin jälleen myös lihavoinnin pois päältä ja jätin fontin kooksi 11px. Vaihtoehtoinen väri koskee mm. Blogiarkistossa näkyviä nuolia. Gadgetien muokkaamisen jälkeen voimme siirtyä kohtaan Kuvat.

Tehdään alkuun kuville selkeät reunat ja taustavärit, koska tulemme muokkaamaan näitä vielä myöhemmin kun siirrymme CSS:n pariin. Aseta siis taustaväriksi jokin sivujesi väriin sopiva väri, joka miellyttää omaa silmääsi. Toimi samoin reunuksen värin kanssa. Otsikon tekstin väri tarkoittaa tässä kohtaa varsinaisen kuvatekstin väriä. Siirrytään kohtaan Aksentit.

Erottavan viivan väri tarkoittaa viivaa postausten ja sivupalkin välissä. Itse pidän siitä, että viiva ei varsinaisesti erotu taustasta, mutta on silti olemassa kun tarkkaan katsoo. Välilehtien reunusväriä meidän ei tarvitse muokata, koska meillä ei ole välilehtiä blogissamme. Seuraavassa kohdassa, Mobiilipainikkeen väri jätän värin määrittämättä.

Olemme nyt valmiit ulkoasun suunnittelun kanssa. Siirrytäänkin nyt takaisin valikkoon vasemmassa yläreunassa olevasta nuolesta. Muista tallentaa muokkaukset ennen siirtymistä! Valitse vasemmasta sivupalkista kohta Ulkoasu. Siirrytään vielä ennen tämän kertaisen postauksen lopettamista muokkaamaan hieman laatikoiden sisältöä. Klikkaa Otsikko laatikosta Muokkaa.

Tästä kohtaa pystyt muokkaamaan blogisi otsikkoa ja kuvausta. Itselläni kuvausta ei ole, koska se ei ole testiblogissa välttämätön, mutta virallisessa blogissa se on hyvä olla, vaikka se ei näkyisikään blogissa. Syynä se, että kuvauksessa oleva teksti auttaa blogin näkyvyydessä ja parantaa sen löytymistä hakukoneissa. Mikäli sinulla on valmiina otsikkokuva blogiisi, voit lisätä sen myös tässä. Älä välitä siitä seikasta, että Blogger ilmoittaa pienentävänsä kuvaa, sillä muokkaamme tätä asiaa myöhemmin. Otsikkokuvan olisi hyvä olla korkeintaan samanlevyinen blogin leveyden kanssa, eli omalla kohdallani 1000px. Se voi olla myös pienempi, mutta myöhemmässä vaiheessa pitää muistaa ettei kuvaa lähde venyttämään koodin avulla.

Itse laitan kuvan aina otsikon ja kuvauksen tilalle, koska samat asiat voi myös sisällyttää kuvaan. Otsikkokuvani leveys on 1000px ja korkeus 272px. Kun olet lisännyt otsikkokuvan, jos sellaisen siis haluat, rullaa hieman alemmas kohtaan, josta löytyy Ensisijainen ja sidebar-right-1.

Valitse Blogipostaukset kohdasta Muokkaa. Ensimmäisenä asetuksista löytyy blogipostausten määrä etusivulla. Itse laitan useimmiten postauksia näkymään kerrallaan 1-2 (testiblogissa on hyvä näkyä vähintään kaksi), koska kirjoitan toisinaan hyvinkin pitkiä tekstejä, jolloin sivua joutuisi rullaamaan tuhottomasti jos postauksia näkyisi enemmän. Mikäli kirjoitat kuitenkin lyhyitä postauksia, voit laittaa postauksia näkymään useammankin. Viestisivun linkkitekstistä täytyy sanoa, etten ole aivan varma, muistanko oikein sen käyttötarkoituksen. Muistini mukaan tämä teksti näkyy blogipostauksessa etusivulla mikäli jostain asetuksista on määritetty niin, että postauksista näkyy vain pieni pätkä tekstiä (kuten mobiiliversiossa) ja loput pääsee lukemaan klikkaamalla tuohon kohtaan määritettyä tekstilinkkiä. Yritin googlettaa netistä tietoa muistini tueksi, mutten löytänyt mitään infoa aiheesta.

Viestisivun asetukset ovat melko yksinkertaiset. Jokaisen näistä saa piiloon klikkaamalla valintaruudun tyhjäksi.
1. Päivämäärän esitystapa otsikon yhteydessä
2. Teksti postauksen alareunassa kirjoittajan nimen yhteydessä, itselläni tässä blogissa se on ♥
3. Mihin kellonaikaan postaus on lähetetty
4. Kommenttien nimitys, esim. "5 kysymystä", "5 kommentti(a)", "5 viesti(ä)"
5. Täytyy myöntää tästäkin ettei mitään hajua tämän käyttötarkoituksesta
6. Tunnisteet, eli postaukseen liitetyt hashtagit
7. Vain blogin kirjoittajalle näkyvä kuvake, josta voi nopeasti päästä postauksen muokkaustilaan
8. Lisää sähköpostilinkin, eli ns. yhteydenotto nappula
9. Postauksen jakamista helpottavat pikalinkit
10. Mistä sijainnista postaus on lähetetty
11. Näyttää Blogger-profiilisi postauksen alapuolella, en itse koe tarpeelliseksi
12. Näyttää mainoksia etusivulla, mikäli sinulla on AdSense luotuna

Lopuksi pääset muokkaamaan missä järjestyksessä mikäkin asia alatunnisteessa näytetään. Järjestäminen onnistuu klikkaa ja raahaa menetelmällä. 

Sidebar-right-1 on blogin oikeassa reunassa oleva sivupalkki. Tietoja minusta -laatikko näyttää Blogger-profiilisi julkiset tiedot. Itse poistan tämän laatikon ja lisään erikseen tekstilaatikon myöhemmin, johon editoin tiedot jotka haluan itsestäni jakaa. Poistaminen onnistuu kun avaat laatikon kohdasta Muokkaa ja valitset Poista. Blogiarkistosta pystyy selaamaan blogin vanhoja tekstejä. Avataan se Muokkaa kohdasta.

Blogiarkistoa pystyy muokkaamaan muutamin tavoin. Ensin muokataan miltä arkisto näyttää. Hierarkia on oletustyyli, jossa näkyvät yllä olevan kuvan tavoin nuolet. Flat-luettelo näyttää kuukaudet ja niiden perässä on suluissa sen kuukauden aikana tehtyjen postausten määrä. Kuukautta klikkaamalla avautuu viimeisin postaus sen kuukauden ajalta ja käyttäjä joutuu selaamaan yksittäin postaukset läpi, joten tämä on suhteellisen huono vaihtoehto arkistolle. Avautuva valikko näyttää ensin vuosiluvun ja sitä klikkaamalla voi valita kuukauden, mutta systeemi on sama kuin flatissa, joten ei ole kovin toimiva tämäkään. Suosittelen siis Hierarkian käyttämistä.

Pystyt myös määrittämään näytetäänkö blogien otsikot hierarkiassa. Suosittelen pitämään tämän päällä, koska muutoin systeemi on sama kuin flatissa ja avautuvassa. Voit muuttaa arkistointivälin ja päivämäärän itsellesi sopivaksi.

Valitse seuraavaksi Blogiarkisto laatikon yläpuolelta Lisää gadget. Sivulle aukeaa valikko, jossa on useita erilaisia liitännäisiä. Etsi valikosta liitännäinen Seuraajat ja klikkaa sitä. Voit vaihtaa liitännäisen nimen, esimerkiksi nimeen "Lukijat". Pidä otsikon alla oleva valintaruutu valittuna ja paina Tallenna. Nyt Blogiarkiston yläpuolelle on ilmestynyt uusi laatikko, jonka nimi on se sama, jonka äsken laitoit liitännäisen nimeksi. Järkevin paikka tälle liitännäiselle on sivupalkin alareuna (ainakin omasta mielestäni), joten ota liitännäisestä hiiren avulla kiinni ja raahaa se Blogiarkiston alapuolelle. Tallenna sen jälkeen sivun asettelu oikeassa alanurkassa olevasta nappulasta ja käy katsomassa miltä liitännäinen näyttää varsinaisella blogisivulla.

Etsi seuraavaksi Lisää gadgetin kautta liitännäinen Tunnisteet. Itse vaihdan tämän laatikon nimeksi Hashtags. Voit testata eri asetuksin mikä on itsellesi sopivin vaihtoehto mihinkin kohtaan. Omina asetuksinani on lajittelu aakkosjärjestyksessä, näyttönä pilvi, tunnisteiden määrä päällä ja kaikkien tunnisteiden näkyminen. Asetan laatikon Blogiarkiston ja Lukijoiden väliin. Voit lisätä lisää gadgeteja halutessasi niin paljon kuin haluat ja lisätä niitä myös postausten ja otsikon väliin tai postausten alapuolelle. Olen lisäksi itse ottanut Navigaatiopalkin otsikon yläpuolelta pois päältä.

Nyt olemme siinä vaiheessa että voimme lopettaa tämän ensimmäisen osuuden tähän. Seuraavalla kerralla katsotaan taustojen ja fonttien muuttamista CSS:llä ja perehdytään hieman niihin välilehtiin joista oli aiemmin tässä postauksessa puhetta. Lisää kommentteihin jos sinulla on jotain erityistä jota haluaisit oppia, niin lisätään se johonkin postaukseen tulevaisuudessa!

Ei kommentteja:

Lähetä kommentti