Les lettrines, c’est la classe !

Vous aimez ? Partagez !

lettrineChose promise, chose due : aujourd’hui, nous allons voir comment installer des lettrines au début de chacun de vos articles et pages.

À vrai dire, rien de bien compliqué ici. Le plus difficile, c’est peut-être de créer de jolies lettrines, uniques, à vos couleurs, dans le style qui convient bien à l’image que vous voulez donner de votre blog.

Parce que le plus important n’est pas de faire « comme le copain qui a fait un truc super », mais bien de faire « votre truc à vous ».

L’usage de lettrines n’est absolument pas obligatoire, mettez-en seulement si ça vous empêche de dormir la nuit !  😛

D’ailleurs, sur ce blog, je n’utilise pas de « lettrines-images ». Tout simplement parce que j’ai pris le parti d’afficher une image miniature au début de mes articles et que cette image se retrouve affichée dans les extraits de ma page d’accueil.

Donc, avant de vous lancer à corps perdu dans cette histoire de lettrines, regardez d’abord quelles sont les options d’affichage des images de votre thème, regardez notamment si vous pouvez afficher une image au début de vos articles sans qu’elle se retrouve systématiquement affichée comme miniature de vos extraits.

En principe, si votre thème ne date pas d’avant la guerre de 40, vous devriez pouvoir choisir l’image qui s’affiche dans vos extraits indépendamment de celles que vous placez dans vos articles.

Passons à la pratique maintenant.

Dans l’article précédent, je vous invitais à créer vos propres lettrines avec votre logiciel de création graphique habituel, mais si vous n’avez pas le temps, si vous ne savez pas comment faire, j’ai créé quelques petites séries, rien que pour vous.

Elles vous attendent déjà parmi les ressources réservées aux abonnés de ce blog. 😉 Et je vous rappelle que plusieurs séries sont disponibles également dans les ressources de Webdesign-facile auxquelles vous avez accès en tant qu’abonnés.

Si vous avez saisi l’occasion de télécharger Photoshop CS6 gratuitement (offre obsolète), vous avez les moyens de créer des lettrines avec des « layer styles » originaux, c’est enfantin.

Vous créez un nouveau document, vous créez une ligne de lettrines avec les majuscules de votre police préférée, vous cliquez sur un style dans la petite fenêtre de droite (Styles) pour appliquer un effet à vos lettres.

Pour charger de nouveaux styles (fichiers .asl), cliquez en haut à droite de la fenêtre des styles, il y a un menu qui vous permet de les intégrer (Load styles).

Ensuite, enregistrez votre fichier au format .psd pour pouvoir le retravailler si besoin. Puis enregistrez-le au format .jpg et découpez vos lettres si vous en avez placé plusieurs sur une même ligne.

Je vous renvoie à cet article, je ne sais pas si l’offre de téléchargement gratuit de Photoshop CS6 est encore valable, mais au cas où… et à celui-ci pour trouver des styles gratuits.

#1 La méthode la plus simple si vous utilisez peu d’images en général sur votre blog.

C’est bête, mais nous avons tous un peu tendance, devant quelque chose d’un peu spectaculaire, à penser que c’est hyper compliqué.

Vous allez être contents : cette méthode, vous la connaissez déjà. 🙂

Elle consiste tout simplement à insérer vos lettrines comme une image normale, juste avant la première lettre de votre article (en pensant à supprimer cette première lettre bien sûr) et en utilisant la position « à gauche ».

C’est exactement ce que j’ai fait pour cet exemple (bien que, comme j’utilise Drop Caps, j’ai ici une double lettrine).

Maintenant, si je dis que ça ne convient que si vous n’avez que peu d’images dans votre bibliothèque, c’est bien parce que vous n’allez pas perdre de précieuses minutes à fouiller pour retrouver ce fichu « A » qui se trouve peut-être à la 13e page ou peut-être bien à la 54e…

C’est pourquoi la deuxième méthode peut vous économiser un temps précieux.

#2 Le plugin graphique qui centralise vos images dans des dossiers facilement accessibles.

J’ai déjà parlé de ce plugin il y a quelques temps. Et c’est en réfléchissant aux solutions les plus pratiques pour trouver ses lettrines rapidement qu’il m’est revenu à l’esprit.

Comme je le montre dans la vidéo de démonstration, il suffirait de créer à l’intérieur du plugin un dossier pour placer vos lettrines. Celles-ci seraient alors accessibles directement, sans que vous ayez à les chercher dans votre bibliothèque.

#3 Une troisième approche avec un petit peu de codage, mais rien de bien méchant.

Quand j’ai commencé à creuser cette question et à regarder de plus près comment m’appuyer sur le plugin Drop Caps, j’ai tout de suite compris qu’il faudrait avoir recours à des images, une image par lettre.

J’ai compris aussi qu’il fallait trouver le moyen de les avoir toutes à disposition pour pouvoir les insérer rapidement et facilement au début de chaque article.

Je ne sais pas pourquoi je voulais absolument utiliser Drop Caps pour afficher des lettrines sous forme d’images, alors j’ai testé quelques trucs en m’inspirant d’une part des conseils de codage donnés par le concepteur de Drop Caps, et d’autre part de ce que Yvon (Copywriting Pratique) avait fait.

