Mes images d’entête

Le thème que j’utilise sur ce blog, dKret, offre la possibilité d’utiliser aléatoirement des images d’entête différentes. Jusqu’à présent, j’avais configuré dKret de façon à afficher le titre du blog dans l’entête. Mais en fonction des photos que je mets en ligne, le titre ressort plus ou moins clairement.

J’ai donc décidé de ne plus afficher le titre du blog en utilisant les réglages de WordPress, mais d’en faire une image. Je ne suis pas spécialiste des logiciels de graphisme, je me suis servie de quelques outils disponibles sur le Mac. Il existe sans doute des méthodes plus perfectionnées, mais peut-être mes « bidouillages » pourront-il être utiles à d’autres…

Construction de l’image

Le thème est ainsi conçu que si l’image choisie pour l’entête est plus petite que 1100 * 170 pixels, elle sera répétée. Pour construire mon image je procède donc de la façon suivante :

  • j’ouvre une photo avec Aperçu,
  • avec les touches Pomme -, je la réduis aux dimensions voulues,
  • en utilisant les touches Pomme + Maj + 4, je copie l’image ainsi obtenue afin qu’elle soit enregistrée aux dimensions souhaitées,
  • les images ainsi copiées sont automatiquement placées sur le Bureau,
  • je les ouvre avec Aperçu, le lecteur par défaut,
  • je les copie depuis Aperçu (Pomme + C) et les colle (Pomme + V) dans une image vierge de 1100 * 170 pixels sous Graphic Converter.

Insertion du texte

Graphic Converter permet d’insérer du texte sur une image facilement. J’ai découvert récemment que je pouvais insérer plusieurs textes en un seul passage :

  • cliquer sur Fichier > Convertir et modifier,
  • choisir la fonction Convertir (cette option permet de conserver les dimensions de l’image),
  • choisir dans la fenêtre de gauche le répertoire où se trouvent les photos,
  • choisir dans la fenêtre de droite le répertoire où seront placées les images converties,
  • cliquer sur le bouton Editer le traitement, choisir Insérer un texte et cliquer sur le bouton Ajouter,
  • choisir l’alignement, la couleur du texte, sa police, sa taille, son contenu, éventuellement un fond,
  • ajouter un nouveau texte pour la deuxième ligne, choisir l’alignement adéquat, la police,…
  • cliquer sur le bouton Enregistrer pour pouvoir réutiliser ultérieurement le traitement,
  • sélectionner les images dans la fenêtre de gauche et cliquer sur le bouton Exécuter,
  • et en un seul passage, les deux lignes de texte sont insérées.

Réduction de la taille des images

Les images ainsi réalisées pèsent quelques centaines de kilo octets. J’utilise RapidoResizer pour réduire leur taille :

  • ouvrir les images avec Rapido Resizer,
  • cliquer sur le bouton Appliquer les dimensions puis sur Fichier > Tout enregistrer sous,
  • je n’ai plus qu’à télécharger mes images dans le répertoire wp-content/themes/dkret3/images/headers/.

Il y sans doute plus simple… mais bon, je suis assez contente du résultat !


Ecrit par Lise - Site

