Esipuhe
WordPressin artikkelinkirjoituskäyttöliittymässä on kaksi eri tilaa: graafinen ja teksti-. Graafisessa editorissa muokkaaminen on kuin yksinkertaisella tekstinkäsittelyohjelmalla leikkimistä. Tämä opas kertoo kuitenkin tekstieditorin käyttämisestä, ja vielä spesifisemmin sen käyttämisestä Klaanonissa. Meillä nimittäin on useita erilaisia erikoismuotoiluja, joita voi tai haluaa käyttää kirjoittaessa ja joita ei voi graafisesta editorista käsin esille taikoa, mikä on syy siihen, miksi tämän tekstin kirjoittaja on yrittänyt tuskallisuuksista ja suurista vastoinkäymisistä huolimatta saada kaikki muutkin kuin koodaripellet käyttämään tekstieditoria.
Käytännössä tekstieditorilla kirjoittaessa kirjoittaa HTML-koodia, jota WordPress ei kuitenkaan prosessoi ihan vain HTML-koodina. Nimittäin tyhjät rivinvaihdot tulkitaan kappaleenvaihdoiksi, joten kappaleenvaihto toimii kuin graafisessa editorissa. Lisäksi suorat ASCII-lainausmerkit (") muuttuvat automaattisesti kaareviksi (eli niiksi oikeiksi) lainausmerkeiksi (”).
Yritän saada kirjoitettua tästä oppaasta hieman rautalangasta väännetyn, jotta asia menee varmasti perille ja jotta tästä on apua hädän hetkellä, ellei minua ole (ja vaikka olisikin) saatavilla.
Mukavia luku- ja sittenmmin myös kirjoitushetkiä, parahin lukijani!
— Manfred
Sisällysluettelo
Yleistä
On muutama asia, jotka kannattaa huomioida muotoillessaan. Muotoileminen on hieman erilaista kahdessa eri tapauksessa: tekstipätkä, jota muotoillaan, voi olla JOKO keskellä tekstikappaletta, esimerkiksi muutama sana tai lause taikka virke, TAI kokonainen tekstikappale. Tästä oppaasta pitäisi käydä hyvin ilmi, miten näissä eri tapauksissa asiat muotoillaan.
Mikäli luulet, ettet tarvitse sen kummempia neuvoja kuin boldaamisen ja kursiivin pienille tekstimäärille, ja haluat jättää vaativammat muotoilut kokonaan pois viesteistäsi, voit siirtyä suoraan lukemaan kappaletta ”Perusmuotoilut” eikä sinun sen lukemisen jälkeen tarvitse vaivata itseäsi kovin suurella osalla loppuopastakaan.
Käsitteistä
Kun höpisen jotain jostain hiton tagista, niin se on kulmasulkeiden (käytännössä pienempi kuin - ja suurempi kuin -merkit) sisällä oleva sanarypäs, esimerkiksi <sieni>. Jos puhun aloittavasta tagista tai alkutagista, tarkoitan tagia, jossa ei ole vinoviivaa (/). Jos taas puhun lopettavasta tagista eli sulkutagista tai jostain vastaavasta, tarkoitan tagia, jossa on sitten se vinoviiva. Esimerkiksi </sieni>. Geddit? Hyvä.
Kun puhun niinkin hienolta kuulostavasta asiasta kuin attribuuteista, tarkoitan vain ja ainoastaan roskaa, jota tungetaan tagin sulkeiden sisään. Käytännön esimerkki varmasti auttaa teitä ihmeen konkreettisenvaatijoita:
Okei, mitäs tuossa nyt on. Eri värit ovat sitten ihan puhtaasti selkeyttämässä eri osia tekstistä, niillä ei ole mitään syvällisempää merkitystä. Tässä ”span” on tagin nimi. Vau. Ja nyt tuo ”style” on se attribuutti. Attribuutin jälkeen tulee (lähes) aina yhtäsuuruusmerkki (=) ja sen jälkeen lainausmerkeissä (ASCII-lainausmerkeissä ("), ei missään nimessä kaarevissa (”)) attribuutin arvo, joka on tässä tapauksessa ”font-size: 150%;”.
Tagin sisältö, joka näyttäisi tässä tapauksessa olevan sana ”Tekstiä”, on se, mitä halutaan muotoilla. Yksinkertaista!
Käsitteet vain vähän kuin helpottavat asioista puhumista, kyllähän te tiedätte sen. Ja olette varmasti jo joutuneet kärsimään niistä aiemminkin puhettani kuunnellessanne. Jos ette muista sanoja, ne voinee päätellä hyvinkin kontekstista. Mutta tässäpä ovat teille. Tärkeimmät ainakin.
Asiaa HTML-classeistä
Mitä hepreaa sinä minulle syötät, saatanan weleho???
HTML eli Hypertext Markup Language on kuvauskieli, jolla websivut on kirjoitettu. Pohjimmiltaan kaikki on tekstimuotoista koodia, jota selain tulkitsee sinullekin, rakas lukijani, graafiseen muotoon, jollaisena sen näet.
Classit eli vapaasti käännettynä luokat ovat kätevä tapa muotoilla asioita. Lähinnä siksi, että minä teen kaiken työn ja sinä kirjoitat helppoja sanoja standardin muotin mukaan pötköön ja saat sen avulla taianomaisia muotoiluja aikaan. Kuulostaako hyvältä? No sitähän minäkin.
Käytännössä miten homma toimii: olkoon jonkin täysin satunnaisen classin nimi vaikkapa ”sieni”. Tämä kyseinen luokka voisi vaikkapa muuttaa tekstin kärpässienenpunavalkopilkukkaaksi (ei oikeasti olisi muuten helppoa toteuttaa). No mitenkäs se teksti sitten käytännössä muotoillaan tämän sieniluokan avulla? Tässä kohtaa tulee ero siihen, onko teksti kokonainen kappale (tai vaikka useampi sellainen) vai tekstikappaleen sisäistä sälää.
Jos teksti on leipätekstin seassa eli ei kokonainen kappale vaan vähemmän kuin kappale eli kappaleen sisällä olevaa tekstiä, muotoilut toteutetaan yleensä <span>-tagilla. Jos taas teksti on kokonainen kappale tai jopa usemapi sellainen, muotoilut toteutetaan yleensä <div>-tagilla. No miksi tällainen ero? Ihan vain sen takia, mitä nämä tagit HTML-kielessä ovat. Span ei toimi kappaleisiin, koska sen sisään ei voi tunkea kappaletageja (joista tavallisten kirjoittajien (tai käytännössä kenenkään) ei tarvitse mitään huolehtia, joten älkää edes miettikö). Div taas ei toimi pelkkiin kappaleen sisäisiin tekstipätkiin kovinkaan hyvin, koska se käytännössä laatikoi sisältönsä kappaletyylisesti, ellei näe suurta vaivaa automaattisten muotoilujen kumoamiseksi.
Okei, siis classeja käytetään yllättäen class-attribuutilla, eli, kuten aiemmassa luvussa selitin, tungetaan sinne tagin sisään käytännössä merkkijono ”class="tähän classin nimi"”. Käytänön esimerkkinä tämä sieni-classimme, erikseen sekä kappaleeseen että kappaleen sisäiseen tekstipätkään:
<span class="sieni">eli tämä</span> on muotoiltu.
Valitsin siinä mielessä tosi typerän esimerkkityylin, että minulla ei ole mitään halua toteuttaa kärpässienen väristä tekstiä. Mutta eiköhän valmiiksi määrittelemissäni classeissä ole ihan tarpeeksi esimerkkiä teille! Jatkakaa lukemista.
Classejä voi yhdistellä!
Kuulit oikein! Samalla tagilla voi olla useita classejä, jolloin jokaisen classin ominaisuudet pätevät! Jos on ristiriitoja muotoilujen välillä (esimerkiksi yksi class haluaa muuttaa tekstin punaiseksi ja toinen mustaksi), niin ei ole itsestään selvää, mikä muotoilu on päälimmäinen. Taitaapi olla niin, että se, joka on koodissa viimeisimpänä, eli et voi kauheasti asialle mitään, paitsi tyylittämällä vähän vippaskonsteilla (ainakin tavallisen käyttäjän näkökulmasta).
Joka tapauksessa, kuinkas classejä yhdistellään? No sinne class-attribuutin arvoksi (lainausmerkkien sisään) tulee vain useampi classin nimi välilyönneillä erotettuna. Olkoot meillä esimerkkiclassit korvasieni ja kärpässieni. Sama esimerkki kuin edellä, mutta näillä kahdella classillä varustettuna, behold!
<span class="korvasieni kärpässieni">eli tämä</span> on muotoiltu.
Konkreettinen esimerkkiiiiii!
Okei, okei! Rauhoitu. Tässä tulee. Meillä on valmiiksi määritelty class ”feterra”, jolla saa tehtyä (yllätys, yllätys!) Avhrak Feterran puhetta. Eli käytännössä vaihtaa fontin Impactiksi. Koska Feterra puhuu Impact-fontilla. Siispä tällainen koodi…
… tuottaa seuraavanlaisen lopputuloksen: Tekstiä
Otetaanpa toinen class. Meillä on class nimeltä ”nauru”, joka värjää tekstin mustaksi kuin Syvä Nauru itse (ja lisäksi boldaa sen). Pelkkä nauru toisin sanoen saa tällaisella koodilla…
… aikaan tällaista tekstiä: Tekstiä
Nämä tyylit ovat helposti yhdistettävissä. Toinen määrää tekstille uuden värin ja toinen uuden fontin. Jos kaksi tyyliä määrää saman ominaisuuden, niiden käyttäminen voi olla sottaista. Mutta tämä toimii mainiosti! Seuraavanlaisella koodilla…
… saadaan tällaista tekstiä: Tekstiä
Ja sama toki toimii kappaleille. Tällaisella koodilla…
… saa aikaan seuraavanlaisen kappaleen:
Perusmuotoilut
On pari hassua perusmuotoilua, jotka jokaisen olisi ihan kiva hallita (ja jotka jokainen hallinneekin tähän mennessä). Otan ne kuitenkin esille tässä.
Lihavointi (boldaus)
Lihavointi on perusmuotoilu, joka HTML-kielessä on perinteisesti toteutettu <b>-tagilla. Vaikka nykyään suurin osa muotoilusta on CSS:n vastuulla, kyseinen tagi on silti käytössämme ja suurimmalle osalle porukasta helpoin tapa toteuttaa tekstin lihavoiminen.
- Kuinka sitä käytetään:
-
Mikäli muotoiltava teksti on kappaleen sisällä, koodi näyttää tältä:
Tässä on tekstiä, josta <b>tämä osa on boldattu</b>.Mikäli muotoiltava teksti on kokonainen kappale (tai useampi sellainen), niin olen pahoillani, mutta samaa tagia ei valitettavasti voi käyttää, koska kappaleita ei voi sen sisään tunkea. Tämä on HTML-kielen ominaisuus (tai ongelma, jos se on sinusta parempi sana kuvaamaan asiaa). Okei, kyllähän se käytännössä toimii, mutta se rikkoo asioita vähintään semanttisella tasolla. Mutta jos et ymmärrä, miten tämä toimii, voit copypastata ihan hyvin seuraavan tagin. Nimittäin jos haluat boldata koko tekstikappaleen, kirjoita:<div class="bold">Tässä on boldattava tekstikappaleesi.</div>
- Miltä se näyttää:
-
Tässä on tavallista tekstiä. Tässä taas boldattua sellaista.
Tässä on kokonainen boldattu kappale. Revi siitä.
Kursivointi (italic)
Kursivointi on toinen perusmuotoilu, jolle on perinteisesti ollut oma HTML-tagi. Sitä voi ja saa edelleen käyttää. Lukijani, tietänet valmiiksi, että kyseinen tagi on <i>.
- Kuinka sitä käytetään:
-
Mikäli muotoiltava teksti on kappaleen sisällä, koodi näyttää tältä:
Tässä on tekstiä, josta <i>osa on kursivoitu</i>.Mikäli muotoiltava teksti on kokonainen kappale (tai useampi sellainen), niin jälleen kerran joudut käyttämään diviä ja hassua classiä. Koska myöskään <i> ei voi olla kappaleiden ympärillä oleva elementti. Se vain ei toimi niin. Jos haluat kääriä kokonaisia kappaleita kursiivin ihmeelliseen vaippaan, kirjoita:<div class="italic">Tässä on kursivoitava tekstikappaleesi.</div>
- Miltä se näyttää:
-
Tässä on tavallista tekstiä. Tässä taas kursivoitua sellaista.
Tässä on kokonainen kursivoitu kappale. Revi siitä vähän lisää.
All Caps (kaikki isolla saatana)
Korostuskeinona KAIKEN KIRJOITTAMINEN ISOLLA on tietty vähän kyseenalaista, mutta vielä kyseenalaisempaa on sen tekeminen käsin, nimittäin kirjoittamalla oikeasti kaiken Caps Lock päällä. Koska teksti on tekstiä ja muotoilu muotoilua. Ja ALL CAPS on muotoilukeino. Jos et näe järkeä tässä, tee edes minulle mieliksi, jooko? Jos taas näet järjen, olet valaistunut. Lukijalle sillä ei ole eroa, mutta sillä voi olla semanttista eroa joissain tilanteissa.
- Kuinka sitä käytetään:
-
Mikäli muotoiltava teksti on kappaleen sisällä, koodi näyttää tältä:
Tässä on tekstiä, josta <span class="allcaps">osa on isolla kirjoitettu</span>.Mikäli muotoiltava teksti on kokonainen kappale (tai useampi sellainen), niin koodi näyttää tältä:<div class="allcaps">Tässä on isolla kirjoitettava tekstikappaleesi.</div>
- Miltä se näyttää:
-
Tässä on tavallista tekstiä. Tässä taas isolla kirjoitettua sellaista.
Tässä on kokonainen kappale kirjoitettuna kokonaan versaalilla. Revi siitä vähän sivistyssanaa saatana.
Small Caps (kaikki pienellä isolla saatana)
Small Capsiksi kutsutaan sitä, miltä tämän tekstin kolmannen tason otsikot näyttävät, eli esimerkiksi tuo ”Small Caps (kaikki pienellä isolla saatana)”. Eli pienet kirjaimet näyttävät samalta kuin isot mutta ovat vain… pienempiä. Se on jännää. Joissain fonteissa, kuten rakastamassamme Trajan Prossa, tämä on automaattista, koska se kuuluu fonttiin, mutta tällä tapaa mistä tahansa fontista saa samalla tavalla Small Capsiä. On toki vähemmän tyylikkäitä tapoja toteuttaa tämä, kuten *köh köh* Legioonan puheesta *köh köh* kävi ilmi.
- Kuinka sitä käytetään:
-
Mikäli muotoiltava teksti on kappaleen sisällä, koodi näyttää tältä:
Tässä on tekstiä, josta <span class="smallcaps">osa on Small Capsillä kirjoitettu</span>.Mikäli muotoiltava teksti on kokonainen kappale (tai useampi sellainen), niin koodi näyttää tältä:<div class="smallcaps">Tässä on Small Capsillä kirjoitettava tekstikappaleesi.</div>
- Miltä se näyttää:
-
Tässä on tavallista tekstiä. Tässä taas Small Capsillä kirjoitettua sellaista.
Tässä on kokonainen kappale kirjoitettuna Small Capsillä. Revi siitä, mutta vain varovasti, ettei mikään mene rikki.
Miljööotsikot
Ropeviesteissä on usein tapana mainita miljöö otsikkomaisessa rakenteessa viestin tai kohtauksen alussa (vaikka käytäntö on hiljalleen jossain määrin ehkäpä hiipumassa). Nämä otsikot laitetaan <h4>-tagin sisään. Käytännössä otsikko näyttää koodissa siis tältä:
Vinkki: jos tarvitset jostain kumman syystä muotoiluja otsikkoon, classit onnistuvat mihin tahansa tagiin. Voit esimerkiksi kirjoittaa…
… saadaksesi otsikon Syvän Naurun tyylillä.
Tasaukset
Jos haluat tasata tekstikappaleen tai kappaleita johonkin suuntaan, laita se divin sisään ja laita classiksi valintasi mukaan joko ”left”, ”right” tai ”center”. Oletuksena tekstillä on molempien reunojen tasaus. Eli miten käytännössä:
Vasemman reunan tasaus
Seuraavalla koodilla…
… saat seuraavanlaisen kappaleen:
Tässä on vasemmalle tasattu tekstikappaleesi.
Oikean reunan tasaus
Seuraavalla koodilla…
… saat seuraavanlaisen kappaleen:
Tässä on oikealle tasattu tekstikappaleesi.
Tekstin keskitys
Seuraavalla koodilla…
… saat seuraavanlaisen kappaleen:
Tässä on keskitetty tekstikappaleesi.
Palstoitus
Jos haluat tekstikappaleellesi tai tekstikappaleillesi palstoituksen (eli että ne jakautuvat useammalle palstalle), käytä classia ”twocolumns”, joka tekee tekstistä kaksipalstaista. Enempää palstoituksia ei ole, ellei joku sellaisia pyydä. Mitä siis käytännössä? Seuraavalla koodilla…
… saat aikaan seuraavanlaista muotoilua:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Muotoilujen yhdistäminen
Silmäni vuotavat verta, kun näen koodissa sellaisia yhdistelmiä kuin <b>- ja <i>-tageja sisäkkäin. Se vain näyttää tosi hirveältä. Jos siitä ei ole liikaa vaivaa (ja vaikka olisikin), voisitko mitenkään ystävällisesti käyttää vaikka näitä muotoiluja sen sijaan, että laittaisit sisäkkäin noita edellisiä?
Jos et lukenut aiempaa kappaletta HTML-classeistä, copypastaa vaikka esimerkki sinne tai tänne tai tuonne tai minne vain haluatkaan ja muokkaa tagin sisältö.
Kursivoitu ja lihavoitu teksti
Vaihtoehtoja on useampi. Periaatteessa voit soveltaa italic-classiä <b>-tagiin tai bold-classiä <i>-tagiin. Kolmas vaihtoehto on soveltaa molempia classejä <span>-tagiin. Jos halutaan muotoilla kokonainen kappale tai useita sellaisia, on tyylikkäintä soveltaa molempia classejä <div>-tagiin. Käytän vaihtoehdoista esimerkissäni sitä, jossa on span-tagi.
- Kuinka sitä käytetään:
-
Mikäli muotoiltava teksti on kappaleen sisällä, koodi näyttää tältä:
Tässä on tekstiä, josta <span class="italic bold">osa on sekä kursivoitu että lihavoitu</span>.Mikäli muotoiltava teksti on kokonainen kappale (tai useampi sellainen), niin koodi näyttää tältä:<div class="italic bold">Tässä on sekä kursivoitu että boldattu tekstikappale.</div>
- Miltä se näyttää:
-
Tässä on tavallista tekstiä. Tässä taas kursivoitua ja boldattua sellaista.
Tässä on tekstikappale, joka on sekä kursivoitu että lihavoitu.
Lihavoitu All Caps
Samaan tapaan helpointa on yhdistää kaksi classiä, bold ja allcaps. Esimerkki auttanee.
- Kuinka sitä käytetään:
-
Mikäli muotoiltava teksti on kappaleen sisällä, koodi näyttää tältä:
Tässä on tekstiä, josta <span class="bold allcaps">osa on boldattu ja kaiken lisäksi kirjoitettu vielä Caps Lock päällä</span>, hyvänen aika!Mikäli muotoiltava teksti on kokonainen kappale (tai useampi sellainen), niin koodi näyttää tältä:<div class="bold allcaps">Tässä on boldattu tekstikappale, jonka kirjoittajalta on lisäksi unohtunut Shift-näppäin pohjaan.</div>
- Miltä se näyttää:
-
Tässä on tavallista tekstiä. Tässä taas boldattua, ja näemmä Caps Lock jäi päälle. Surullista.
Tässä koko kappale tätä samaa paskaa. Vähän jo kyllästyttää…
Perusmuotoilut edistyneemmästä näkökulmasta (Uutta tekstiä!)
Jos et tosiaan lukenut classeistä, voit skipata suoraan seuraavaan kappaleeseen. Hei hei!
Kuten edellä huomattiin, meillä on jokaiselle perusmuotoilulle oma class. Näitä voi yhdistellä mihin tahansa muotoiluihin, joissa ei jo valmiiksi ole perusmuotoiluja (vaikka joissain kyllä on, kuten Syvän Naurun tyylissä lihavointi).
Jos tunnet HTML-kieltä edes vähän ja jonkin verran CSS-kuvauskieltä, voit määrätä tyylejä vapaasti ja puhtaasti style-attribuutin avulla. Esimerkiksi tekstin värin saa määrättyä seuraavasti:
Kyseisen tekstin väriksi on valittu heksadesimaaliarvoltaan FF00FF oleva sävy eli magenta. Tilalle voi risuaidan jälkeen heittää minkä tahansa väriarvon saadakseen kyseisen väristä tekstiä. Kukaan ei myöskään estä käyttämästä RGB- tai RGBA-värejä.
Classejä ja omia muotoiluja voi myös yhdistellä. Lähtökohtaisesti tagissa style-attribuutilla annetut käskyt ohittavat classien valmiit muotoilut. Jos esimerkiksi haluaa Feterra-tekstiä, jonka väri on magenta, näin se toimii:
Lopputulos on tämä: Tekstiä
Tarkemmin CSS-ominaisuuksista
style-attribuutissa voi käyttää mitä tahansa CSS-ominaisuutta. Alla lista niistä, mistä voi olla hyötyä ilman suurempaa CSS-kielen tuntemusta. Syntaksi on seuraava:
| Ominaisuus | Arvo | Esimerkki käytöstä |
|---|---|---|
| color | heksadesimaali-, rgb- tai rgba-arvo | color: #00FF00; |
| opacity | luku väliltä [0,1] | opacity: 0.5; |
| text-decoration | underline, overline, line-through | text-decoration: overline; |
| font-family | merkkijono (fontin nimi lainausmerkeissä)* | font-family: 'Comic Sans MS'; |
| font-size | px, em, rem, %, vw, vh, vmin, vmax** | font-size: 2em; |
| font-style | normal, italic, oblique | font-style: italic; |
| font-weight | normal, bold, bolder, lighter | font-weight: bold; |
Mietit kumminkin, miten saa kuvan leveämmäksi kuin palstan
Helppo homma, kun hallitsee CSS:n! Mieti ensin, paljonko haluat kuvan menevän yli. Jos esimerkiksi yli menevä osa vaikkapa 20% kummaltakin puolelta, niin leveydeksi halutaan silloin 100% + 2 · 20% = 140%. Lisätty leveys halutaan negatoida negatiivisilla marginaaleilla, eli leveyssuuntaisiksi marginaaleiksi asetetaan -20%. Käytännössä alla olevan koodin pitäisi nyt toimia:
Esimerkkinä annettakoon Hyvissä höyryissä -viestin otsikko:
Muuta huomioitavaa perusasioista
Lainausmerkit
On olemassa useammanlaisia lainausmerkkejä. Älä kuulosta noin yllättyneeltä. Ne lainausmerkit, joita näppäimistösi suoltaa, kun painat Shift-näppäin pohjassa näppäintä, jolla saa normaalisti tulostettua numeron kaksi (2), ovat ASCII-merkistökoodauksen lainausmerkit ("), joita ei kaunokirjallisessa tekstissä näe, koska ne lainausmerkit, joita oikeasti käytetään kaikessa, ovat niin sanotut kaarevat lainausmerkit (”). Asiassahan ei mitään ongelmaa ole, koska WordPress, rakas blogialustamme Klaanon-sivulla, automaattisesti muuntaa ASCII-lainausmerkit kaareviksi.
Minulla on kuitenkin jotain sanottavaa lainausmerkkien käytöstä. Kaarevia lainausmerkkejä on useammanlaisia. Englannin kielessä käytetään niin sanotusti aloittavia ja lopettavia lainausmerkkejä (“ ja ”), vaikka meillä suomen kielessä käytetään pelkkiä jälkimmäisiä sekä lainauksen alussa että lopussa. Jos kirjoitat Klaanonia Google Docs -(netti)sovelluksella, todennäköisesti se automaattisesti muuttaa kaikki lainausmerkkisi sekä aloittaviksi että lopettaviksi oikeissa kohdissa englannin mallin mukaisesti. Miksi tämä ei ole hyvä asia? Koska on epäjohdonmukaista, että ensinnäkin käytämme lainkaan aloittavia, koska niitä ei suomessa ole, ja toisekseen koska osassa viestejä (joita ei välttämättä Docsilla ole kirjoitettu) on pelkkiä sulkevia lainausmerkkejä. Esimerkiksi Microsoft Word ja muut samantasoiset ohjelmat osaavat yleensä muuntaa lainausmerkit suomenkielisessä tekstissä aivan oikeanlaisiksi, jolloin aloittavia lainausmerkkejä ei tekstiin ilmesty.
Siispä pyydän sinulta, rakas lukija, että kun kirjoitat Google Docsilla Klaanonia, kytke pois automaattinen lainausmerkkien korvaaminen. WordPress tekee sen puolestasi oikealla tavalla, Google väärällä tavalla. Kuinka tämä tapahtuu? No yksinkertaisesti: kun olet jossain (missä tahansa) dokumentissa Google Docsissa, valitse valikosta Tools ja sieltä Preferences. Sen jälkeen klikkaa rasti pois ruudusta kohdassa Use smart quotes. Tässä ohjeet englanninkieliselle valikolle, koska Googleni on englanniksi. Jos sinulla on suomeksi, löytänet vastaavat valikot ja nappulat ja muut.
Pitkät rivivälit (Uutta mullistavaa informaatiota!!!)
Näyttäisi siltä, että ihmiset ovat kuvitelleet, ettei tuo alla oleva teksti pidä paikkaansa ja koodi toimi. Mutta oikeasti oli kyse siitä, että kukaan ei ymmärtänyt, että minä itse käytän sellaisia välejä kuin haluan enkä sellaisia välejä kuin joku muu haluaa!
Nyt meillä on uusi tapa tehdä pitkiä rivivälejä. Jos tämä ei toimi, niin ei mikään. Kun haluat pitemmän välin tekstikappaleiden väliin, tunge sinne div-tagi, jonka class on rvN, missä N on luonnollinen luku 1:stä 21:een. Siis käytännössä jos haluat vähän pienemmän ison välin, kirjoita:
Jos taas haluat ihan hemmetin ison välin, kirjoita:
Ja kuten sanottu, pienin tavallista suurempi väli on rv1 ja suurin väli on rv21. Jos jostain syystä on tarve vielä isommille, alla lukee ohjeet siihen (sillä alla oleva toimii).
Useaan otteeseen olen saanut kuulla siitä, että enterin hakkaaminen ei tuota yhtä rivinvaihtoa enempää väliä kahden tekstikappaleen väliin. Olen yrittänyt korjata ongelman <br />-tagilla, mutta ihmiset ovat näyttäneet keksineen, että jos laittaa riville tyhjän tagin, se käy tyhjästä rivistä. Pyydän, että käytät tällaista hulluutta vasta viimeisenä keinona, jos mikään muu ei auta.
No minkä pitäisi auttaa? Minäpä kerron. Tässä sinulle suoraan se koodi.
Nyt vain korvaat tuon magentanvärisen tekstin ”haluamasi määrä pikseleitä tähän” haluamallasi määrällä pikseleitä. Esimerkiksi jos haluat kahdensadan pikselin korkuisen rivinvaihdon, kirjoita siihen tilalle ”200px” (toki ilman lainausmerkkejä). Yksikkö (px) on olennainen, ilman sitä ei toimi. Eli käytännössä kahdensadan pikselin rivinvaihto näyttää koodissa tältä:
Jos tuo ei auta, niin spämmää sitten niitä saamarin tyhjiä tageja. Luovutan siinä vaiheessa.
Mitä ehdottomasti ei saa käyttää
Yhdeksänkymmentäluvulla oli hyväksyttävää käyttää HTML-tagia <font>. Ei ole enää. Älä käytä pls. Minä kuolen henkisesti, aina kun näen sellaisen. Samoin Neny, jos pääsee näkemään sellaisen. Älä tapa meitä. Pyydän.
Toinen samaa settiä oleva on <center>. Se ei ole hyvä tekstin keskittämiseen. Jos haluat keskittää tekstiä, käytä aiemmin mainitsemaani tapaa.
Sitten vielä sellainen asia, että div ei saa olla spanin sisällä. Span saa olla divin sisällä ja usein onkin. HTML-kielessä tekstikappaleet ovat <p>-tagien sisällä. WordPress luonnollisestikin laittaa ne sinne automaattisesti, siksi kappalejako enteriä hakkaamalla toimii. Syy siihen, miksi spanilla ei voi muotoilla kokonaisia kappaleita, on se, että p ei saa olla spanin sisällä. Span voi olla p:n sisällä ja usein onkin.
Periaatteessa aina, kun käytät diviä, saat rakenteen, jossa on p-tageja divin sisällä. Tämä on juuri se, mitä halutaan: ihan tarkoituksellista ja sallittua ja validia HTML5:ttä. Kiitän yhteistyöstä.
Valmiiksi määritellyt erikoistyylit
Klaanonissa on paljon valmiiksi määriteltyjä HTML-classejä, joilla muotoillaan hyvin spesifisiin tilanteisiin sopivaa tekstiä, kuten tiettyjen hahmojen puhetta. Jos et aio ikinä käyttää niitä, voit varmaan skipata viimeiseen kappaleeseen.
Tässä on lista kaikista classeistä.
- bold
- italic
- allcaps
- smallcaps
- left
- right
- center
- twocolumns
- feterra
- hexatoran
- matoran
- mielitietty
- nauru
- polttari
- static
- vahki
Neljä ensimmäistä ovat perusmuotoilut. Kolme seuraavaa ovat tasaukset ja niistä seuraava palstoitus. Loput ovat juuri erikoismuotoiluja, joilla merkitään esimerkiksi tiettyjen erikoishahmojen puhetta. Lisää informaatiota näistä tyyleistä löydät fonttisivultamme kohdasta Valmiiksi määritellyt tyylit.
Käytä classiä kirjoittamalla…
… jos haluat muotoilla tekstikappaleen sisällä. Kokonaisten kappaleiden muotoiluun kirjoita:
Muista, että voit laittaa useamman classin samalle tagille. Ne täytyy vain erottaa toisistaan välilyönnein. Kaikki classit kirjoitetaan samaan class-attribuuttiin, eikä tagilla voi olla useampaan kertaan samaa attribuuttia. Siis ei näin…
… vaan näin:
Käytännön esimerkki???
Väännetäänpä nyt vielä vähän rautalangasta. Jos haluat esimerkiksi Polttouhrin puhetta kokonaisen kappaleen verran, kirjoita näin:
Lopputulos on tämä:
Polttouhrin puhetta.
Ongelmatilanteessa ota yhteyttä neuvontaan
Minulle nämä asiat ovat helppoja ja lähes itsestään selviä, mutta teille, rakkaat klaanilaiset, useimmillekaan, ne eivät sitä ole. Siispä jos koet suuria vaikeuksia tai sinulla on isoja ongelmia, ota yhteyttä. Autan usein mielelläni näiden(kin) asioiden kanssa painivaa klaanilaisparkaa.
No miten ne saatanan tubesoittimet nyt toimivat?
Erinomainen kysymys! Tätä nykyä riittää, kun heität linkin YouTube-videoon siihen kohtaan tekstiä, mihin haluat soittimesi. Näin yksinkertaista. WordPress on hieman fiksuuntunut asian suhteen, kun siitä kerran on tehty näinkin helppoa. Siis kohtaan, johon haluat soittimen, copypasteta YouTube-linkki. Se sinun pitäisi osata, kuka tahansa kirjoittajista oletkaan, rakas lukijani! Jos haluat videolle erikoismuotoiluja, ota yhteyttä. Teen tilaustyönä. Oletuksena jokainen YouTube-videoupotus näyttää musiikkisoittimelta.
Sellainen asia vielä. Että koska YouTube poistelee videoita tekijänoikeussyistä, meiltä katoaa usein tieto siitä, mikä kappale poistetun videon kohdalla oli, sillä ei kukaan oikeasti enää vuoden päästä muista, mitä biisiä käytti viestissä x. Siispä minulla on keino muistaa! Kirjoita ennen YouTube-linkkiä seuraavanlainen pätkä tekstiä:
Luonnollisestikin korvaat tekstit ”Biisin esittäjän nimi” ja ”Biisin nimi” oikealla esittäjän nimellä ja oikealla kappaleen nimellä.
Tällaiset tekstit (niin sanotut kommentit), jotka on heitetty tagien <!-- ja --> sisään, eivät näy itse viestissä. Selain ei tulosta niitä. Ne näkyvät vain ja ainoastaan lähdekoodissa, joten pystymme edelleen näkemään, mitä siinä lukee, katsomalla koodia. Ja kun muokkaat viestiä, näet tekstin ja pystyt korvaamaan hajonneen soittimen uudella! Nerokasta, eikö olekin? Ongelmamme ratkenneet, eiköstä.
Vaihtoehtoisten musiikinupotustapojen kanssa painiessasi suosittelen ottamaan yhteyttä minuun, koska se voi mennä hassuksi touhuksi.