Comment r\u00e9parer votre logo pixelis\u00e9<\/h2>\n
Cette solution est un peu technique, mais j’ai d\u00e9crit les \u00e9tapes aussi clairement que possible.<\/p>\n
Ce que vous allez faire est de t\u00e9l\u00e9charger une version de votre logo qui est 2 fois la taille normale, puis d’utiliser CSS pour le r\u00e9duire \u00e0 une taille normale (j’ai d\u00e9j\u00e0 \u00e9crit le code pour vous).<\/p>\n
Par exemple, si l’image du logo que vous affichez actuellement fait 300 pixels de large, vous t\u00e9l\u00e9chargerez une version de 600 pixels de large. Lorsque votre fichier image est exactement deux fois plus volumineux qu’il n’appara\u00eet sur votre site, il s’affiche parfaitement net sur les \u00e9crans haute r\u00e9solution. Si vous regardez le logo sur ce site Web en ce moment, c’est essentiellement ce que je fais.<\/p>\n
Passons maintenant aux \u00e9tapes.<\/p>\n
D\u00e9couvrez quelle est votre taille id\u00e9ale<\/h3>\n
La premi\u00e8re \u00e9tape consiste \u00e0 vous connecter \u00e0 votre site et \u00e0 ouvrir le Live Customizer.<\/p>\n
Voici comment acc\u00e9der au Live Customizer<\/p>\n Une fois dans le Customizer, cliquez sur la section CSS suppl\u00e9mentaire en bas.<\/p>\n Ensuite, copiez et collez ce code dans la section\u00a0:<\/p>\n Vous verrez votre logo se mettre \u00e0 jour instantan\u00e9ment pour faire 300px de large. Ignorez si c’est flou ou pas pour le moment – nous allons r\u00e9soudre ce probl\u00e8me \u00e0 l’\u00e9tape suivante.<\/p>\n Dans le CSS, modifiez la valeur "300px" jusqu’\u00e0 ce que votre logo s’affiche \u00e0 la taille souhait\u00e9e. Encore une fois, ne vous inqui\u00e9tez pas du flou, modifiez-le simplement jusqu’\u00e0 ce qu’il occupe la bonne quantit\u00e9 d’espace sur le site.<\/p>\n Je sais que c’est peut-\u00eatre la premi\u00e8re fois que vous \u00e9ditez du code, alors voici un exemple rapide de ce \u00e0 quoi ressemblerait le code si vous d\u00e9cidiez que votre logo est plus beau avec une largeur de 450 pixels\u00a0:<\/p>\n Avoir du sens ?<\/p>\n Une fois que le logo occupe la bonne place dans l’en-t\u00eate, vous pouvez publier vos modifications ou l’enregistrer en tant que brouillon pour le moment.<\/p>\n L’\u00e9tape suivante consiste \u00e0 redimensionner le fichier image lui-m\u00eame.<\/p>\n Pour que votre logo s’affiche clairement sur votre site, vous aurez besoin d’une version exactement deux fois plus grande que la taille que vous avez entr\u00e9e dans le CSS.<\/p>\n Par exemple, si le code CSS donne au logo une largeur de 450 pixels, vous aurez besoin d’une copie de l’image de votre logo d’une largeur de 900 pixels.<\/p>\n Si vous ne disposez pas d’une version suffisamment grande de votre fichier image, vous devrez contacter votre concepteur de logo ou acc\u00e9der au document de conception d’origine pour exporter une taille suffisamment grande.<\/p>\n Sinon, si vous n’avez qu’une copie originale de 600 pixels de large, lorsque vous l’\u00e9tirez \u00e0 900 pixels, l’image sera floue m\u00eame lorsque vous la visualiserez sur votre ordinateur.<\/p>\n Une fois que vous avez une version 2x de l’image, vous \u00eates pr\u00eat pour l’\u00e9tape finale.<\/p>\n Dans le Customizer, localisez l’option de t\u00e9l\u00e9chargement du logo. Pour la plupart des th\u00e8mes, ce sera dans la section Identit\u00e9 du site.<\/p>\n T\u00e9l\u00e9chargez votre nouvelle version 2x du logo et il appara\u00eetra bien et net sur le site.<\/p>\n Pour r\u00e9sumer, vous modifiez la taille du logo avec CSS jusqu’\u00e0 ce qu’il remplisse la bonne quantit\u00e9 d’espace dans l’en-t\u00eate. Ensuite, vous t\u00e9l\u00e9chargez une image deux fois plus grande et elle sera nette sur les \u00e9crans haute r\u00e9solution.<\/p>\n C’est essentiellement ce que la prise en charge de la r\u00e9tine pour les images sur le Web fait en coulisses et c’est un moyen simple de l’impl\u00e9menter vous-m\u00eame.<\/p>\n C’est tout ce qu’on peut en dire!<\/p>\n C’est dommage que WordPress n’ait pas un bon moyen d’afficher des logos haute r\u00e9solution, mais la solution de contournement est assez simple.<\/p>\n Vous pouvez \u00e9galement t\u00e9l\u00e9charger une version SVG de votre logo, mais cela n\u00e9cessite \u00e9galement l’ ajout du support SVG<\/a>.<\/p>\n Bien que vous ne sachiez peut-\u00eatre rien sur CSS, les \u00e9tapes ici n\u00e9cessitent principalement du copier-coller, et j’esp\u00e8re que vous avez appr\u00e9ci\u00e9 d’acqu\u00e9rir de nouvelles comp\u00e9tences techniques en suivant ce didacticiel.<\/p>\n Si vous souhaitez en savoir plus sur l’utilisation de CSS pour personnaliser votre site, consultez ce tutoriel\u00a0:<\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-208187-61713c4861240.png\")
<\/a><\/p>\n![\"Comment](\"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>\nRedimensionner votre image<\/h3>\n
T\u00e9l\u00e9chargez votre nouvelle image<\/h3>\n
Conclusion<\/h2>\n