ūüĎČ Perus WordPress Image Alignments Explained - WinningWP

Alexa Rank – kuvakaappaus

Aiheen kohdistaminen kuvia on yksi, joka on yleisesti väärin WordPress aloittelijoille. Kun lisäät kuvan sisältöön (joko viestiin tai sivuihin), WordPress tarjoaa neljä oletusarvoista tapaa kohdistaa kuva: kohdista 'Vasen', kohdista 'Center', kohdista 'Oikea' ja kohdista 'Ei mitään' *.

Katsotaanpa jokainen seuraavista:

1. Kohdista vasemmalle

Vasemmalle kohdistukselle määritetty kuva siirtyy tehokkaasti sen sivun osan vasemmalle puolelle, jossa se istuu (kuten WordPress-sivun sisällön vasemman rajan) ja minkä tahansa muun sisällön (kuten tekstin) kääri ympärilleen kolme muuta reunaa – täytä alue oikealle, missä kuva sijaitsee.

Esimerkki:

Lorem ipsum dolor sit amet, consectetur adipiscing elite, ei tee etusäästämättömiä tapahtumia työhön ja suru magna aliqua. Sellainen, joka on karkea ja karkea, on karkea, ja siinä on syvyys. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elite, ei tee etusäästämättömiä tapahtumia työhön ja suru magna aliqua. Tällöin vähimmäisarvo, joka on äärimmäisen tärkeä, ei ole olemassa. Sellainen, joka on karkea ja karkea, on karkea, ja siinä on syvyys.

2. Kohdista keskus

Jos haluat, että kuva on keskitetty sen sivun osiossa, jossa se istuu (ts. Yhtä suuri määrä välilyöntiä sisällön alueen reunan ja sen vasemman ja oikean reunan välissä), valitse keskitetty kohdistus. Toisin kuin edellä mainittu "vasen" linjaus, mikään naapurisisältö (kuten teksti) ei kierrä kuvan ympärille – se sijoitetaan sen sijaan kuvan yläpuolelle tai alapuolelle (riippuen siitä, missä tekstissä olet päättänyt lisätä mainittu kuva).

Esimerkki:

Lorem ipsum dolor sit amet, consectetur adipiscing elite, ei tee etusäästämättömiä tapahtumia työhön ja suru magna aliqua. Sellainen, joka on karkea ja karkea, on karkea, ja siinä on syvyys. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3. Kohdista oikea

Kuvan oikea kohdistus on, kuten olette odottaa, melko täsmällinen kuvan vasemman puolen tarkka kääntö – kuva työnnetään sen osion oikealle puolelle, johon se istuu (eli oikean reunan WordPress-sivun sisältö) ja kaikki muut sisällöt (kuten teksti jne.) Ympäröivät sen kolme muuta reunaa: tällöin täytetään alue sen vasemmalla puolella.

Esimerkki:

Lorem ipsum dolor sit amet, consectetur adipiscing elite, ei tee etusäästämättömiä tapahtumia työhön ja suru magna aliqua. Sellainen, joka on karkea ja karkea, on karkea, ja siinä on syvyys. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elite, ei tee etusäästämättömiä tapahtumia työhön ja suru magna aliqua. Tällöin vähimmäisarvo, joka on äärimmäisen tärkeä, ei ole olemassa. Sellainen, joka on karkea ja karkea, on karkea, ja siinä on syvyys.

4. Kohdista Ei mitään

Kuvat, jotka eivät ole kohdistettuja niille (kohdistamalla ne kohdalle "Ei mitään"), istuvat täsmälleen siinä paikassa, johon ne on sijoitettu – eli jos valitset kohdan "Ei mitään" (katso seuraava esimerkki alla), se sijoitetaan samaan viitaten kyseisen tekstin kanssa, mikä johtaa tekstiin sekä kuvan vasemmalle että oikealle (olettaen, että kuva ei ole samaa leveyttä tai laajempaa kuin alue jossa se istuu **). Kuitenkin hämmentävästi, kuva, jonka BOTH on määritetty "Ei mitään": n kohdistukseen ja istuu omassa kappaleessaan (eli uudessa rivissä WordPress-editorissa ja / tai nimenomaan HTML-p: ssä), sijoitetaan vasemmalle sen alueelta, jossa se sijaitsee (samalla tavoin kuin se olisi, jos se olisi ollut linjassa), mutta ilman tekstiä oikealle. Miksi? Koska kuvassa ei ole erityistä kohdistusta (tai teknisesti: ei erityistä vasemman tai oikean "float"), joka istuu omassa kappaleessaan (ilman muita saman kappaleen elementtejä), erotetaan sekä edellisestä ja seuraava sisältö ennalta määritellyn valkoisen tilan linjoilla – aivan samalla tavalla kuin mikä tahansa muu kappale!