Ça fonctionnait… mais malgré la présence de ma lettrine image, Drop Caps m’affichait toujours son modèle de lettrine au début du deuxième paragraphe !

Bref, ça n’allait pas. C’est alors que j’ai eu l’idée de tester autre chose qui a très bien fonctionné, et finalement je me suis aperçue que je n’avais pas besoin de Drop Caps du tout !

Comme quoi, on peut se compliquer la vie inutilement, mais c’est comme ça qu’on apprend ! 🙂

Pour appliquer cette méthode, vous allez donc tout d’abord devoir créer un dossier sur votre serveur, là où se trouve votre blog. Appelez ce dossier comme vous voulez : c’est juste celui dans lequel vous allez charger toutes vos lettrines.

Ensuite, vous allez noter précisément l’URL de chaque lettrine, par exemple :

 

http://www.mon-blog.com/lettrines/a.jpg

http://www.mon-blog.com/lettrines/b.jpg

http://www.mon-blog.com/lettrines/c.jpg

            etc.

Ensuite, dans un bloc-notes (Notepad++ par exemple), vous allez créer une suite de 26 blocs de style de cette manière :

 

span.capA {
float: left;
background-image: url(‘http://www.mon-blog.com/lettrines/a.jpg‘);
background-repeat: no-repeat;
line-height: 102px;
width: 82px;
position:relative;
}

Pour chaque bloc de style, c’est-à-dire correspondant à chacune de vos lettrines, vous devrez bien sûr changer à chaque fois la mention span.capA avec la lettre correspondante, indiquer l’URL de chaque lettre et aussi la taille de chaque image : line-height correspond à la hauteur, et width correspond à la largeur.

Une fois que vous avez créé l’ensemble des 26 blocs de style, sauvegardez ce fichier, il pourra vous être utile sur un autre blog par exemple. Vous n’aurez certainement pas envie de le refaire une seconde fois !

Maintenant, il ne vous reste plus qu’à copier et coller tout cet ensemble dans la feuille de style CSS de votre blog. Pour cela, allez dans Apparence > Editeur et ouvrez le fichier style.css. Vous pouvez ajouter ces blocs de style tout à la fin de ce fichier, tout simplement. N’oubliez pas d’enregistrer vos modifications !

Enfin, l’affichage de vos lettrines ne se fera pas comme par magie : vous devrez penser à habiller la première lettre de vos articles avec un petit peu de code.

Vous irez donc dans la partie HTML de votre éditeur de texte et vous ajouterez ceci (dans cet exemple, je dirai que ma première lettre est un « C ») :

Attention, très important : l’espace insécable   doit être présente absolument ! Ça a l’air idiot, mais si elle est absente ou bien si elle disparaît lorsque vous passez du mode HTML au mode visuel, vos lettrines n’apparaîtront pas.

Vérifiez donc comment votre éditeur réagit lorsque vous passez d’un mode à l’autre (on sait bien que WordPress interprète le code HTML d’une drôle de façon parfois !), et si vous constatez que   a disparu après que vous soyez repassé en mode visuel, remettez-le bien à sa place dans le code, enregistrez votre article en mode HTML et n’y touchez plus !

Voilà, si vous suivez bien ces différentes étapes, si rien ne manque dans vos lignes de code, ça devrait marcher comme sur des roulettes.

Il y a certainement d’autres manières de faire, je vous invite donc à les partager avec nous si vous les connaissez. 😉

Une prochaine fois, je vous indiquerai comment faire en sorte de supprimer la petite bordure qui entoure vos images. Mais je crois que… ça ira pour aujourd’hui ! 😀

Amusez-vous bien !

***

separator

  1. jc
    jc07-10-2012

    @ Alexandra :

    je ne comprends pas l’intérêt de la lettrine en image ?
    cela peut alourdir le code, augmente les pb de compatibilité, bref cela peut prend bcp de temps !

    pourquoi ne pas utiliser les pseudo class CSS comme first letter ?

    JC
    jc Mon dernier article… L’Ismérial : hors d’eau en coursMy Profile

    • Alexandra
      Alexandra07-10-2012

      Bonjour jc et bienvenue, 🙂

      ahhh… voilà une autre proposition, merci !

      Euh… l’intérêt de la lettrine en image, eh bien c’est tout simplement parce que certaines personnes souhaitent pouvoir le faire sans trop se prendre la tête, alors voilà the reason why.

      Certainement, le chargement des images alourdit l’ensemble et une solution en pur CSS serait parfaite…

      Pas sûr que je trouve une minute pour chercher là-dessus avant 2013 :D, mais si vous vous sentez d’humeur à développer simplement cette idée de pseudo class, ce sera utile à tous et nous vous en serons éternellement reconnaissants (d’ailleurs, merci d’avance au cas où !).

      A bientôt, amicalement,
      Alexandra

Laisser une réponse

CommentLuv badge

Ce blog utilise CommentLuv Premium qui vous autorise à associer des mots-clés à votre nom si vous avez effectué 3 commentaires approuvés. Utilisez votre vrai nom puis @ et vos mots-clés (maximum de 5).

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