23 commentaires pour “Mes images d’entête

  1. 11 août 2008 à 17:02

    Coucou!
    Tes nouvelles images d’en-tête sont sympa!
    Les fonds de tes menus aussi 🙂
    Biz @ peluche…

  2. 11 août 2008 à 17:09

    Tes nouvelles images d’en-tête sont sympa!

    Merci !

    Les fonds de tes menus aussi 🙂

    Ça, c’est moins récent ! tu rentres de vacances ? 😉

  3. 11 août 2008 à 19:21

    Ben oui je rentre de vacances 🙁 😉 J’avais gardé mes compliments pour la rentrée lol

  4. charrier
    15 août 2008 à 12:18

    Bonjour,

    J’utilise dkret, comme css fluidelity, je souhaite savoir comment faire pour insérer une image qui correspond à la largeur de ma page affichée. En effet l’image que j’utilise s’affiche en plusieurs fois ……… Bref quel doit être la largeur et hauteur de mes images ?

    Salutations

  5. 15 août 2008 à 14:38

    charrier: une image qui correspond à la largeur de ma page affichée

    Cela dépend si tu as modifié les dimensions de ton blog. Peux tu nous donner le lien de ton blog stp? Je t’expliquerai ensuite.
    @ peluche…

  6. 16 août 2008 à 05:51

    La base de mon thème est également « Fluidelity ». Si, comme Yin-Yin le dit, tu n’as pas modifié la largeur de la page, comme je l’ai indiqué dans le billet, « le thème est ainsi conçu que si l’image choisie pour l’entête est plus petite que 1100 * 170 pixels, elle sera répétée ».
    Il faut donc que ton image ait au moins 1100 pixels de large sur 170 pixels de haut.

  7. 16 août 2008 à 09:40

    Exact Lise! Je crois que tu as précisé les dimensions définies dans ton scheme lise_ fluidelity.css

    /*FLUIDELITY*/
    div#wrapper {width: auto; max-width: 1100px;}

    La largeur par défaut du thème est de 890px et la hauteur du header est 160px.

    Pour s’assurer des dimensions de ton header il faut rajouter les lignes suivantes dans la feuille de style de ton scheme :

    div#wrapper {width: auto; max-width: 11OOpx;} /* Largeur voulue */
    div#header {height: 160px;} /* Hauteur du header voulue */

    Il faudra alors pour que l’image d’en-tête remplisse parfaitement et sans répétition le header qu’elle ait une taille de 1100px par 160px.

    Voilou @ peluche…

  8. charrier
    16 août 2008 à 10:20

    Bonjour,

    Suite à la réponse , j’ai essayé le 1170/170 et cela marche nickel. Bon , faut que je refasse ( retravailler) d’autres photos pour mes divers blog (site).

    Merci

  9. 16 août 2008 à 15:10

    Exact Lise! Je crois que tu as précisé les dimensions définies dans ton scheme lise_ fluidelity.css

    Ce sont les dimensions par défaut du thème fluidelity

  10. 16 août 2008 à 15:45

    Ce sont les dimensions par défaut du thème fluidelity

    Oui ce je que veux dire c’est que tu as repris les dimensions du Fluidelity.css pour ton lise_fluidelity.css 😉
    Biz bon w-e @ peluche…

  11. 10 octobre 2008 à 14:44

    Bonjour, j’ai suivi vos conseils pour les images d’entête, mais du coup, je ne rempli plus les champs « titre du blog » et « description du blog » dans les réglages généraux de WP.
    De ce fait il semble bien que je n’ai pas de balises meta « title  » et meta « description » , ce qui doit être gênant pour le référencement. Comment faire ? Merci d’avance. Un lien vers le post de la même question sur le forum de WP fr.
    https://www.wordpress-fr.net/support/viewtopic.php?pid=98869#p98869
    Julien

  12. 12 octobre 2008 à 11:00

    Hello!
    Je pense que tu t’es trompé lors de tes manipulations pour masquer le titre de ton blog…
    Il ne faut surtout pas vider les champs « Nom du blog » & « Slogan » dans les options générales!

    Il faut cocher/décocher la case « montrer le titre » dans les options de dKret3 en fonction de ce que l’on souhaite.

    Voilà j’espère que c’est simplement cela 😉

  13. 12 octobre 2008 à 20:13

    Merci beaucoup , c’était ça !

  14. 25 octobre 2008 à 13:58

    Je complète la réponse de Yin-Yin, les champs “Nom du blog” & “Slogan” servent effectivement à l’indexation du blog dans les moteurs de recherche.
    Décocher la case “montrer le titre” permet juste de ne pas les afficher.

  15. 19 octobre 2009 à 20:13

    Bonjour !
    Je trouve ce site très agréable et joli comme tout 🙂
    Je vous écris car je ne sais pas trop à qui demander, et j’ai beau farfouiller sur le net, je n’arrive pas à résoudre mes petits soucis (en quelque sorte).

    Alors voilà, j’ai un Mac OS X. Comme sur énormément de blog, j’aurais aimé faire des photos avec des effets par exemple de feu d’artifice, de bulle, d’étoile (enfin si vous voyez ce que je veux dire :S). Et je n’ai rien pour m’aider sur mon Mac. Je bloque… Savez-vous comment faire et comment procéder après pour des effets ?
    J’espère que vous pourrez m’aider !

    Nathalie

  16. 22 décembre 2009 à 22:53

    Bonsoir,
    J’installe un blog en utilisant le thème dkret3 3.3. Je n’ai pas l’option que vous utilisez permettant d’avoir une image d’entête aléatoire.
    Si vous pouvez m’indiquer la manipulation a effectuer, je vous en remercie.
    Alain

    • 22 décembre 2009 à 23:37

      Il faut vous rendre dans la page de configuration de dKret : Apparence > dKret3 configurations et comme indiqué sur cette page télécharger vos images dans le répertoire wp-content > uploads.

      Ensuite, il faut cliquer dans la liste déroulante « Afficher l’entête par défaut » et choisir « Afficher une image d’entête aléatoire » ; au bas de la page, n’oubliez pas d’enregistrer vos modifications.

  17. 23 décembre 2009 à 18:57

    Cela ne fonctionne pas. Je n’ai pas la liste déroulante, ni l’option « Afficher une image d’entête aléatoire ».

    • 23 décembre 2009 à 22:26

      Essayez dans un premier temps de réinitialiser dKret :
      A partir de la page de configuration de dKret Apparence > dKret3 configurations, cochez la case « Supprimer tous les éléments de configuration de dKret3 lorsque vous changez de thème », cliquez sur le bouton Enregistrer la configuration puis choisissez un autre thème.
      Choisissez de nouveau dKret. Si vous n’accédez toujours aux paramètres souhaités, peut-être faudrait-il supprimer tous les fichiers de dKret (et peut-être d’autres thèmes si vous en avez), puis refaire une installation « propre ».

  18. 7 mai 2010 à 13:40

    avant tout un grand merci ……. pour le travail que vous avez realisé sur votre blog …..
    j’ai un petit problème , je n’arrive pas a avoir le header aleatoire, quand j’utilise le theme dkret3 , je l’ai mais dès l’instant que je passe au thème lisemini ou lisemini 2 , j’ai toujours l’option .. mais elle ne fonctionne pas ….. j’ai regardé un peu partout … je ne trouve pas la solution ….. auriez vous une idée ???? … et merci encore ..

    • 7 mai 2010 à 23:29

      Pour ma part, dans les options de Lisemini2, la case Montrer une image d’en-tête aléatoire est cochée et comme vous pouvez le voir, les images s’affichent aléatoirement.
      Les images sont-elles bien placées dans le répertoire dkret3/images/headers, même pour une utilisation de Lisemini ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Laisser ces deux champs tels quels :

Protégé par Invisible Defender. 266 405 spammeurs ont vu s'afficher une page d'erreur 403.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.