S\u00e5 h\u00e4r fixar du din pixlade logotyp<\/h2>\n
Den h\u00e4r l\u00f6sningen \u00e4r lite teknisk, men jag har beskrivit stegen s\u00e5 tydligt jag kan.<\/p>\n
Det du ska g\u00f6ra \u00e4r att ladda upp en version av din logotyp som \u00e4r 2x den normala storleken och sedan anv\u00e4nda CSS f\u00f6r att krympa ner den till vanlig storlek (jag skrev redan koden \u00e5t dig).<\/p>\n
Till exempel, om logotypen som du visar f\u00f6r n\u00e4rvarande \u00e4r 300px bred, laddar du upp en 600px bred version. N\u00e4r din bildfil \u00e4r exakt dubbelt s\u00e5 stor som den visas p\u00e5 din webbplats, visas den perfekt skarpt p\u00e5 h\u00f6guppl\u00f6sta sk\u00e4rmar. Om du tittar p\u00e5 logotypen p\u00e5 den h\u00e4r webbplatsen just nu, \u00e4r det i huvudsak vad jag g\u00f6r.<\/p>\n
L\u00e5t oss nu g\u00e5 till stegen.<\/p>\n
Ta reda p\u00e5 vad din idealstorlek \u00e4r<\/h3>\n
Det f\u00f6rsta steget \u00e4r att logga in p\u00e5 din webbplats och \u00f6ppna Live Customizer.<\/p>\n
S\u00e5 h\u00e4r kommer du \u00e5t Live Customizer<\/p>\n V\u00e4l inne i Customizer klickar du p\u00e5 avsnittet Ytterligare CSS l\u00e4ngst ner.<\/p>\n Kopiera sedan och klistra in den h\u00e4r koden i avsnittet:<\/p>\n Du kommer att se din logotyp uppdateras omedelbart till att vara 300px bred. Ignorera om det \u00e4r suddigt eller inte just nu \u2013 vi fixar det i n\u00e4sta steg.<\/p>\n I CSS \u00e4ndrar du "300px"-v\u00e4rdet tills din logotyp visas i den storlek du vill ha. \u00c5terigen, oroa dig inte f\u00f6r suddighet, redigera den bara tills den tar upp r\u00e4tt m\u00e4ngd utrymme p\u00e5 webbplatsen.<\/p>\n Jag vet att det h\u00e4r kan vara f\u00f6rsta g\u00e5ngen du redigerar kod, s\u00e5 h\u00e4r \u00e4r ett snabbt exempel p\u00e5 hur koden skulle se ut om du best\u00e4mmer dig f\u00f6r att din logotyp ser b\u00e4st ut n\u00e4r den \u00e4r 450 pixlar bred:<\/p>\n Vettigt?<\/p>\n N\u00e4r logotypen tar upp r\u00e4tt m\u00e4ngd utrymme i rubriken kan du publicera dina \u00e4ndringar eller spara den som ett utkast tills vidare.<\/p>\n N\u00e4sta steg \u00e4r att \u00e4ndra storlek p\u00e5 sj\u00e4lva bildfilen.<\/p>\n F\u00f6r att din logotyp ska visas skarpt p\u00e5 din webbplats beh\u00f6ver du en version som \u00e4r exakt dubbelt s\u00e5 stor som den storlek du angav i CSS.<\/p>\n Till exempel, om CSS-koden g\u00f6r logotypen 450px bred, vill du ha en kopia av din logotypbild som \u00e4r 900px bred.<\/p>\n Om du inte har en tillr\u00e4ckligt stor version av din bildfil m\u00e5ste du komma i kontakt med din logotypdesigner eller f\u00e5 tillg\u00e5ng till det ursprungliga designdokumentet f\u00f6r att exportera en tillr\u00e4ckligt stor storlek.<\/p>\n Annars, om du bara har en 600px bred originalkopia d\u00e5 n\u00e4r du str\u00e4cker ut den till 900px kommer bilden att bli suddig \u00e4ven n\u00e4r du ser den p\u00e5 din dator.<\/p>\n N\u00e4r du har en 2x-stor version av bilden \u00e4r du redo f\u00f6r det sista steget.<\/p>\n Inuti Customizer, leta upp alternativet f\u00f6r uppladdning av logotyp. F\u00f6r de flesta teman kommer det att finnas i avsnittet Webbplatsidentitet.<\/p>\n Ladda upp din nya 2x-version av logotypen s\u00e5 kommer den att synas snyggt och skarpt p\u00e5 sidan.<\/p>\n F\u00f6r att sammanfatta \u00e4ndrar du logotypens storlek med CSS tills den fyller r\u00e4tt m\u00e4ngd utrymme i rubriken. Sedan laddar du upp en bild som \u00e4r dubbelt s\u00e5 stor, och den kommer att se skarp ut p\u00e5 h\u00f6guppl\u00f6sta sk\u00e4rmar.<\/p>\n Detta \u00e4r i huvudsak vad n\u00e4thinnast\u00f6d f\u00f6r bilder p\u00e5 webben g\u00f6r bakom kulisserna och detta \u00e4r ett enkelt s\u00e4tt att implementera det sj\u00e4lv.<\/p>\n Det \u00e4r allt som finns!<\/p>\n Det \u00e4r synd att WordPress inte har ett bra s\u00e4tt att visa h\u00f6guppl\u00f6sta logotyper, men l\u00f6sningen \u00e4r enkel nog.<\/p>\n Du kan alternativt ladda upp en SVG-version av din logotyp, men detta kr\u00e4ver ocks\u00e5 att du l\u00e4gger till SVG-st\u00f6d<\/a>.<\/p>\n \u00c4ven om du kanske inte vet n\u00e5got om CSS, kr\u00e4ver stegen h\u00e4r huvudsakligen kopiering och inklistring, och jag hoppas att du gillade att f\u00e5 nya tekniska f\u00e4rdigheter genom att f\u00f6lja denna handledning.<\/p>\n Om du vill l\u00e4ra dig mer om hur du anv\u00e4nder CSS f\u00f6r att anpassa din webbplats, kolla in den h\u00e4r handledningen:<\/p>\n![\"S\u00e5](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-208187-61713c4861240.png\")
<\/a><\/p>\n![\"S\u00e5](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-208187-61713c4a99036.png\")
<\/a><\/p>\n.custom-logo,\n.site-header .logo {\n max-width: 100% !important;\n width: 300px !important;\n height: auto !important;\n}<\/code><\/pre>\n.custom-logo,\n.site-header .logo {\n max-width: 100% !important;\n width: 450px !important;\n height: auto !important;\n}<\/code><\/pre>\n\u00c4ndra storlek p\u00e5 din bild<\/h3>\n
Ladda upp din nya bild<\/h3>\n
Slutsats<\/h2>\n