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

Ecrire un commentaire»
  1. Coucou!
    Tes nouvelles images d’en-tête sont sympa!
    Les fonds de tes menus aussi :)
    Biz @ peluche…

  2. 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. Ben oui je rentre de vacances :( ;) J’avais gardé mes compliments pour la rentrée lol

  4. charrier

    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. 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. 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. 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

    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. 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. 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. [...] clé(s) de Suite à une question sur Le blog de Lise et en complément de son excellent article Mes images d’en-tête je vous explique rapidement comment définir des dimensions fixes pour votre header afin que vous [...]

  12. 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.
    http://www.wordpress-fr.net/support/viewtopic.php?pid=98869#p98869
    Julien

  13. 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 ;)

  14. Merci beaucoup , c’était ça !

  15. 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.

  16. 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

    1. Peut-être avec un lociciel pas très cher comme Graphic Converter, dont j’ai parlé dans cet article.
      Sur cette page, j’ai listé quelques sites de logiciels pour Mac.
      Dans la catégorie images :
      http://macfreeware.fr/?section=categorie&categorie=graphisme
      http://www.logicielmac.com/section13/Imagerie.html

  17. 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

    1. 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.

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

    1. 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 ».

  19. 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 ..

    1. 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 mail ne sera jamais rendue publique ni utilisée.

*Si vous écrivez un commentaire ici pour la première fois, celui-ci ne sera publié qu'après validation par un administrateur du blog. Ne l'envoyez pas plusieurs fois !
*Bien sûr, tout commentaire injurieux, publicitaire ou spam sera supprimé.
*C'est à vous maintenant !

(obligatoire)
(obligatoire)

Laisser ces deux champs tels quels :

Protégé par Invisible Defender.


  • Mentions légales
    Les différents éléments du Blog de Lise restent la propriété de leur(s) auteur(s) respectifs.


Connexion à WordPress protégée par Clef