Esimerkki:

Lorem ipsum dolor sit amet, consectetur adipiscing elite, ei tee etusäästämättömiä tapahtumia työhön ja suru magna aliqua. Sellainen, joka on karkea ja karkea, on karkea, ja siinä on syvyys. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Joten mitä täällä todella tapahtuu?

Miksi kaikki tämä tapahtuu? Se johtuu kaiken tietokonekielestä, jota käytetään ilmaisemaan verkkoelementtien (Cascading Style Sheets) tai lyhytsanomien (CSS) esitys (layout, mitat, värit jne.). Pohjimmiltaan aina, kun annat sanan vasemmalle kohdistetuksi kuvan tai sivun kuvaan, esimerkiksi WordPress lisää HTML-luokan "alignleft" -nimen nimeksi mainittuun kuvaan, joka sitten tehokkaasti pakottaa kuvan viittaamaan tiettyyn sarjaan ennalta määritellyistä CSS-komennoista, jotka kertoivat, missä se tarvitsee istua sivulla – yksinkertainen! Vastaavasti kullekin muulle mainitulle rinnastukselle WordPress nimeää eri luokkien nimet – kuten "aligncenter" (kuvien keskittämiseksi keskelle), "alignright" (oikealle kohdistettavien kuvien) ja "alignnone" (kuviin, jotka ovat ettei mitään erityistä kohdistusta ole annettu) – että kukin viittaa erilaisiin CSS-komentoihin.

Tosiasiassa (valitettavasti) ajatus pään käärimisestä CSS-komentojen maailmassa voi olla enemmän kuin pelottavaa keskinkertaiselle WordPress-käyttäjälle; kuitenkin, jos sinulla on kiinnostusta saada lisää tietoa heistä, he antavat nopeasti mahdollisuuden saada täysin uusi vapausaste sisällön muotoilemiseksi – tai jopa koko sivustollesi! Jos olet kiinnostunut oppimisesta, tutustu aikaisemmaan viestiin, jossa on parasta oppia CSS-verkko-opetusta – tai vaihtoehtoisesti vain päästäksesi hyvään Google-palveluun ja menemään villi! ;)

Yhteenveto

Joten sinulla on se: kuvasäätöjä selitetään! Lyhyesti sanottuna: käytä vasenta kohdistusta, kun haluat kuvan istumaan vasemmalle ja muille elementteille (kuten tekstille jne.) Käärittele sen oikealle. käytä keskitettyä kohdistusta, kun haluat, että kuva istuu sisällön keskellä / keskellä ilman muita elementtejä sen molemmilla puolilla; käytä oikeaa kohdistusta, kun haluat, että kuva istuu oikealle ja muut naapurimaiset verkkoelementit kiertävät sitä vasemmalle; ja käytä "ei mitään" kohdistusta, jos haluat, että kuva istuu tarkalleen missä haluat sijoittaa sen suhteessa sen läheisiin elementteihin (ts. teksti jne.) – ja lopuksi, jos haluat, että kuva sijoitetaan sisällön vasemmalle puolelle -alue, jonka sisällä se sijaitsee mutta ei halua mitään tekstiä jne., joka näkyy sen oikealla puolella, anna kuvan kohdalle "Ei mitään" ja varmista, että se istuu omassa yksityisessä kappaleessaan!

* avattavasta valikosta, joka löytyy WordPressin "Media Library" -ikkunan oikeasta alakulmasta alaotsikon "Liite-näyttöasetukset" alla.

** Tässä tapauksessa teksti, joka tavallisesti istuu kummallakin puolella, ei saa missään muualla muualla kuin kuvan yläpuolella tai alapuolella. Huomaa, että tällaiset tapaukset voivat usein aiheuttaa sekaannuksen kaikkien neljän kohdistuksen välillä, sillä ilman tilaa tekstiä / elementtejä kuvan kummallakin puolella, se ei ole olennaisesti eroa, mitä linjaa haluat käyttää!

Hyödyllinen?

Katso video: NBA 2K19 Blake Griffin Screenshot ja arvostelu!

Like this post? Please share to your friends:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: