Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Modifier les textes et titres des articles sur Blogger

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.

Modifier les textes et titres des articles sur Blogger

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 :
Modifier les textes et titres des articles sur Blogger

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>
Appuyez sur Entrer pour trouver cette ligne dans votre thème.

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 {
}
Avant le signe } de ce code, collez les paramètres que vous voulez définir à votre corps de texte.

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é */
Vous n'êtes pas obligés de tous les utiliser. Sélectionnez simplement ceux qui vous intéressent.

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 :

Modifier les textes et titres des articles sur 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 {
}
De même que pour le corps de texte, collez les paramètres de votre choix avant le signe } du code du titre à modifier.

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 :

Modifier les textes et titres des articles sur Blogger

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.5px pour 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 ;)

Autres articles

Aucun commentaire:

Enregistrer un commentaire

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger