keskiviikko 2. kesäkuuta 2021

Yläbannerikuvan muokkaaminen oikeaan kokoon

 

Moni on jo huomannut Bloggerin tehneet muutoksia, jotka aiheuttavat päänvaivaa. Omalla kohdalla näin tapahtua vaihtaessani yläbannerin kuvaa. Vaikka kuinka tutkin, kokeilin ja säädin, en saanut kuvaa oikean kokoiseksi. Se jysähti vasempaan ylälaitaan minikokoisena. Siitäkin huolimatta, että käytin ennen haluamallani tavalla näkynyttä ja asettunutta kuvaa.

Harmitti ja kiukutti suunnattomasti. Olisin tietenkin voinut palauttaa varmuuskopioidun blogin, mutta silloin olisin menettänyt ne muutamat postaukset, jotka olen tehnyt varmuuskopion jälkeen. Eikä sekään olisi tuonut tilanteeseen helpotusta jatkon kannalta.

Kerroin ongelmastani blogissa, jolloin jälleen kerran löytyi ihminen, joka pyyteettömästi halusi auttaa. Otin häneen yhteyttä sähköpostilla ja sain selkeän ohjeen, jonka perusteella ongelmani ratkesi. Sovimme auttajani kanssa, että julkaisen ohjeen blogissani helpottaakseni muita samassa tilanteessa olevia.


Tässä jutussa teille jakamani ohjeet antoi M.T. Ainasoja saman nimisestä blogista. Pitkän linjan tietotekniikka-ammattilaisena toiminut Ukkokultani yritti minua jeesata. Blogger-maailma ei ole hänelle tuttu ja niinpä ajauduimme väärille raiteille.

Lämmin kiitos tälläkin foorumilla MT:lle avusta ja erittäin selkeistä ohjeista. Pudotit kiven sydämeltäni.

 
BANNERIKUVAN KOON SÄÄTÄMINEN
CSS-koodin lisäämisen pitäisi onnistua näin:

CSS:ää lisätäkseen ei tarvitse (tai ei ainakaan aiemmassa versiossa tarvinut) mennä muokkaamaan blogin koko koodinäkymää, vaan sitä pystyi lisäämään ulkoasun muokkausvalikoiden kautta. Nykysysteemissäkin se näköjään löytyy, mutta vähän vaikeammin:

 
Ota ensin varmuuskopio:

Avaa Bloggerin hallintapaneelista "Teema". Avaa alasvetovalikko  klikkaamalla oranssin "Mukauta"-painikkeen oikeassa reunassa olevaa nuolisymbolia. Valitse alasvetovalikoista: "Varmuuskopioi". Tallenna varmuuskopio.

 



Samasta "Teema"-valikosta: avaa ulkoasun muokkaustila klikkaamalla oranssia "Mukauta"-painiketta (nimenomaan oranssia Mukauta-sanaa, eikä sen oikean puolen nuolta tai nuolella avautuvaa valikkoa). Tällöin vasempaan reunaan avautuu uusi valikko.

Selaa vasemman reunan valikkoa alas ja avaa "Lisäasetukset"-valikko.


"Lisäasetukset"-valikon otsikon alla heti ensimmäisenä olevasta alasvetovalikosta (jossa ensimmäisenä vaihtoehtona minulla näkyy valittuna "Sivun teksti"), löytyy viimeisenä kohtana "Lisää CSS" (eli vieritä kuvassa näkyviä vaihtoehtoja rohkeasti viimeiseen saakka).

  

Kun klikkaat "Lisää CSS", tulee esiin kirjoituskenttä, jossa lukee harmaalla (näkyy tässä kuvakaappauksessa lihavoituna) "Lisää yksilöity CSS". Kopioi siihen alla näkyvä koodinpätkä.
 

img#Header1_headerimg {
    width
: 1200px !important;
    height
: auto !important;

}

 

Oikealla näkyvässä esikatselussa pitäisi heti näkyä muutos. Jos se ei näy, koodi ei todennäköisesti toimi jostain syystä.

Jos se toimii, muista tallentaa (näytön oikeassa alakulmassa näkyy tallennus-painike).

Jos tämä ei toimi, CSS-koodi pitää ehkä lisätä HTML-muokkausnäkymässä, mutta kokeile ensin tätä.

 


Näiden ohjeiden avulla onnistuin bannerikuvani kanssa. Olen tallentanut kuvani kokoon 1200x700px. Kuvan oikeasta reunasta osa jäi puuttumaan, joten muutin koodiin 1200 px:n tilalle 1100px. 

