Le texte de vos articles est une des choses les plus importantes de votre blog. C'est le cœur de votre blog, ce que lit vos lecteurs. Il faut donc soigner son écriture et ses textes, mais aussi son apparence ! Une police trop petite ou peu lisible va nuire à votre blog. Il faut donc bien choisir vos polices et couleurs pour que le rendu soit agréable à voir mais aussi à lire.
Dans ce tutoriel nous allons nous intéresser à l'apparence de vos articles : le corps de texte, mais aussi les titres à l'intérieur de vos articles.
Sommaire
- Faire une sauvegarde de son thème
- Modifier l'apparence des articles
- Où coller les codes CSS de ce tutoriel
- Le corps de texte
- Les titres de l'article
- Exemple
- Utiliser des polices Google Fonts
Faire une sauvegarde de son thème
Comme d'habitude, commencez toujours par faire une sauvegarde de votre thème avant d'y apporter des modifications ! Si vous faites une erreur, même d'inattention, vous pourrez facilement revenir en arrière ;)Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.
Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.
Modifier l'apparence des articles
Dans ce tutoriel nous allons utiliser des codes CSS pour modifier l'apparence du corps de texte et des titres des articles.Attention, ces codes CSS sont basés sur le thème Simple de Blogger. Si vous avez téléchargé un thème pour votre blog alors ces codes no fonctionneront peut-être pas car la structure des thèmes téléchargés est différente des thèmes classiques de Blogger.
Où coller les codes CSS de ce tutoriel
Une fois votre sauvegarde effectuée, allez ans Thème à partir du tableau de bord Blogger. Cliquez ensuite sur Modifier le code HTML :
Cliquez n'importe où à l'intérieur de la boîte de code et appuyez sur Ctrl et F en même temps (Cmd et F sur Mac). Un champ de recherche doit apparaître à l'intérieur de la boîte de code. S'il apparaît en haut de la page web, alors cliquez à nouveau à l'intérieur de la boîte de code, puis appuyez à nouveau sur Ctrl et F.
Dans le champ de recherche qui apparaît en haut à droite de la boîte de code, collez :
]]></b:skin>C'est au-dessus de cette ligne qu'il faudra coller les codes CSS donnés ci-dessous dans le tutoriel ;)
Le corps de texte
Pour modifier le corps du texte de vos articles, il faut utiliser le code CSS suivant :/* Corps de texte des articles */
.post-body {
}Voici quelques exemples de paramètres que vous pouvez modifier, avec des explications en commentaire :
font-family: Arial; /* Police */
font-size: 14px; /* Taille de la police */
font-weight: normal; /* Graisse : normal = normal | bold = gras */
font-style: normal; /* Style : normal = normal | italic = italique */
line-height: 1.6; /* Interligne */
text-transform: normal; /* Transformation du text : normal = normal | uppercase = tout en majuscules | lowercase = tout en minuscules | capitalize = majuscules à chaque première lettre */
letter-spacing: 0px; /* Espacement entre les caractères */
color: #333333; /* Couleur */
text-align: left; /* Alignement : left = gauche | center = centré | right = droite | justify = justifié */Les titres de l'article
La plupart des personnes utilisent rarement les titres dans leur articles. Selon l'article, ce n'est peut-être pas nécessaire. Mais les titres sont des outils très importants pour ajouter une hiérarchie, une organisation dans l'article. Vous pouvez même vous amuser à ajouter de la couleur ou une jolie police originale dans vos articles avec des titres.Les titres sont disponibles dans la barre d'outils de l'éditeur de texte Blogger :
Il y a 3 titres disponibles :
- Titre : titre de niveau 2 (H2)
- Sous-titre : titre de niveau 3 (H3)
- Titre secondaire : titre de niveau 4 (H4)
Les codes CSS à utiliser pour modifier ces titres sont :
/* Titres des articles */
/* Titre - H2 */
.post-body h2 {
}
/* Sous-titre - H3 */
.post-body h3 {
}
/* Titre secondaire - H4 */
.post-body h4 {
}En plus de ces paramètres vous pouvez ajuster l'espace autour des titres avec les paramètres :
margin-top: 20px; /* Marge au-dessus */
margin-bottom: 20px; /* Marge en-dessous */Exemple
Voici un exemple de corps de texte et titres des articles modifiés :
Pour le corps de texte, j'ai défini :
- la police en
Lato - une taille de
14px - une graisse normale :
normal - une interligne de
1.6 - un espacment des carctères de
0.5pxpour aérer un peu le texte - une couleur gris foncé :
#333333 - un alignement du texte justifié :
justify
Voici le code CSS correspondant :
/* Corps de texte des articles */
.post-body {
font-family: 'Lato', sans-serif; /* Police */
font-size: 14px; /* Taille de la police */
font-weight: normal; /* Graisse : normal = normal | bold = gras */
line-height: 1.6; /* Interligne */
letter-spacing: 0.5px; /* Espacement entre les caractères */
color: #333333; /* Couleur */
text-align: justify; /* Alignement : left = gauche | center = centré | right = droite | justify = justifié */
}Pour les titres j'ai choisi 2 couleurs différentes : un jaune moutarde (
#e8b960) et un bleu clair (#88ccc5). Les titres sont en gras, et la taille des titres diminue selon son niveau : le titre h2 est plus grand que le h3 qui est plus grand que le h4.La police choisie est
Montserrat, et les caractères sont espacés de 2 ou 3 pixels.Pour finir, j'ai ajouter une marge au-dessus et en-dessous des titres pour aérer le contenu de l'article.
Voici le code final des titres :
/* Titres des articles */
/* Titre - H2 */
.post-body h2 {
text-transform: uppercase; /* Transformation du text : normal = normal | uppercase = tout en majuscules | lowercase = tout en minuscules | capitalize = majuscules à chaque première lettre */
font-size: 28px; /* Taille de la police */
color: #e8b960; /* Couleur */
margin-top: 20px; /* Marge au-dessus */
margin-bottom: 20px; /* Marge en-dessous */
letter-spacing: 3px; /* Espacement entre les caractères */
font-family: 'Montserrat', sans-serif; /* Police */
font-weight: bold; /* Graisse : normal = normal | bold = gras */
}
/* Sous-titre - H3 */
.post-body h3 {
text-transform: uppercase; /* Transformation du text : normal = normal | uppercase = tout en majuscules | lowercase = tout en minuscules | capitalize = majuscules à chaque première lettre */
font-size: 22px; /* Taille de la police */
color: #88ccc5; /* Couleur */
margin-top: 20px; /* Marge au-dessus */
margin-bottom: 15px; /* Marge en-dessous */
letter-spacing: 2px; /* Espacement entre les caractères */
font-family: 'Montserrat', sans-serif; /* Police */
font-weight: bold; /* Graisse : normal = normal | bold = gras */
}
/* Titre secondaire - H4 */
.post-body h4 {
font-size: 18px; /* Taille de la police */
color: #e8b960; /* Couleur */
margin-top: 20px; /* Marge au-dessus */
margin-bottom: 15px; /* Marge en-dessous */
letter-spacing: 2px; /* Espacement entre les caractères */
font-family: 'Montserrat', sans-serif; /* Police */
font-style: italic; /* Style : normal = normal | italic = italique */
}Utiliser des polices Google Fonts
Si vous voulez utiliser des polices originales pour vos articles, vous pouvez utiliser les polices Google Fonts. Elles sont gratuites et adaptés pour le web !J'ai écrit un tutoriel pour installer et utiliser ces polices, allez y jeter un œil ;)
