1. Esitiedot
Tässä ohjeessa oletetaan, että lukijalla on jonkinlainen käsitys siitä mitä HTML ja CSS ovat, sillä pohjan muokkaaminen vaatii hieman molempien käyttöä. Syvällinen tietämys kummastakaan ei ole tarpeen, sillä jokainen vaihe selitetään juurta jaksaen askel kerrallaan.
2. Blogipohjan rakenne
Oman pohjan luominen on parasta aloittaa jostain Bloggerin valmiista pohjasta. Tämän blogin pohjan perustana käytettiin Minima Black -pohjaa. Seuraavassa selostetaan hieman blogipohjan rakennetta ja sitä miten sen eri osat toimivat yhteen Bloggerin sivuelementti-, fontti- ja värieditorien kanssa. Pohjan koodia pääsee tarkastelemaan valitsemalla blogin hallintasivulla "Template" ja sitten "Edit HTML". Koodi on sivulla olevassa tekstilaatikossa.
2.1 Tyyliosa
Ensimmäinen mielenkiintoinen osa on
<b:skin> -elementin sisällä: siinä määritellään blogipohjan tyylit. Tyylit koostuvat muuttujamäärittelyistä (<Variable> -elementit) ja CSS-tyyleistä. Muuttujamäärittelyt mahdollistavat sen, että pohjan värejä ja fontteja voi muokata hallintasivun "Template", "Fonts and colors" -kohdasta. CSS-tyyleillä taas määritellään se, mihin kaikkeen muuttujat itse asiassa vaikuttavat.Otetaan esimerkiksi Minima Black -pohjan ensimmäinen muuttujamäärittely:
<Variable value="#000000" default="#000" type="color"
description="Page Background Color" name="bgcolor">Muuttujamäärittely muistuttaa ulkonäöltään paljon HTML-elementtiä. Muuttujalle annetaan nimi (name) ja kuvaus (description) jotka auttavat löytämään muuttujan hallintasivulta. Lisäksi määritellään tyyppi (type) joka voi olla joko väri (color) tai fontti (font). Muuttujalle annetaan lopuksi vakioarvo (default) ja nykyinen arvo (value), joka blogipohjaa kirjoittaessa voi olla vaikka sama kuin vakioarvo. Vakioarvo auttaa perumaan hallintasivulla tehdyt muutokset, koska muuttujan arvon voi palauttaa koska tahansa vakioarvoon valitsemalla "Revert to template default". Yllä olevassa muuttujamäärittelyssä siis esitellään sivun taustavärin muuttuja nimeltä "bgcolor", joka on sekä vakioarvoltaan että tämänhetkiseltä arvoltaan musta.
(Tässä vaiheessa on huomattava, että tyyliosassa on käytetty myös merkintöjä "/*" ja "*/". Nämä ovat kommenttimerkkejä, joiden sisään voi kirjoittaa tyylimäärittelyn eri osia kuvaavia kommentteja. Jostain syystä muuttujamäärittelyjen pitää kuitenkin olla kommenttimerkkien sisällä, kuten valmiista pohjasta voi nähdä. Helpointa lienee säilyttää kaikki valmiin pohjan kommenttimerkit, sillä niiden poistaminen melko varmasti aiheuttaa sen ettei pohja toimi.)
Muuttujamäärittelyjä käytetään CSS-tyyleissä lisäämällä jonkin ominaisuuden kohdalle dollarimerkki ja muuttujan nimi. Esimerkkinä olevaa sivun taustaväri -muuttujaa käytetään heti Minima Black -pohjan ensimmäisessä CSS-tyylissä:
body
background: $bgcolor;
jne...Tämän jälkeen sivun taustaväri -muuttujan muokkaaminen hallintasivulta aiheuttaa koko blogin taustan värin muuttumisen. Samaa muuttujaa voi käyttää useammassakin paikassa, ja Minima Black -pohja käyttääkin esimerkiksi "bordercolor" -muuttujaa monessa kohtaa, koska sillä tavalla värimaailma säilyy kätevästi melko yhtenäisenä.
2.2 Rakenneosa
Sivupohjan jälkimmäinen osa (
<body> -elementin sisällä) määrittelee sivun rakenteen. Rakenneosan sisältö on melko lähellä tavallista HTML-koodia, mutta siellä täällä seassa on erikoiselementtejä kuten <b:section> ja <b:widget>. Bloggerin aputekstien joukosta löytyy jonkinmoinen selitys siitä mitä nämä elementit tekevät, mutta tärkeimmät seikat on kerrottu tässä.Erikoiselementtien tarkoitus on jokseenkin sama kuin muuttujienkin: niiden avulla sivupohjan sisältöä voi muokata graafisesti hallitasivulta, kohdasta "Template", "Page elements".
<b:section> -elementit ovat paikkoja joihin sivuelementtejä voi sijoittaa, esimerkiksi sivupalkki ja alatunniste. <b:widget> -elementit taas ovat noita sivuelementtejä. Jos sivuunsa haluaa esimerkiksi toisen sivupalkin sivun vasempaan laitaan, pitäisi siis lisätä yksi <b:section> -elementti kuvaamaan sivupalkkia.3. Tämän sivupohjan synty
Nyt kun sivupohjan rakenteen perusteet on käsitelty, voidaan puhua siitä miten tämä nimenomainen sivupohja syntyi. Perustana käytettiin nimen omaan Minima Black -pohjaa, sillä sen rakenne ja värimaailma oli melko lähellä sitä mitä haluttiin--yksinkertainen otsikkopalkki, sivupalkki, mustaa.
Aluksi tarkasteltiin sivupohjan rakenneosaa. Ensin ajatuksena oli lisätä toinen sivupalkki sivun vasempaan laitaan, mutta tästä ideasta luovuttiin sittemmin, koska ajateltiin että yhdellä sivupalkilla ulkonäkö on selkeämpi. Koska perusrakennetta ei tarvinnut muokata, pohjan rakenneosa jätettiin sellaiseksi kuin se valmiissa pohjassa oli.
3.1 Asettelu
Ensimmäinen vaihe tyyliosan muokkaamisessa oli Minima Blackin vakioleveyden muuttaminen selaimen ikkunan kokoon mukautuvaksi. Tätä varten muutettiin sisältöosan, sivupalkin ja otsakkeen tyylejä. Sisältöosa (blogipostaukset ja kommentit) on
main-wrapper -id:llä varustetun lohkon sisällä, joten sen sijoittelu ja koko määritellään kohdassa #main-wrapper { ... }. Sisältöosalle päätettiin antaa tilaa 75% selainikkunan leveydestä, joten #main-wrapper -tyyliä muutettiin seuraavasti:#main-wrapper {
width: 75%;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}Tyylin kaksi ensimmäistä riviä määrittävät ensin sisältölohkon leveyden ja sitten sen, että sisältölohko sijoitetaan sivun vasempaan laitaan. Kaksi viimeistä riviä olivat pohjassa valmiina ja kommenttiensa perusteella paikkaavat Internet Explorerin epästandardia toimintaa, joten ne jätettiin paikoilleen.
Samalla periaatteella muokattiin sivupalkin tyyliä:
sidebar-wrapper {
width: 24%;
float: right;
padding-top: 40px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}Sivupalkin leveydeksi on määritelty 24%, ja nokkelimmat pokkelimmat huomaavatkin ettei leveyksistä tule yhteensä sataa prosenttia. Syynä tähän on joidenkin selainten epätarkka sijoittelukoodi: jos vierekkäisiksi tarkoitettujen elementtien leveys on määritelty yhteensä tarkasti sataan prosenttiin, jokin elementeistä saattaa selainikkunan kokoa muutettaessa hypähtää yht'äkkiä muiden alle. Jättämällä prosentin pelivaraa tätä ongelmaa ei esiinny. Float-ominaisuuden arvosta nähdään, että sivupalkki tulee sivun oikeaan laitaan. Sivupalkkiin on myös lisätty tyhjää tilaa ylälaitaan (
padding-top), jotta sivupalkin sisältö saataisiin sijoittumaan paremmin suhteessa blogipostauksiin. Ilman tätä sivupalkin sisältö jäisi liian ylös.Viimeisenä poistettiin sisältö- ja sivupalkkilohkot sisältävän
#outer-wrapper -lohkon tyylistä vakioleveys ja korvattiin se sadalla prosentilla, jolloin lohko venyy koko selainikkunan kokoiseksi:#outer-wrapper {
width: 100%;
...Sitten oli vuorossa otsikkopalkki. Tässä vaiheessa oli päätetty, että otsakkeessa tulisi olla kissakuva (tietenkin!) vasemmassa laidassa ja otsikkotekstit sen oikealla puolella. Blogipohjan kuvien luomisesta kerron enemmän toisaalla, mutta itse kuvan sijoittelu toteutettiin seuraavasti:
Blogin otsikkoteksti on
#header -lohkon sisällä, joka taas on #header-wrapper -lohkon sisällä. Kissakuva lisättiin ulomman lohkon taustakuvaksi, ja #header -lohkoa siirrettiin oikealle float -ominaisuudella. Otsakkeen rakenne selviää alla olevasta kuvasta:
Seuraavassa ovat otsakkeen tyylimäärittelyt:
#header-wrapper {
height: 300px;
background-image: url('http://www.example.com/kissakuva.png');
background-repeat: no-repeat;
background-position: 5% 50%;
}Ensinnäkin määriteltiin otsakkeelle vakiokorkeus 300 pikseliä. Tämä on tarpeellista siksi, että saadaan sivun alkuun tilaa koko kissakuvalle, jonka korkeus on siis alle 300 pikseliä. Sitten määritellään taustakuvan osoite, se että kuva näytetään vain yhden kerran eikä sitä toisteta koko elementin alueen peittämiseksi (
no-repeat) ja viimeisenä sijoitellaan taustakuva 5%:n päähän elementin vasemmasta laidasta ja pystysuuntaan keskelle.#header {
max-width: 700px;
float: right;
margin: 50px 5px;
text-align: center;
color:$pagetitlecolor;
}Sitten sijoitellaan otsikkotekstin sisältävä
#header. Sen leveydeksi määritellään enintään 700 pikseliä (max-width) ja se kellutetaan otsakkeen oikeaan laitaan pois kissakuvan tieltä. Sitä on myös siirretty pystysuunnassa keskemmälle otsaketta määrittelemällä ylämarginaaliksi 50 pikseliä.3.2 Väritys
Pohjan väritys oli jo valmiiksi suurimmaksi osaksi kunnossa, mutta muutamaa asiaa haluttiin muuttaa. Ensinnäkin haluttiin, että sivupalkin lohkoilla on sopiva tummahko punainen tausta, ja että niitä erottaa harmaa reunus. Tätä varten tyylien sidebar-osaan lisättiin seuraava katkelma:
.sidebar .widget {
border: 4px solid $bordercolor;
background-color: $sidebarbackgroundcolor;
}Koska kaikki sivupalkkiin tulevat lohkot ovat tyypiltään Bloggerin sivuelementtejä, ja koska kaikkien näiden sivuelementtien CSS-luokaksi tulee
.widget, voidaan ainoastaan sivupalkin elementtien ulkonäköön vaikuttaa yllä olevan kaltaisella tyylimäärittelyllä. Siinä määritellään ensinnäkin neljän pikselin levyinen bordercolor -muuttujan arvoa käyttävä reunus, ja sitten taustaväri toisen muuttujan avulla. sidebarbackgroundcolor -muuttujaa ei kuitenkaan pohjassa valmiiksi ole, joten se täytyy lisätä muuttujien määrittelyihin:<Variable name="sidebarbackgroundcolor" description="Sidebar background color"
type="color" default="#d33" value="#640411">Tämän jälkeen väriä voi tarvittaessa vaihtaa ilman että tarvitsee muokata sivupohjan koodia. Muut värimuokkausta vaativat kohdat muutettiin samalla tavalla.
3.3 Kuvitus
Pohjassa käytetään muutamaa kuvaa: otsikkopalkissa on yksi kissakuva, joka sivun alanurkassa toinen ja koko sivun taustana vielä yksi. Otsikkopalkin kuvan sijoittelu selitettiinkin jo, tässä siis kahden muun.
Jokainen erillinen taustakuva vaatii oman elementtinsä. Toisin sanoen, jos tahtoo että koko sivun taustakuva on kolmen kuvan kerrostuma, pitää koko sivun sisältö sulkea esimerkiksi kolmeen sisäkkäiseen
<div> -elementtiin ja määritellä jokaisen taustaksi yksi kolmesta kuvasta. Tähän pohjaan haluttiin yhtenäinen tumma tausta kaiken taakse, joten se oli loogista laittaa <body> -elementin taustakuvaksi:body {
background:$bgcolor;
background-image: url('http://www.example.com/tausta.jpg');
...Tässä yksinkertaisessa tapauksessa riittää, että antaa osoitteen kuvatiedostoon, kuvaa toistetaan automaattisesti siten että se peittää koko sivun.
Tässä pohjassa
<body> -elementin koko sisältö on kääritty #outer-wrapper -lohkoon, joten toinen kissakuva päätettiin sijoittaa tämän lohkon taustakuvaksi.#outer-wrapper {
background-image: url('http://www.example.com/toinen_kissa.png');
background-repeat: no-repeat;
background-position: bottom right;
...Sijoittelu on tuttu otsakkeesta, tässä tapauksessa kuva on vaan sijoitettu sanallisilla määrittelyillä ("bottom right" vastaa samaa kuin "100% 100%").
4. Yhteenveto
No niin. Tässähän tämä kaikessa lyhykäisyydessään, toivottavasti tästä on jollekulle jotain hyötyä. Kommentit ja parannusehdotukset ovat todella hyvin tervetulleita. Pohjassa käytettyjen kuvien käsittelyn saloihin ei tässä puututtu, mutta sitäkin voin ihan mielelläni käsitellä jos jotakuta kovasti kiinnostaa.
(Lakitekninen huomio: Minima Black on Stopdesign.comin Bloggerille luoma valmis sivupohja jota saa vapaasti muokata ja käyttää oman pohjansa perustana. Minima Blackin suunnitteli Douglas Bowman)
Tekstit
7 kommenttia:
KIIIITOS!!!! Laitanpa blogilleni linkkin tänne ja katsotaan osaanko tehdä jotain....
Erittäin mielenkiintoista! Kiitos tästä opettavaisesta postauksesta.
Ulkoasu on tyylikäs ja persoonallinen. Kissakuvat ovat todella hurmaavia!!
Kiitos vaivannäöstä, että oot jaksanu tämän kirjoittaa! Pitää tutkiskella vielä tarkemmin :)
Kiitän ja kumarran! Tämä oli ainoa selkokielellä ja helposti seurattavissa oleva selvitys asiasta, minkä meikäläinen netistä löysi. Enkuksi löytyy kyllä, mutta kun pitäisi ensin ymmärtää mistä puhutaan suomeksi, jotta pääsisi hommaan kiinni... Tuosta rakenneosion muokkamisesta pääsinkin postauksen perusteella hyvin selville. Ja jopa onnistuneesti sain kokeiltua :) Olen tämän kommentin kanssa liikkeellä aika paljon varsinaisen postauksen jälkeen, mutta noista kuvista ajattelin silti kysyä..
Lähinnä kiinnostaa voiko netistä jostain saada vapaaseen käyttöön erilaisia "pohja"tekstuureita, kuten kangas- tai paperityyppistä pintaa? Olen nähnyt niitä monissakin blogeissa, mutta en ole vielä keksinyt millä sanalla niitä googlesta haetaan :)
Ja muuten tosi hyvällä maulla tehty pohja!
Teresita, kiitos kehuista, pohja on tosiaan mieheni käsialaa, itse annoin vain ohjeita :)
En tiedä, onko netistä saatavilla "vapaita" kuoseja, mutta kiersin ongelman siten, että valokuvasin erään säilytyslaatikkoni kiemurakuosin ja muokkasin siitä blogipohjaan soveltuvan kuvan. Niksi on vapaasti käytettävissä :)
Kiitoksia sinulle! Oon tässä yrittäny kovasti muokata itselleni pohjaa, mutta nyt opeteltavissa reunat / boordit. Monella on nauhaa ja lehtiä ja vaikka mitä, mutta en tiedä mitä muuttaa...
Kiitos paaaljon! Hei vielä yks kysymys, en oo varma selvensitkö tän jo, mutta silti.. eli miten lisään sivupalkkeihin kuvan omista kuvatiedostoista? Kiitos! :--)
-elli
Lähetä kommentti
Kommentoi ihmeessä, olen varmasti kiinnostunut ajatuksistasi.