Olen tehnyt yläbannerin kollaasikuvan vuosi sitten. Kuvani rakeisuus johtuu luultavasti huonolaatuisista alkuperäiskuvista, mutta saattaa vaatia muutakin säätöä. Pääasia, että ongelma ratkesi. Pätevistä ohjeista on sekin hyöty, että jatkossa löydän helpommin paikan, jossa on mahdollista tehdä säätöjä.  

Toivottavasti tästä ohjeesta on apua teille muillekin, jotka painitte yläbannerikuvan kanssa. Jälleen kerren saimme huomata, kuinka asiat kannattaa ottaa esille ja kysyä auliisti neuvoa. Jaettu tieto on isompi ilo - ainakin minun mielestäni.


8 kommenttia:

  1. Ahaa, vai on tämäkin muuttunut hankalammaksi. Enpä ole vaihtanut bannerikuvaa vuosiin. Minulla on supersimppeli blogipohja, sellainen oli olemassa silloin 2007, kun aloitin, että siinä ei ole juuri mitään valmista tavaraa. Onneksi. Olen kuullut, että kaikenlaisten valmiiden blogipohjien kanssa voi olla aika hankalaa.
    Ihanaa, että apu löytyi!

    VastaaPoista
    Vastaukset
    1. Sehän se näissä muutoksissa on hankalaa, että päällisin puolin kaikki saattaa näyttää muuten samanlaisilta, kunhan formaattia ja näkymää on muutettu. Mutta sitten asiat eivät sujukaan entiseen tapaan. Tässä bannerikuvaongelmassa tulee sellainen olo, kuin ohjelman tekijälle olisi tapahtunut joku moka, jotain olisi jäänyt puuttumaan. En usko, että tavoitteena on laittaa käyttäjät opiskelemaan tietokonekieliä ja koodeja. En ymmärrä jatkuvia muutoksia, jotka ovat kuitenkin näennäisiä, eikä niistä ole käyttäjälle kummoistakaan lisäarvoa.
      Minullakin on mielestäni kohtalaisen yksinkertainen mallipohja. Ajan kanssa olen siihen jotain ominaisuuksia lisännyt, mutta aikalailla perustoimilla pärjään. Haluaisin käyttää aikani mieluummin tekstiin ja kuviin, kuin tekniikan kanssa pähkäilemiseen.
      Olen tosi kiitollinen MT:lle avusta. En harrasta pelihousuja, mutta jos sellaiset olisi ollut yllä, olisin repinyt riekaleiksi.

      Poista
  2. Nämä muutokset usein vaikeita. Oma bannerikin olisi kiva uudistaa, mutta ei taida olla nyt järkevää.

    VastaaPoista
    Vastaukset
    1. Alituiset muutokset ovat vaikeita ja usein ihan tarpeettomia. Näillä ohjeilla pärjää, jos kuvan koon kanssa tulee ongelmia. Kannattaa ottaa varmuuskopio ennen kuin lähtee tekemään muutoksia. Ja ylipäätään muutenkin blogi on suositeltavaa säännöllisesti varmuuskopioida.

      Poista
  3. Apua, taitaa jäädä kuva vaihtamatta, ihan liian monimutkaista minulle. Ehkä jossain vaiheessa tulee yksinkertaisempi systeemi. Kiitos ohjeen julkaisemisesta, turhaan sitä jokainen erikseen pähkii miten vaihtaa kuva.

    VastaaPoista
    Vastaukset
    1. Ei ole niin vaikeaa, miltä ensi näkemältä vaikuttaa. Etene kohta kohdalta, niin onnistut. Onko sinulla lähipiirissäsi joku tietokonetta räpläilevä nuori. Heiltä saa usein pätevää apua.

      Poista
  4. Jes, hyvä että saatiin tämä toimimaan blogissasi ja toivottavasti muutkin saavat tästä apua!

    VastaaPoista
    Vastaukset
    1. Kiitos vielä kerran.
      Uskon saman toimivan muillakin. Rohkeasti vain yrittämään.

      Poista

Päivänkakkara, kielonkukka, metsätähti, nurmennukka
kuiskii meitä seurakseen, puutarhan helmaan suloiseen.
Kommentista mukava muisto jää, se pitkään mieltä lämmittää.
Kiitos Sinulle vierailustasi!