tiistai 23. joulukuuta 2014

Blogitekstin rivivälin muuttaminen

Bloggerin tekstityökalussa ei pysty muuttamaan riviväliä, mutta onneksi niiden muuttaminen onnistuu ystävämme CSS:n avulla. Jos et ole tyytyväinen blogitekstisi riviväliin, mene Malli -> Mukauta -> Lisäasetukset -> Lisää alla oleva koodi CSS:ään:

.post-body {
line-height: 1.6;
}


Line-heightin jälkeistä arvoa 1.6 voi muuttaa - mitä suurempi arvo, sitä suuremmat välit.

13 kommenttia:

  1. Voisitko auttaa kuinka saada blogissa teksti ja kuvat tasattua? Eli miten teksti alkaisi ja päättyisi samaan kohtaan kuin kuvan reunat, eikä menisi yli :)

    VastaaPoista
    Vastaukset
    1. Moi Ano! Tää on aina vähän hankalaa, jos omaa blogia ei linkata -> en näe, mistä ongelma johtuu, sillä yhteen ongelmaan voi johtaa monia erilaisia syitä. Kerron nyt kuitenkin ehkä niitä yleisimpiä ko. ongelman ratkaisuja. En ihan ymmärrä, mitä tarkoitat tuolla, etti teksti päättyisi samaan kohtaan kuin kuvan reunat :-D. Se nimittäin saattaisi näyttää hassulta.

      Okei, tarkista ihan ekana, ettei kuvissa ole kehyksiä. Kehykset voi poistaa tällä koodilla (malli -> mukauta -> lisäasetukset -> lisää css:ään alla oleva koodi):
      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {
      padding: 0px;
      background: #ffffff;
      border: 0px solid #eeeeee;
      -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
      -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
      box-shadow: 1px 1px 1px rgba(0, 0, 0, .0);
      }

      Toinen auttava juttu on seuraava: sun pitää selvittää blogisi kuvien leveys esimerkiksi paintilla, eli tietää kuvien leveyden px-arvot (pikseliarvot). Sen saa tehtyä niin, että kopioit blogistasi kuvan ja liität sen paintiin. Sitten painat "muuta kokoa" ja valitset "kuvapikselit". Sieltä näet pikseliluvun leveyden kohdalta. Kun tiedät leveyden, voit määrittää manuaalisesti myös blogitekstiesi leveyden alla olevalla koodilla:
      .post-body {
      width: 630px;
      }
      Tuo luku 630 kertoo blogitekstin leveyden. Voit myös olla selvittämättä blogisi kuvien leveyttä ja testata lukua 630 muuttamalla, mikä olisi hyvä arvo kuvien leveyteen verrattuna.

      Jos nuo kaksi juttua ei auta, kokeiles tätä seuraavaa koodia, jolla saat siirrettyä ainoastaan blogitekstin kuvaa:

      .post-body img {
      margin-left: -30px;
      }

      Tuota margin-leftin jälkeistä arvoa -30 voi muuttaa suuntaan jos toiseen. Se voi olla esim. 13 tai -58.

      Ai niin, jos halusit ns. tasata tekstiä, niin se onnistuu tällä koodilla (eli lisää se siis CSS:ään):
      .post-body {
      text-align: justify;
      width: 630px;
      }

      Tuon rivin width: 630px; voit poistaa, jos haluat - se määrittää taas blogitekstin leveyttä, ja jos se on mielestäsi sopiva, kohta ko. koodissa on ihan turha.

      Toivottavasti tästä oli apua! :)

      Poista
  2. Moi Ilona :) Mä arvostan sitä että jaksat auttaa muita blogin ulkoasuun liittyvissä asioissa, ja itselleni ainakin blogistasi on ollut ihan älyttömän suuri apu! Kiitos siitä♥

    Nyt mulla on kuitenkin tällänen pikkunen onglema minkä kanssa oon tapellu jo pitkään ja ajattelin taas kääntyä sinun puoleen, kun ei omat aivonystyrät riitä tätä pulmaa ratkaisemaan.

    Eli mun blogin sivupalkissa on noi sivut eli noi "etusviu" "venla" "ratsastus" ja ne levenee aina kun hiiren laittaa niiden päälle.
    Haluaisin sen efektin pois. Haluaisin sen efektin pois myös tageista ja kaikista mahdollisista linkeistä mitkä löytyy mun sivupalkista. MUTTA haluaisin että se efekti jäisi silti mun postauksen otsikoihin.

    Sitten toinen onglema mikä liittyy myös samaan asiaan eli noihin sivuihin, eli kun laitan hiiren niiden päälle niin niiden eteen tulee tollanen kuvio, miten sen saisi pois? Oon joskus ammosina aikoina laittanu sen jonnekkin html-koodien kätköihin, enkä enään todellakaan muista missä siellä se on, enkä osaa sitä pois ottaa. :/

    Help me please!


    http://venlaway.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Moi wenlamaria ja älyttömän suuret kiitokset kommentistasi<3:)!! Ihan sanattomaksi vetää!:')

      ONGELMA 1 - Sivujen ja sivupalkin tekstilinkkien leveneminen hiiren viedessä päälle
      Lisää tää koodit blogisi CSS:ään:
      .sidebar a:hover{
      letter-spacing: 0px;
      }

      ONGELMA 2 - Kun hiiren vie sivupalkissasi olevien sivujen päälle, ilmestyy tekstin vasemmalle puolelle sydän
      Sun ongelmasi nro 2 oli mulle täysin tuntematon, koskaan tavannutkaan tuollaista :D Olin melko varma, etten ongelmaasi osaisi keksiä ratkaisua, mutta onneksi kovasti yritin, koska lopulta löysin siihen ratkaisun selaamalla blogisi HTML-koodia - suuret kiitokset, että linkkasit kommenttiin blogisi, sillä muuten en todellakaan olisi osannut ratkaista ongelmaa :-D! Eli lisää blogisi CSS:ään alla oleva koodi:
      #PageList1 a:hover:before {
      content: none;
      left: 0;
      text-decoration:none;
      color: #741b47;
      }

      Jos mallin suunnittelutyökalun CSS-osuus ei toimi, poista tämä koodi blogisi HTML:stä:
      #PageList1 a:before {
      content: "\2661";
      left: 0;
      position: absolute;
      color: transparent;
      }
      #PageList1 a:hover:before {
      content: "\2661";
      left: 0;
      text-decoration:none;
      color: #741b47;
      }

      Muista kuitenkin esikatsella ennen kuin tallennat HTML-koodin, sillä jos tuo ei jostain syystä toimi, voit menettää koko blogisi, jolloin ongelmanratkaisu on monta astetta vaikeampaa, sillä itse en ole oikeastaan HTML-koodin periaatteisiin perehtynyt :D

      Poista
  3. Moi!

    Mä en oo löytänyt mistään, että miten harventaa sivujen välit. Eli siis kun mun blogissa sivut on keskellä aika tiiviisti, niin saako niitä välejä harvennettua, että sivupalkki olisi ns. koko bannerin mittainen? Niitä saa silleen tavallaan harvenettua kun menee sinne välilehtien tekstiin, ja sieltä kun muuttaa fontin kokoa, niin silloin ne kyllä menee laajemmalle alueelle, mutten haluaisi kuitenkaan muuttaa fontin kokoa.. Eli onko fontin koon muuttaminen ainoa keino?
    http://tippsuu.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Heippa Tiia! Tää olikin hankala juttu, mutta luulen, että lopputulos on toimiva! Lisääppäs seuraavat koodit blogisi CSS:ään:

      .tabs-inner .PageList li a {
      margin-right:60px;
      }

      .tabs-inner .PageList li a {
      margin-left: 60px;
      }

      Molemmista koodeista voi muokata tuota lukua 60. Lukujen ei tarvitse olla samoja - toinen voi olla esim. 10 ja toinen 55. Kokeilemalla selviää, mikä lukuyhdistelmä sopii parhaiten! :)

      Poista
    2. Kiitos paljon! Ja kyllä ne toimi! :)))

      Poista
  4. Moi. Mulla on semmonen ongelma että haluisin kuvani blogiin isompana kuin erittäin suuri.

    Mulla oli toinenkin ongelma kun Haluaisin otsikon ja tekstin väliin semmoisen mustan viivan mikä eroittaa otsikon tekstin toisistaan, vaikka minulla on nyt se että se viiva tulee siihen niin haluisin sen niinkun koko postauksen levyisesti koko ajaksi. Osaisitko auttaa?

    Oon lukenu sun blogia tänään koko ajan etsien ongelmiini apuja, onneksi on löytynyt <3

    iris-bloggaa.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Moi Iris! Tässä vastaukset kysymyksiisi :) + kiitos paljon<3

      ONGELMA 1 ~ KUVIEN KOKO ISOMMAKSI
      Tän voi hoitaa monella tavalla. Voit joko muuttaa postauksen kuviesi koon ennen niiden lisäämistä postaukseen paintissa. Sitten, kun lataat kuvat postaukseesi, klikkaat kuvaa ja painat "alkuperäinen koko".
      Toinen tapa on lisätä blogiisi alla oleva koodi:
      .post-body img {
      width: 700px;
      height: auto;
      }

      Tuota widthin jälkeistä arvoa 700 voi muuttaa :-) Tuo koodi tekee siis jokaisen postauksesi jokaisesta kuvasta samanlevyiset. Vanhoista kuvistasi voi siis tulla epäselviä tai ns. rakeisia, jos niiden kuvien alkuperäinen koko on ollut pienempi kuin koodissa käyttämäsi arvo.

      ONGELMA 2 ~ POSTAUKSEN OTSIKON JA POSTAUKSEN TEKSTIN VÄLIIN VIIVA
      Lisää tämä koodi CSS:ään:
      .post-title{
      border-bottom: 1px #c9c9c9 solid;
      }

      Border-bottomin jälkeisistä arvoista:
      1px - se tarkoittaa viivan paksuutta. Kyseinen pikseliluku voisi olla esim. 3px myös.
      #c9c9c9 - kertoo viivan värin. Heksakoodeja löytyy täältä: http://html-color-codes.info/
      Solid - se kertoo ns. viivan tyylin :D muita tyylejä on esimerkiksi dashed (=katkoviiva), double (=ns. tuplasolid eli tuplaviiva) ja dotted (palloja).

      Kyseessä on siis border-koodi. Yritän saada tehtyä bordereista tässä joululomalla postausta, sillä se on tosi kysytty aihe :)

      Toivottavasti tästä oli apua!

      Poista
    2. Kiitos, auttoi suunnattomasti <3

      Poista
  5. Kiitos sivustosta. Ongelmani oli tekstin koko ja riviväli..

    VastaaPoista
  6. Moikka!

    Oon etsinyt nyt jonkin aikaa vinkkejä erääseen ongelmaan ja saanut osan jo alta pois, mutta tämä yksi on sellainen johon en keksi ratkaisua. Elikkä kyseessä rivivälit sivuilla (Ei siis tekstissä)ja tarkemmin siis vain yhdellä sivulla. Aloin päivittämään siis blogia ja muokkasin sivujen tekstejä ja nyt tuolla yhdellä sivulla nuo rivivälit on reilusti suuremmat (mun mielestä kamalat) ja muilla sivuilla ne on ok. Mikä tolla yhdellä sivulla on pielessä kun rivivälit heittää noin? Kyseessä siis "koirat"-välilehti.

    aranayan.blogspot.fi

    VastaaPoista

MUISTA LINKATA BLOGISI !! -> näin ongelman ratkominen / auttaminen osaltani onnistuu parhaalla mahdollisella tavalla! :-)