👉 Basic WordPress Image Alignments Förklarade - WinningWP

Alexa Rank – SkĂ€rmdump

Ämnet med att anpassa bilder är en som vanligtvis missförstås av WordPress nybörjare. När du går till att lägga till en bild i ditt innehåll (inom antingen inlägg eller sidor) erbjuder WordPress dig fyra vanliga sätt att anpassa bilden: Justera 'Vänster', justera 'Center', justera 'Höger' och justera 'Ingen' *.

Låt oss ta en titt på var och en av dessa i sin tur:

1. Justera vänster

En bild som har tilldelats en vänsterjustering kommer effektivt att skjutas till vänster om den del av sidan där den sitter (t.ex. den vänstra gränsen för ditt WordPress-inlägg av sidinnehåll) och allt annat innehåll (till exempel text) kommer att Vik om sina andra tre gränser – fyller området till höger om var bilden är belägen.

Exempel:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt i culpa qui officia undrar mollit anim id s laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Utan minsta möjliga vänskap, det är inte nödvändigt att utöva arbetskraftsarbeten och utifrån det som följer. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur.

2. Rikta in centrum

Om du vill att din bild ska centraliseras inom sektionen på sidan där den sitter (dvs med lika stor avstånd mellan kanten på innehållsområdet och dess vänstra och högra gränsen), välj en "Central" -inriktning. Till skillnad från den ovannämnda "Vänster" -inriktningen kommer inte någon närliggande innehåll (till exempel text) att vikas runt bilden – den kommer istället att placeras antingen ovanför eller under bilden (beroende på var i texten du har valt att infoga nämnda bild).

Exempel:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt i culpa qui officia undrar mollit anim id s laborum.

3. Justera höger

Rätt att anpassa en bild är, som du förväntar dig, ungefär exakt omvänd av vänster som anpassar en bild – bilden kommer att skjutas till höger om sektionen av den sida där den sitter (dvs. den högra gränsen för din WordPress-posten för sidinnehåll), och allt annat innehåll (som text etc) kommer att linda runt sina andra tre gränser: därmed fyller området till vänster om det.

Exempel:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt i culpa qui officia undrar mollit anim id s laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Utan minsta möjliga vänskap, det är inte nödvändigt att utöva arbetskraftsarbeten och utifrån det som följer. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur.

4. Justera ingen

Bilder som inte har någon inriktning tilldelad dem (genom att tilldela dem en anpassning av 'Ingen') sitter exakt på den plats du hittar dem – det vill säga om du väljer att placera en bild som tilldelats en inriktning av 'Ingen' i ett stycke text (se följande exempel nedan) kommer den att placeras inline med den texten, vilket resulterar i att det finns text till både vänster och höger om bilden (förutsatt att bilden inte har samma bredd – eller bredare – än området där den sitter **). Men förvirrande kan en bild som båda har tilldelats en anpassning av 'None' och sitter i sin egen punkt (dvs på en ny rad i WordPress-redigeraren och / eller specifikt inom HTML-p-taggar) placeras till vänster av det område i vilket det ligger (på liknande sätt skulle det om det hade blivit kvarlämnat) men utan någon text till höger om den. Varför? Eftersom en bild inte har någon specifik inriktning (eller, i tekniska termer: ingen specifik vänster eller höger "float") som sitter inom sin egen paragraf (utan andra element i samma stycke) kommer att separeras från båda föregående och efterföljande innehåll med rader av fördefinierat vitt utrymme – på ungefär samma sätt som alla andra stycken kommer!

Exempel:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt i culpa qui officia undrar mollit anim id s laborum.

Så vad händer faktiskt här?

Varför händer allt detta? Det är faktiskt allt på grund av ett datorspråk som används för att uttrycka presentationen (layout, dimensioner, färger etc.) av webelement, kända som Cascading Style Sheets – eller "CSS" för korta. I själva verket lägger WordPress till exempel varje gång du tilldelar, säger en vänsterjustering till en bild i ett inlägg eller en sida, ett HTML-klassnamn för "alignleft" till nämnda bild, vilket effektivt tvingar bilden att referera till ett specifikt uppsättning av fördefinierade CSS-kommandon som berättar där det behöver sitta på sidan – enkelt! På samma sätt tilldelas WordPress olika klassnamn – till exempel "aligncenter" (för bilder som är centralt justerade), "justerbar" (för att bilder ska vara rättjusterade) och "alignnone" (för bilder som är att inte ha någon särskild inriktning tilldelad) – som varje hänvisar till olika uppsättningar av CSS-kommandon.

Visserligen (tyvärr) kan tanken att sätta in huvudet runt CSS-kommandon vara mer än lite skrämmande för den genomsnittliga WordPress-användaren. Om du har intresse av att lära dig mer om dem, kan de snabbt ge dig en helt ny grad av frihet när det gäller att utforma ditt innehåll – eller till och med hela din webbplats! Om du är intresserad av att lära dig, kolla in vårt tidigare inlägg om hur du bäst kan lära dig att lära dig CSS online – eller, alternativt, bara gå vidare till god ol 'Google och gå vild! ;)

Sammanfattning

Så där har du det: bildjusteringar förklaras! Kort sagt: använd en vänsterjustering när du vill att en bild ska sitta till vänster och andra element (som text etc) för att vika runt det till höger; använd en centralinriktning när du vill att en bild ska sitta i mitten / mitt innehåll med inga andra element på vardera sidan av det; använd en rättjustering när du vill att en bild ska sitta till höger och andra närliggande webelement för att linda runt det till vänster; och använd en inriktning på 'ingen' om du vill att din bild ska sitta exakt var du väljer att placera den i förhållande till dess närliggande element (dvs. text etc) – och slutligen om du vill att en bild ska placeras till vänster om innehållet -området inom vilket det ligger, men vill inte att någon text etc visas till höger om det, tilldela bilden en anpassning av 'Ingen' och se till att den sitter i sin egen privata punkt!

* via en rullgardinsmeny som finns längst ned till höger i fönstret WordPress "Media Library" under underrubriken "Inställningar för bifogad bildskärm".

** I så fall kommer texten som normalt sett sitter på båda sidor av det, inte att gå någon annanstans över eller under bilden – notera att sådana fall ofta kan leda till förvirring mellan alla fyra justeringar eftersom det inte finns plats för någon annan text / element på vardera sidan av bilden kommer det i princip inte att skilja vilken anpassning du väljer att använda!

Användbar?

Titta pÄ videon: Hur man förbÀttrar din webbplats ranking pÄ google BÀsta SEO Verktyg för 2018

Like this post? Please share to your friends:
Kommentera

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