Jak naprawi\u0107 logo z pikselami<\/h2>\n
To rozwi\u0105zanie jest troch\u0119 techniczne, ale opisa\u0142em kroki tak jasno, jak potrafi\u0119.<\/p>\n
To, co zamierzasz zrobi\u0107, to przes\u0142a\u0107 wersj\u0119 swojego logo, kt\u00f3ra jest 2x wi\u0119ksza od normalnego rozmiaru, a nast\u0119pnie u\u017cy\u0107 CSS, aby zmniejszy\u0107 je do normalnego rozmiaru (napisa\u0142em ju\u017c kod dla Ciebie).<\/p>\n
Na przyk\u0142ad, je\u015bli aktualnie wy\u015bwietlany obraz logo ma szeroko\u015b\u0107 300 pikseli, prze\u015blesz wersj\u0119 o szeroko\u015bci 600 pikseli. Gdy plik obrazu jest dok\u0142adnie dwa razy wi\u0119kszy ni\u017c pokazuje si\u0119 w witrynie, wy\u015bwietla si\u0119 idealnie ostro na ekranach o wysokiej rozdzielczo\u015bci. Je\u015bli spojrzysz teraz na logo na tej stronie, to w zasadzie to w\u0142a\u015bnie robi\u0119.<\/p>\n
Przejd\u017amy teraz do krok\u00f3w.<\/p>\n
Dowiedz si\u0119, jaki jest Tw\u00f3j idealny rozmiar<\/h3>\n
Pierwszym krokiem jest zalogowanie si\u0119 do Twojej witryny i otwarcie Live Customizer.<\/p>\n
Oto jak uzyska\u0107 dost\u0119p do Live Customizer<\/p>\n Po wej\u015bciu do Customizera kliknij sekcj\u0119 Dodatkowy CSS na dole.<\/p>\n Nast\u0119pnie skopiuj i wklej ten kod do sekcji:<\/p>\n Od razu zobaczysz, \u017ce Twoje logo ma szeroko\u015b\u0107 300 pikseli. Zignoruj, czy jest teraz rozmazany, czy nie \u2013 naprawimy to w nast\u0119pnym kroku.<\/p>\n W CSS zmieniaj warto\u015b\u0107 \u201e300px", a\u017c Twoje logo b\u0119dzie wy\u015bwietlane w \u017c\u0105danym rozmiarze. Ponownie, nie martw si\u0119 o rozmycie, po prostu edytuj je, a\u017c zajmie odpowiedni\u0105 ilo\u015b\u0107 miejsca na stronie.<\/p>\n Wiem, \u017ce to mo\u017ce by\u0107 Twoja pierwsza edycja kodu, wi\u0119c oto kr\u00f3tki przyk\u0142ad tego, jak b\u0119dzie wygl\u0105da\u0142 kod, je\u015bli zdecydujesz, \u017ce Twoje logo wygl\u0105da najlepiej, gdy ma szeroko\u015b\u0107 450 pikseli:<\/p>\n Ma sens?<\/p>\n Gdy logo zajmie odpowiedni\u0105 ilo\u015b\u0107 miejsca w nag\u0142\u00f3wku, mo\u017cesz opublikowa\u0107 swoje zmiany lub na razie zapisa\u0107 je jako wersj\u0119 robocz\u0105.<\/p>\n Nast\u0119pnym krokiem jest zmiana rozmiaru samego pliku obrazu.<\/p>\n Aby Twoje logo by\u0142o wyra\u017anie wy\u015bwietlane w witrynie, potrzebujesz wersji dok\u0142adnie dwa razy wi\u0119kszej ni\u017c rozmiar wprowadzony w CSS.<\/p>\n Na przyk\u0142ad, je\u015bli kod CSS powoduje, \u017ce logo ma szeroko\u015b\u0107 450 pikseli, b\u0119dziesz potrzebowa\u0107 kopii obrazu logo o szeroko\u015bci 900 pikseli.<\/p>\n Je\u015bli nie masz wystarczaj\u0105co du\u017cej wersji pliku obrazu, musisz skontaktowa\u0107 si\u0119 z projektantem logo lub uzyska\u0107 dost\u0119p do oryginalnego dokumentu projektu, aby wyeksportowa\u0107 wystarczaj\u0105co du\u017cy rozmiar.<\/p>\n W przeciwnym razie, je\u015bli masz tylko oryginaln\u0105 kopi\u0119 o szeroko\u015bci 600 pikseli, po rozci\u0105gni\u0119ciu jej do 900 pikseli obraz b\u0119dzie rozmazany, nawet podczas ogl\u0105dania go na komputerze.<\/p>\n Gdy masz ju\u017c wersj\u0119 obrazu w rozmiarze 2x, jeste\u015b gotowy do ostatniego kroku.<\/p>\n W programie Customizer znajd\u017a opcj\u0119 przesy\u0142ania logo. W przypadku wi\u0119kszo\u015bci motyw\u00f3w b\u0119dzie on znajdowa\u0107 si\u0119 w sekcji To\u017csamo\u015b\u0107 witryny.<\/p>\n Prze\u015blij swoj\u0105 now\u0105 wersj\u0119 logo 2x, a b\u0119dzie wygl\u0105da\u0107 \u0142adnie i wyra\u017anie na stronie.<\/p>\n Podsumowuj\u0105c, zmieniasz rozmiar logo za pomoc\u0105 CSS, a\u017c wype\u0142ni odpowiedni\u0105 ilo\u015b\u0107 miejsca w nag\u0142\u00f3wku. Nast\u0119pnie przesy\u0142asz obraz, kt\u00f3ry jest dwa razy wi\u0119kszy i b\u0119dzie wygl\u0105da\u0142 ostro na ekranach o wysokiej rozdzielczo\u015bci.<\/p>\n To jest zasadniczo to, co obs\u0142uga siatk\u00f3wki dla obraz\u00f3w w Internecie robi za kulisami i jest to prosty spos\u00f3b na samodzielne wdro\u017cenie.<\/p>\n To wszystko!<\/p>\n Szkoda, \u017ce \u200b\u200bWordPress nie ma dobrego sposobu na wy\u015bwietlanie logo w wysokiej rozdzielczo\u015bci, ale obej\u015bcie jest do\u015b\u0107 \u0142atwe.<\/p>\n Mo\u017cesz alternatywnie przes\u0142a\u0107 wersj\u0119 SVG swojego logo, ale wymaga to r\u00f3wnie\u017c dodania obs\u0142ugi SVG<\/a>.<\/p>\n Chocia\u017c mo\u017cesz nic nie wiedzie\u0107 o CSS, kroki tutaj wymagaj\u0105 g\u0142\u00f3wnie kopiowania i wklejania, i mam nadziej\u0119, \u017ce podoba\u0142o Ci si\u0119 zdobywanie nowych umiej\u0119tno\u015bci technicznych, post\u0119puj\u0105c zgodnie z tym samouczkiem.<\/p>\n Je\u015bli chcesz dowiedzie\u0107 si\u0119 wi\u0119cej o u\u017cywaniu CSS do dostosowywania witryny, zapoznaj si\u0119 z tym samouczkiem:<\/p>\n![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-208187-61713c4861240.png\")
<\/a><\/p>\n![\"Jak](\"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>\nZmie\u0144 rozmiar obrazu<\/h3>\n
Prze\u015blij sw\u00f3j nowy obraz<\/h3>\n
Wniosek<\/h2>\n