Ajouter une lettrine dans vos articles

5985947903_39374a291bPour donner un petit « plus » à vos articles, vous pouvez ajouter, de manière assez simple, une lettrine au début de vos textes. J’ai essayé plusieurs méthodes, dont l’une utilisait la baliste p:first-child:first-letter qui appelle la première lettre du premier paragraphe du texte, mais le résultat ne me laissait pas assez de liberté et surtout, ne s’appliquait pas toujours comme je le voulais. J’ai donc opté pour la solution qui consiste à encadrer la lettre à transformer en lettrine d’une balise span et de lui attribuer une classe. Avec cette méthode, il vous faudra donc ajouter du code dans votre CSS, envoyer une image de fond dans votre dossier de template, et ajouter une balise span en mode texte dans votre article.

Dans votre CSS

Ajoutez un code qui pourrait être celui qui suit. Changez chaque élément en fonction de vos besoins. La police différente de celle du contenu, l’image en background et l’ombre sont loin d’être nécessaires si vous cherchez un rendu très simple.

.lettrine {
font-family: 'Mouse Memoirs', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif; 
float:left; 
padding:5px; 
margin: 5px 10px 0px 0px; 
background: #fff url(images/croqueavatarclair.png) no-repeat center center; 
color: #C12100; 
text-shadow:1px 2px 4px #000; 
font-size:80px; 
line-height: 1em 
}

Dans le dossier « images » de votre template

Ou n’importe où ailleurs sur votre blog, envoyez l’image de fond que vous voulez voir apparaitre sous votre lettrine. N’oubliez pas de changer l’adresse url dans le code pour que celle-ci corresponde à l’emplacement de l’image dans le site.

A priori, ça fonctionne !

Dans l’éditeur html de votre article

En choisissant l’onglet « texte » en haut à droite de la fenêtre d’édition de votre article, il suffit alors d’encadrer la lettre à transformer avec une balise span comme ci-dessous et le tour est joué.

<span class="lettrine">P</span>our donner un petit "plus" à vos articles.

Une lettrine dans vos extraits

Si comme moi, vous avez activé les extraits en première page et que vous utilisez un thème Artisteer, vous avez la possibilité de choisir si cette lettrine apparaitra ou non dans les extraits en question. Rendez-vous dans :
Apparence >> Theme options >> Excerpt et ajoutez « span, » dans Allowed excerpt tags si vous souhaitez que vos lettrines apparaissent.

Photographie de Lacy (CC BY-NC 2.0)