torstai 23. tammikuuta 2014

Hieno fontti postauksen otsikkoon

Monessa blogissa ulkoasua on piristetty ja muodinmukaistettu kirjoittamalla postausten otsikot vähän fiinimmällä tai erikoisemmalla fontilla. Eritoten kaikenlaiset lennokkaaseen käsialaan perustuvat fontit ovat nyt pinnalla. Tekisikö sinunkin mieli piristää blogisi ilmettä nätillä tai omaperäisellä tekstillä? Tässäpä siis helppo ohje fontin lisäämiseen.

Fontinmetsästys käynnistyy tällä kertaa Googlen fonttitarjonnasta. Sieltä löydät pökerryttävän määrän erilaisia fontteja. Voit selailla niitä mieltymystesi mukaan sivulla olevia hakutoimintoja hyödyntäen. Pidä kuitenkin mielessäsi, että otsikon fontin tulisi siis olla luettavissa ja mielellään hieman leipätekstiä suuremmassa koossa (ne px:t siellä valikossa). Otsikon fonttia etsiessä kannattaa yläreunasta valita näytetekstin pituudeksi sentence, sillä se antaa parhaimman kuvan siitä, miltä fontti tositilanteessa tulisi näyttämään (taitaakin olla oletusasetuksena tuo lause siellä).

Huomioi vielä valintaa tehdessäsi, että vaikka jotkut koukerot ovat omaan silmään niin ihanan näköisiä ja itse tiedät vallan hyvin mitä otsikkoon tuli raapustettua, kannattaa kuitenkin miettiä ensisijaisesti lukijaa ja sitä, ottaako hän niistä hieroglyfeistä mitään tolkkua. Otsikko on tekstin kannalta äärettömän oleellinen, joten sen sisäistämistä ei kannata tehdä kovin vaikeaksi.


Kun löydät potentiaalisen fontin, klikkaat oikeasta reunasta fontin kohdalta Add to collection. Voit kerätä mielenkiintoisia fontteja talteen vähän enemmänkin. Keräilykokoelmasi karttuu siellä sivun alareunassa ja suunta sinne, kun olet saattanut etsinnät päätökseen. Klikkaa oikealta alhaalta Use ja pääset jo lähemmäs loppuhuipennosta.

Huomaa, että jos et halua kerätä montaa fonttia talteen, vaan löysit heti sen ainoan ja oikean, Add to collection -nappulasta hieman vasemmalle on pieni Quick-use -painike, jota voit klikata.

Saat valita, minkä version haluamastasi fontista otat: lihavoitua vai jotain muuta tarjolla olevaa? Voit tietysti valita kaikki mutta niin kuin sivulla varoitellaankin, monen fontin liittäminen blogiisi voi hidastaa sen latausaikaa (ja näyttääkin varmaan sekavalta).


Samaiselta sivulta alempaa löytyvät kohdat 3 ja 4, joita tarvitset seuraavaksi. Kohdan 3 koodi tulisi kopioida vaikkapa jonnekin notepadiin hetkeksi, jotta voit lisätä siihen yhden merkin: ennen viimeistä sulkua > , lisää yksi kenoviiva /. Lopun pitäisi siis näyttää tältä: /css'/>

Tähän väliin viimeistään teet sitten varmuuskopioinnin ennen kuin suuntaat Bloggerissa Malliin ja Muokkaa HTML-koodia. Etsit koodista kohdan <head>, joka on siinä ihan ensimmäisillä riveillä erittäin suurella todennäköisyydellä. Laitat tämän jälkeen omalle rivilleen Googlelta saaman koodin, johon olet juuri lisännyt sen yhden kenoviivan. Tallenna.

Otsikkoon fontin saat helposti lisäämällä kohdassa 4 annetun CSS:n pätkän ja hieman muuta blogiisi. Tällä kertaa menet Malli -> Mukauta -> Lisäasetukset -> lisää CSS. Tähän boksiin, ihan omalle rivilleen laitat seuraavat tiedot:

h3.post-title {valitsemasi fontin koodi kohdassa 4}

Tiiraile esikatselu ja klikkaa Käytä blogissa. Esimerkiksi minun testiotsikkoni koodi näytti tältä:

h3.post-title {font-family: 'Mountains of Christmas', cursive;}

Ja in action tältä:




Eikös ollutkin helppoa! Sovella nyt tai myöhemmin, jos siltä tuntuu. Toivottavasti osaatte valikoida vinkeistäni ne teitä eniten kiinnostavat ja blogianne parhaiten palvelevat tapaukset. Mietiskelin juuri, että jos joku on lähtenyt ihan jokaiseen vinkkaukseeni mukaan, niin siellä on varmaan aikamoinen sirkus meneillään blogin puolella.

28 kommenttia:

  1. Hajosin esimerkkipostaukselle :D

    VastaaPoista
  2. Itse toivon, että tähän vinkkiin tarttuu mahdollisimman harvat. Taiteelliset koukerot otsikoissa on äärimmäisen etovia. Helppolukuisuus on rautaa!
    Mutta kiitos runsaista ohjeistasi, omaan blogiinikin on tullut monta hyödyllistä kikkaa kopioitua :)

    VastaaPoista
    Vastaukset
    1. Koukerot on vaikeita mutta pieni twisti toimii kyllä joissain tapauksissa. Ymmärrän kyllä, että moni sekoaa tuon tarjonnan parissa ja nappaa ne erikoisimmat.

      Poista
  3. Kiitos tästä blogista! :) Täältä olen saanut paljon hyviä vinkkejä omaan blogiin!

    VastaaPoista
  4. Kiitos tästä mahtavasta blogista! Googlailin tietenkin ohjeita blogin bannerin tekoon ja tänne sivuille minä eksyin! Sain ohjeittesi avulla tehtyä upean bannerin ja varmasti jatkossakin löydän blogistasi vinkkejä omani kehittämiseen. :)

    http://pudotus.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Tänne juu eksyy aika moni bannerintekijä :) Tervetuloa!

      Poista
  5. Kiitos kun jaat näitä vinkkejä. Täältä aina katson, jos haluan tietää jotain blogiin liittyvää.

    VastaaPoista
    Vastaukset
    1. Tämä on vähän kuin joku hakuteos kohta!

      Poista
  6. Tämä oli asia jota juuri yritin selvittää, joten kiitokset taas kerran! Aloittelijana olen saanut täältä todella paljon apua, mutta yksi kysymys taas olisi: Miten saisin blogini ylätunnisteesta pois tuon sinertävän taustan. Kuva menee sinertäväksi aina kun tallennan sen, esikatseluvaiheessa näyttää vielä ihan hyvälle. Olen kokeillut sekä valkoista että läpinäkyvää pohjaa, mutta aina vaan sinertää...

    http://happy-heels.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Ole hyvä. Minä en nähnyt mitään sinertävää taustaa missää, saitko korjattua?

      Poista
  7. Kiitos tästä blogista, teet suuren palveluksen kaikille muille blogien kirjoittelijoille! Voisit julkaista "Ohjeita bloggaajille" kirjan jopa ;)
    mutta joo,asiaan. Blogini oli pitkään tauolla ja nyt kun muokkailen ulkoasua, en saa enää mitenkään muutettua tuota otsikon fonttia. Enää en edes muista miten sen sinne olen joskus saanut muutettua, kun enää ei mitään muutoksia hyväksy. Kelpaisi ihan joku niistä valmiista fonteista jota bloggerin lisäasetuksissa on. Vaikka mitä sieltä yritän muuttaa, välilehtien, otsikon tms tekstiä, ei se muutu mihinkään. Mikä mahtaa olla vialla? Nyt oli pakko pyytää apua kun olen tätä koittanut ratkaista useita päiviä.
    Toinen asia mitä mietin on, että voiko tuota välilehtipalkkia muokata mitenkään oman mielen , vai tuleeko se aina sillä asetuksella automaattisesti mikä sisältyy blogin "malliin"?

    VastaaPoista
    Vastaukset
    1. Noista välilehdistä löytyy asiaa tästä postauksesta. En kyllä tiedä, onnistuuko niidenkään muokkaus, jos nuo muutkaan fontit eivät muutu. Onko siellä CSS:ssä mitään sellaista, joka voisi vaikuttaa fontteihin. Sitten voi etsiä HTML-koodista niitä otsikoita, ovat varmaan h3 -merkkisiä. Josko sieltä voisi muuttaa niitä. Mutta kannattaa tehdä se varmuuskopio ensin. Tarkalleen en osaa tähän hätään sanoa, missä voisi olla vika.

      Poista
  8. OK, kiitos vastauksestasi! Vielä yksi kysymys johon en ole löytänyt vastausta. Saako tuota välilehtien kehystä poistettua\muutettua mitenkään?

    VastaaPoista
    Vastaukset
    1. Oletkin saanut hyvän näköiset välilehdet sinne. Sieltä samasta paikkaa mutta välilehtien tausta -kohdasta voi muuttaa niitä. Transparentilla ei näy mitään mutta olet varmaan jo löytänyt sinne, niin hyvältä näytti :)

      Poista
  9. Kiitos tästä, auttoi suunnattomasti. Osaatko vielä kertoa miten tuon fontin kokoa voi vaihtaa? :-)

    VastaaPoista
  10. edit//Hölmö minä, kokoa pystyi muuttamaan hyvin yksinkertaisesti.. Kiitos kuitenkin tästä tutosta!

    VastaaPoista
  11. Käääks! Mä tein kaiken täysin näiden ohjeiden mukaan, mutta ei toimi fontti... Ja nyt ei sitten toimi mikään niistä bloggerin fonteistakaan :-/ Esikatselussa tulee se uusi, ladattu, fontti yhäkin, mutta vaikka tallennan niin ei toimi itse blogissa. Nyt en enää löydä tuota koodia mistään että saisin sen poistettua... Hjelp!

    http://maailma-on-tehty-meita-varten.blogspot.fi

    VastaaPoista
  12. EDIT: Sain kun sainkin pienien säätöjen jälkeen palautettua otsikon ennalleen. Yhäkään en siis saanut tota uutta fonttia tosin lisättyä... Haluisin sen kovasti kuitenkin saada! Olisin tosi kiitollinen jos pystyisit jotenkin opastamaan tämmöstä mämmikouraa... :-) Voit laittaa vaikka viestiä mun meiliin (jos et tässä kommenteissa halua alkaa ratkomaan...): tuulimaailmalla(a)gmail.com

    KIITOS!

    VastaaPoista
    Vastaukset
    1. Huh, hyvä! Voin laittaa sähköpostia piakkoin asiasta, jos pystyisin auttamaan. Olen nyt maailman huonoimman netin varassa ja töitä on kasaantunut, joten en ihan heti pääse viestittelemään. Mutta olet to do -listallani ja palaan pian :)

      Poista
  13. Minulla on sama ongelma kun Tuulilla. fontit näkyy hyvin Bloggerin mallin suunnittelutyökalussa,mutta kun tallennan ja menen sivulle niin ei näy fontit. Mitä teen?

    VastaaPoista
    Vastaukset
    1. En osaa valitettavasti sanoa tähän mitään ohjetta. Kannattaa kokeilla useampia fontteja tietenkin.

      Poista
  14. Olisiko muita sivuja jostai voisi saada samanlaisia linkkejä fontteihin?

    VastaaPoista
    Vastaukset
    1. Itse ei ole tullut muita sivuja käytettyä. Fontteja löytyy paljonkin netistä mutta en sitten tiedä, miten niitä tuetaan eli miten ne näkyvät blogissa. Tuo postauksessa esitelty on turvallinen vaihtoehto.

      Poista
  15. Kiitos tästä! Minulla onvain yksi ongelma...valitsin fontiksi tuon Amaticin, ja se muuntaa otsikossa olevan kysymysmerkin R-merkiksi..?? Muutin eräässäkin postauksessa olevan kysymysmerkinnyt pisteiksi kun en jaksa alkaa taistelemaan, osaatko neuvoa miksi se muuntaa kyssärimerkin R-merkiksi eli tavaramerkiksi? :D

    VastaaPoista
    Vastaukset
    1. No onpas kiva ongelma! En valitettavasti tiedä, miten sen saisi korjattua. Ehkä ihan suosiolla kokeilet toista kivaa fonttia?

      Poista