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

5 astuces pour un joli blog Blogger

Vous proposer des tutoriels, c'est bien, mais vous donner quelques conseils et astuces ça peut être sympa aussi non ? :)

Alors je vous propose un nouveau type d'articles, que je vais nommer Astuces, pour partager des conseils et vous donner des outils utiles pour la création de votre blog. Ça vous tente ?

Allez, on commence par 5 astuces simples pour faire un joli blog ! ;)

1 / Que vos photos s'imposent !

Les photos attirent le regard, et donc le lecteur. Il faut donc bien choisir ses photos, mais aussi les mettre en valeur dans vos articles.
Une toute petite image semblera perdue au milieu de beaucoup de texte. Pour la mettre en valeur utilisez des images qui font la même largeur que la zone de texte de votre article.

5 astuces pour un joli blog Blogger

La taille de vos images va dépendre de la taille de la zone d'article de votre blog. Voici une méthode qui vous permettra d'ajuster la taille de vos images à 100% de la largeur de votre article :

Utilisez des images de 700 pixels de large. Généralement, cette largeur suffit amplement.
Allez ensuite dans Modèle > Modifier le code HTML, et cherchez le code suivant :
/* Content
Juste au-dessus de cette ligne collez :
.post img {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
Sauvegardez.
Quand vous insérez une image à votre article, sélectionnez Taille originale sous l'image :

5 astuces pour un joli blog Blogger
Et voilà ;)

N'hésitez pas à ajouter une touche personnelle à vos photos : une bannière avec un petit titre par exemple. Essayez de garder les mêmes couleurs, le même style de design, les mêmes polices pour vos différents articles. Cela permettra de créer une image qui vous sera propre, et une cohérence entre vos articles.

Les images de mes tutoriels sont un bon exemple. Les premières images sont créées sur le même modèle : un fond bleu ou vert clair, la même police, les mêmes éléments graphiques. Quand on voit une de ces images, on sait tout de suite que c'est un tutoriel ;)

5 astuces pour un joli blog Blogger

2 / Espacez votre contenu

C'est un point très important. Espacer votre contenu, laissez-le respirer. C'est plus esthétique et en plus ça facilite la lecture ;)

5 astuces pour un joli blog Blogger

Pour ajouter de l'espace à un élément on utilise le code CSS
margin: 10px 10px 10px 10px;
A noter que les valeurs correspondent à :
margin: au-dessus à droite en-dessous à gauche;
Par exemple, pour ajouter de l'espace au-dessus et en-dessous des titres des articles on ajoutes ce code comme ceci :
h3.post-title {
margin: 10px 0 10px 0;
}
Voici un petit tutoriel pour plus d'infos sur la modification des titres des articles ;)

3 / Variez (ou pas) les polices

Grâce aux polices web on peut maintenant très facilement se faire plaisir en utilisant de jolies polices sur son blog. Exit Times new roman et Arial. Bonjour PT sans, Lato, Montserrat, Playfair Display, et autres jolies polices !

Google Fonts vous propose un peu moins de 700 polices différentes : polices sérif, sans-sérif, script, il y en a pour tous les goûts. Mais attention à ne pas en abuser !

5 astuces pour un joli blog Blogger

Avoir des polices originales c'est bien, mais il faut savoir les utiliser.

Evitez d'utiliser plus de 2-3 polices différentes ! Même si l'envie est grande d'ajouter toutes ces belles polices à son blog, ne le faites pas.

Pour le corps de texte, utilisez une police sans-sérif ou sérif, mais pas de script ! Les polices script sont des polices esthétiques mais plus difficiles à lire. On peut les utiliser pour des titres, donc de courtes phrases. Mais sur des paragraphes entiers, la lecture devient pénible. Donc évitez.

Toutes les polices ne vont pas ensemble. Certaines se marient bien entre elles, d'autres non. Ce n'est pas évident quand on n'y est pas habitué, mais il existe des aides en ligne pour savoir quelle police utiliser avec une autre.

Type Genius est un site web qui vous propose des associations de polices. Choisissez dans la liste déroulante la police de votre choix, cliquez sur le bouton View matches et laissez-vous guider ;)
Il se peut qu'on ne vous propose qu'une ou deux polices, ou plus. Cela dépend de la police choisie.

5 astuces pour un joli blog Blogger 5 astuces pour un joli blog Blogger

Google fonts vous propose aussi des associations de polices qui peuvent aller avec celle que vous aimez. Pour voir ces associations, cliquez sur l'onglet Pop out à gauche du bouton Add to collection à la page de sélection des polices :

5 astuces pour un joli blog Blogger

Ensuite cliquez sur l'onglet Pairings :

5 astuces pour un joli blog Blogger

Survolez un paragraphe pour voir le nom de la police utilisée ;)

4 / Colorez votre blog

Les couleurs sont très importantes dans l'image de votre blog. Elles vont définir l'ambiance. Chaque couleur à une signification : sagesse, joie, passion, stabilité, sécurité, délicatesse.

5 astuces pour un joli blog Blogger

Il existe des sites spécialement conçus pour vous inspirer : sur Design seeds ou Color lovers, par exemple, vous trouverez de nombreuses palettes de couleurs ;)

Et si vous voulez créer votre propre palette de couleur, voici quelques règles d'associations pour obtenir une jolie palette harmonieuse.

5 astuces pour un joli blog Blogger

5 / Ne surchargez pas la barre latérale

Pour finir, un piège dans lequel on peut facilement tomber quand on commence son blog, c'est de surcharger sa barre latérale. Une barre latérale c'est cool, on peut y ajouter pleins de gadgets : des liens, des images, les articles les plus consultés, les catégories, etc. Mais juste parce que l'on peut ajouter tous ces gadgets ne veut pas dire qu'il faut tous les ajouter.

5 astuces pour un joli blog Blogger

Essayez de ne garder que l'essentiel, limitez le nombre de gadgets à 4-5. Un encart d'introduction, les articles les plus consultés, un formulaire pour votre newsletter, pourquoi pas par exemple. Mais aligner toutes vos pubs ou affiliations à la suite est plutôt encombrant pour votre design, et agressif pour le lecteur.

J'espère que cet article vous a plu, et que ces astuces vous seront utiles ! Bon blogging ;)

Autres articles

115 commentaires:

  1. Super article Catherine! (J'ai envie de dire, comme d'habitude! ;) ). J'aime vraiment tes nouvelles images pour illustrer tes articles, j'adore j'adore!

    RépondreSupprimer
    Réponses
    1. C'est vraiment super ton astuce des images à 100% de la page! Ca va me changer la vie!! ;) Merci pour tous ces bons conseils! :D

      Supprimer
  2. Merci pour tous ces bons conseils, je vais revoir mon blog, le graphisme et surtout la taille des photos, cela devrait venir assez vite :)

    RépondreSupprimer
  3. Merci beaucoup pour ces astuces encore une fois bien utiles !
    J'ai une petite question, pour moi c'est l'inverse, je mets mes images de sorte à ce qu'elle prenne toute la largeur, mais le texte dépasse et j'aimerai réduire le texte pour qu'il soit de la même largeur que les images, est-ce que tu sais si c'est possible ?
    Je te laisse voir avec un article http://www.lavieenlucie.com/2015/06/my-little-ocean-box-un-presque-sans.html je sais pas si je suis claire ^^
    Je te remercie,
    Bonne journée,
    Lucie

    RépondreSupprimer
    Réponses
    1. Bonjour Lucie,
      Le problème vient de tes photos. Elles sont trop petites par rapport à la zone de tes articles : la zone de tes articles fait 822 pixels de large alors que tes images font 650 pixels de large. Même si tu défini tes photos en "Taille Originale" elles ne dépasseront pas leur propre largeur qui est de 650 pixels.
      Pour régler ce problème, tu as 2 options : agrandir la taille de tes photos ou diminuer la zone de tes articles.
      Dans ce 2e cas, il te suffit d'ajouter un peu de CSS à ton blog. Dans Modèle > Modifier le code HTML, cliques sur le triangle noir à gauche de <b:skin>...</b:skin>. Appuies sur Ctrl et F en même temps. Dans la boîte de recherche colles :

      .post-body {

      Appuies sur Entrer. Juste après cette ligne colles :

      margin: 0 auto;
      padding: 0;

      Ensuite, juste au-dessus de la ligne :

      .post-body {

      Colles :

      .post-body img {
      padding-left: 0;
      padding-right: 0;
      }

      Sauvegardes, et voilà ;)

      Supprimer
    2. Bonjour !
      Je m'incruste dans la conversation car j'ai le même problème, en fait mes images sont déjà très grandes (enregistrée à 1010 pixels, et affiché en "taille originale") mais bon texte dépasse quand même. Je ne veux pas toucher à la taille de mes photos (qui seraient encore plus grandes sinon) mais raccourcir le texte. J'ai essayer ce que tu as conseillé à Lucie mais ça n'a absolument rien changer. Tu aurais une solution pour moi ?
      Merci :), Axelle

      Supprimer
    3. Bonjour Axelle,
      Pour réduire la largeur de la zone de texte de tes articles seulement, cherche le code qui commence par :

      .post-body {

      Remplace-le par :

      .post-body {
      line-height: 1.4;
      width: 1010px;
      margin: 0 auto;
      }

      De plus, au lieu d'utiliser le code :

      .post-body img {
      padding-left: 0;
      padding-right: 0;
      }

      Remplace-le par :

      .post-body img {
      padding-left: 0 !important;
      padding-right: 0 !important;
      }


      Par contre, si tu souhaites réduire la taille de l'ensemble de la page d'article (commentaires, titre compris), ce qui est plus esthétique, il faut modifier le code commençant par :

      .date-outer {

      Par celui-ci :

      .date-outer {
      position: relative;
      margin: 15px auto 20px;
      width: 1010px;
      }

      Et utilise :

      .post-body img {
      padding-left: 0 !important;
      padding-right: 0 !important;
      }

      Attention à ne PAS modifier le code de l'affichage en miniature ;)

      Supprimer
    4. J'ai fais comme tu as dis, j'ai aussi modifié la taille des articles mais ça a quand même modifié les miniatures (pourtant j'ai bien changé en dehors du code pour l'affichage des articles en grille)
      Du coup j'ai remis comme c'était avant (sans modif pour le texte etc)
      Merci quand même pour les conseils ! Ton blog est super et mon nouveau design est comme il est grâce à pas mal de tes articles :)

      Supprimer
    5. (c'est bon je n'ai fait que la modif de la taille de l'article et du coup le texte fait la même largeur que la photo & les articles sont moins grand. Hihi merci beaucoup !!!!!!!)

      Supprimer
    6. Coucou,
      Moi aussi je m'incruste dans la conversation ! Ca fait plusieurs heures que je chipotes et j'y arrives pas :/
      Est-ce que tu saurais m'aider ?
      Merci <3

      Supprimer
    7. Bonjour, peux-tu me donner le lien de ton blog pour que je puisse voir le problème ?

      Supprimer
    8. HTTP://letsglitter.blogspot.be

      Supprimer
    9. Bonjour Lets Glitter,
      Retrouve ton code CSS suivant :

      .post-body {
      margin: 0 auto;
      padding: 0;
      font-size: 110%;
      line-height: 1.4;
      position: relative;
      }

      Avant le signe } ajoute :

      max-width: 640px;

      Retrouve ensuite ton code CSS :

      .post-body img {
      padding-left: 0;
      padding-right: 0;
      }

      Remplace-le par :

      .post-body img {
      padding-left: 0 !important;
      padding-right: 0 !important;
      }

      Pour finir, juste après le signe } de ce code, ajoute le code CSS suivant :

      .post-body a {
      margin-left: 0 !important;
      margin-right: 0 !important;
      }

      Et voilà ;)

      Supprimer
  4. J'espère que mon nouveau futur design ca répondre à toutes ces astuces 😊 on est plutôt bien parties je crois ! Chouette article en tout cas !!

    RépondreSupprimer
  5. J'adore tous tes bons conseils!!
    J'avais déjà changé mes photos : affichage taille originale, je suis contente du rendu sur le blog par contre elles sont énormes dans la newsletter (feedburner), comment faire pour les ajuster dans la newsletter??

    RépondreSupprimer
  6. Super article, comme d'hab. Je m'efforce de mettre ... "depuis peu" tes conseils en pratique sur mon blog car avant je pense que je cumulais pas mal d'écueil.

    RépondreSupprimer
  7. Toujours un aussi beau boulot Catherine!
    C'est vraiment réussi et tellement bien illustré!
    J'adore créer et j'applique déjà pas mal de ces conseils que je trouve importants pour avoir une jolie interface! Je te remercie d'ailleurs pour tes articles à foison qui m'ont vraiment bien aidé pour mon blog. Franchement j'adore aller dans le code html même si ce n'est pas à la hauteur de ce que tu fais ça me passionne, je trouve ça fou ce qu'on peut faire avec des mots :)

    RépondreSupprimer
  8. Il est génial cet article ! Bravo

    Au fait, j'ai finalement trouvé un code pour mon blog, j'ai essayé et ca ne donnait pas ce que je voulais alors j'ai annulé. Si jamais je change d'avis je n'hésiterais pas à te demander un devis.

    A bientôt
    http://sarahphotographie.blogspot.com

    RépondreSupprimer
  9. Haaa, je suis tellement contente d'avoir enfin trouver comment ajuster les images à la taille du texte. Mille merci!
    Par contre, j'ai un petit soucis.Je trouvais les photos une fois agrandies un poil trop grandes. Du coup j'ai changé le code "max-width: 100%;" en "max-width: 85%;", les photos se sont bien réduites mais par contre ça a modifié la taille des miniatures des articles en page d'accueil. Elles sont devenus toutes "tassées". Je ne comprends pas pourquoi. Est-ce que tu aurais une solution?
    Merci encore pour tes explications! Ton blog est top!

    RépondreSupprimer
    Réponses
    1. Bonjour Tiphaine, c'est normal. Ajoutes ce code dans le code CSS normal de ton blog :

      .post img {
      max-width: 85%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      }

      Ensuite dans le code CSS de ton affichage en miniature retrouves le code suivant :

      .post-body img {
      width: auto;
      height: 180px; /* Hauteur des images */
      margin: 0;
      padding: 0;
      }

      Remplace-le par :

      .post-body img {
      width: auto;
      max-width: 100% !important;
      height: 180px; /* Hauteur des images */
      margin: 0;
      padding: 0;
      }

      Supprimer
    2. Ça marche! Merci beaucoup pour ton aide!

      Supprimer
    3. Je viens de voir qu'il y a des "morceaux d'écriture" (je sais que c'est un peu bizarre dit comme ça ^^) qui sortent des miniatures suite à la manipulation. Est-ce que tu aurais une solution pour cela?
      Merci encore!

      Supprimer
    4. Bonjour Tiphaine,
      Remplaces :

      .post-body img {
      width: auto;
      max-width: 100% !important;
      height: 180px; /* Hauteur des images */
      margin: 0;
      padding: 0;
      }

      Par :

      .post-body img {
      width: 100%;
      max-width: 100% !important;
      height: auto;
      margin: 0;
      padding: 0;
      }

      Supprimer
    5. Merci beaucoup pour ton aide!
      Ton blog est vraiment super, c'est une grande source d'inspiration pour la petite blogueuse que je suis! :)

      Supprimer
  10. Merci pour tous ces bons conseils.

    RépondreSupprimer
  11. Coucou !

    Je tenais d'abord à te remercier pour tes précieux tutoriels Blogger car on en trouve très peu sur le net. Il me semble te l'avoir déjà dit mais j'aime beaucoup le fait que tu nous expliques tout pas à pas et que tu prennes le temps de répondre aux questions au cas par cas. Merci pour toute cette patience, tes tutoriels m'ont énormément aidée !

    Je rencontre cependant quelques petits problèmes... (évidemment :p).
    J'ai suivi ton tutoriel pour fixer la barre de navigation en haut de l'écran mais comme tu peux le voir sur mon blog (http://tinhyjournal.blogspot.fr), je n'arrive pas à mettre la barre sur toute la largeur de l'écran. J'ai essayé de rajouter le width 100% mais cela ne fonctionne pas. J'ai aussi essayé de mettre le width en pixel mais je me suis dis que le problème ne sera pas réglé étant donné que les écrans ne font pas tous la même taille (non ?).

    Mon second problème est relatif au bas de page. J'ai réussis à le mettre sur toute la largeur (je pense), mais je n'arrive pas à mettre de couleur de fond. La première fois que j'ai essayé, la couleur ne se mettait que sur les côtés à droite et à gauche (ce qui étant sous le "contenu" du blog restait blanc) et je ne sais pas ce que j'ai fait entre temps, mais maintenant tout reste blanc !

    Je comprends tout à fait si tu n'as pas le temps de répondre à mes questions car tu dois en avoir beaucoup !

    Quoi qu'il en soit, merci encore ! :)

    xx Tinhy.

    RépondreSupprimer
    Réponses
    1. Bonjour Tinhy,

      Très joli ce que tu as fait de ton blog, j'aime bien :)

      Pour ton menu tu peux simplement changer la couleur du contenant de ton menu.
      Trouves le code suivant :

      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Et remplaces-le par :

      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      background-color: #B3E3CB;
      }


      Pour ton pied de page il faut changer la couleur de fond de 2 codes :

      .footer-outer {
      max-width: 1030px;
      margin: 0 auto;
      border-top: 0 dashed #bbbbbb;
      background-color: #F9F9F9;
      }

      Et la couleur du fond du contant :

      footer {
      background-color: #F9F9F9;
      border-top-width: 1px;
      border-top-style: solid;
      border-top-color: #F2F2F2;
      }

      Et voilà ! ;)

      Supprimer
    2. Super merci beaucoup ! Tu es adorable !
      Profite bien de tes vacances bien méritées :)

      Supprimer
  12. J'utilise souvent le rose, le bleu et de temps en temps du vert, c'est carrément moi!
    Superbe article, j'adore te lire!

    RépondreSupprimer
  13. Bonjour,

    Moi j'ai essayé de modifier la taille de mes images pour qu'elles fassent la taille du texte, et j'ai bien suivi ton tuto, copier-coller tout ce qu'il fallait etc. mais il n'y a rien à faire, le texte dépasse toujours un peu de chaque côté et peu importe que je mette des images à 700 px ou bien les images de bases qui faisaient 2000 et quelques px...ça ne marche pas, est ce que tu aurais une idée du pourquoi ?

    Bisous et belle journée,
    J'adore ton blog, alors milles merci pour les précieux tuto que tu réalises, ils m'ont bien aidé ;)

    RépondreSupprimer
    Réponses
    1. Bonjour Elodie,

      Essaye à nouveau en rajoutant le code CSS suivant :

      .post-body a {
      margin: 0 !important;
      padding: 0 !important;
      }

      Supprimer
    2. J'ai essayé, mais ça ne marche toujours pas :/

      Supprimer
    3. Actuellement, tes photos font un maximum de 700 pixels de large mais tes articles font 784 pixels de large. Il faudrait sauvegarder à nouveau tes images à au moins 784 pixels de large, dans un logiciel de traitement de photos. Fait ceci à partir de la photo d'origine, et non de celle que tu as sauvegardé à 700 pixels de large car sinon tu vas perdre en qualité d'image ;)
      Ensuite rajoute tes nouvelles photos à ton article en sélectionnant taille originale. Avec le code :

      .post-body a {
      margin: 0 !important;
      padding: 0 !important;
      }

      Tes photos devraient avoir la même taille que le texte de tes articles.

      Supprimer
    4. Ahhh nickel ça a marché, par contre ça n'a marché que à l'intérieur de l'article. Mais l'image d'aperçu (que tu viens de modifier pour avoir le zoom et tout ça :) ) ça ne la prend pas en compte, elle reste trop petite par rapport au texte.

      Supprimer
    5. Je vais rectifier ça ;)

      Supprimer
    6. Ohh super ! Merci ! ça a marché.
      C'est tellement génial de bosser avec toi :D Tu es un ange :)

      Merci milles fois pour ton aide si précieuse :)

      Supprimer
  14. Avant tout, bravo pour ton blog que j'ai découvert récemment et que je trouve hyper pédagogue, ce qui est une vraie performance pour moi qui, sans prétention, suis sans conteste le blogueur le moins doué en informatique de tous les temps !

    Plus sérieusement, une petite question sur les typos : pour en ajouter de nouvelles qui ne sont pas d'office proposées par Blogger, on est bien d'accord qu'il faut à tout prix passer par un changement de code HTML ?

    Un grand merci et encore bravo pour tout le travail réalisé !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Merci, je suis contente que mon blog puisse aider ! :)
      Pour les polices, autres que celles proposées par Blogger, oui il faut ajouter un code HTML, ou JavaScipt, qui va permettre "d'installer" la police sur le blog. Ensuite il faudra modifier le code CSS des textes dont tu souhaites modifier la police.
      J'en ai fait un tutoriel si ça t'intéresse : http://ladybirdr.blogspot.com/2014/11/utiliser-des-polices-google-fonts.html

      Supprimer
    2. Merci pour ta réponse, je vais aller regarder ça même si connaissant ma peur d'aller fouiller dans mon code HTML (toujours peur de tout casser !), je ne suis pas sûr de sauter le pas !

      Supprimer
  15. Hello :)
    Pour ma part, je n'ai pas de balise /*Content. Est-ce que tu penses que ça pourrait être /*Posts ? Est-ce que je copie-colle le code pour la taille des photos à cet endroit ?
    Merci d'avance pour ton aide !

    RépondreSupprimer
    Réponses
    1. Bonjour Marie,
      Cela vient de ton thème. Colles les codes avant la ligne :

      /* CSS Reset

      Et ça marchera ;)

      Supprimer
  16. Coucou, j'ai suivis tes instructions pour l'alignement des images au texte mais malgré que mes images soient en taille réelle et 700pixels et plus, le texte déborde quand même de quelques mm.

    Je ne sais plus quoi faire :(

    RépondreSupprimer
    Réponses
    1. Bonjour Lily,
      Peux-tu me donner l'adresse de ton blog pour que je puisse voir d'ou vient le problème ?

      Supprimer
  17. Bonjour, quel magnifique blog, je suis tombé dessus et à présent je ne ne me verrai pas faire sans, j'ai un petit soucis, je souhaiterai que mes articles soient dans des cases comme tu as fait mais je ne parviens pas à séparer mon premier article de mon deuxième, ils sont très proche et ça manque de lisibilité, peux tu me donner un coup de main ? Merci et continue comme ça ton blog est vraiment génial !!

    RépondreSupprimer
    Réponses
    1. C'est déjà sur ma liste de tutoriels à faire ;)

      Supprimer
  18. Coucou,
    Merci beaucoup pour tous ces bons conseils!
    Au risque de passer pour une attardée de l'informatique, j'aurais une petite question. :)
    J'aime beaucoup les polices de GoogleFont, comment fait-on pour les incorporer à son blog?
    J'aimerais que la police de mes articles soit Playfair display.
    Merci beaucoup pour ta réponse!

    RépondreSupprimer
  19. J'ai trouvé ton tuto pour appliqué l'écriture mais je rencontre pas mal de soucis...
    J'ai suivi les étapes mais rien se passe quand je veux appliquer l'écriture sur mon texte.
    J'ai aussi l'impression qu'en "bidouillant" le code HTLM j'ai touché à quelque chose. Je n'arrive plus à changer la police des liens de navigation par exemple, même en modifiant directement sur le code HTLM. Est-ce que tu pourrais m'aider s'il te plait?
    Merci beaucoup d'avance!

    RépondreSupprimer
    Réponses
    1. Bonjour Tiphaine,
      Je ne sais pas si c'est normal mais les liens de ton menu sont en Playfair Display. Pour modifier le texte de tes articles ajoute ce code :

      .post-body {
      font-family: 'Playfair display', serif; /* Police */
      font-size: 14px; /* Taille de la police */
      font-weight: normal; /* Graisse */
      }

      Avant :

      /* Content

      Supprimer
  20. Bonjour à toi :)
    Cela fait un moment que je viens sur ton blog et j'ai réussis à faire de mon blog ce qu'il est aujourd'hui grâce à toi et tout tes tutoriels. C'est donc un grand merci que je te dois!
    Cependant, je rencontre quelques soucis avec mes photos, que ce soit dans l'article ou dans la présentation d'article. En effet, j'ai mis mes articles en "grille" mais lorsque nous sommes sur la page d'accueil, on peut voir que ma photo d'article est allongée. Pourrai tu me dire pourquoi ?
    De plus, j'ai mis mes photos à la largeur du texte comme mentionné dans ce tutoriel mais ces dernières sont décalées sur la droite d'a peine 1 centimètre...
    Si tu trouves la réponse à mes questions, ce serai avec joie que je rétablirai les choses!
    D'avance, je te remercie et te dis à tout bientôt!
    Bisou, bisou. - Laura

    (www.chemindesreves.blogspot.com)

    RépondreSupprimer
    Réponses
    1. Bonjour Laura,
      Pour la page d'accueil, remplace ce code de ton affichage en miniature :

      .post-body img {
      width: auto;
      height: 270px; /* Hauteur des images */
      margin: 0;
      padding: 0;
      }

      Par celui-ci :

      .post-body img {
      width: auto;
      height: 270px; /* Hauteur des images */
      margin: 0 0 0 -25%;
      padding: 0;
      max-width: initial !important;
      }


      Ensuite pour la page d'article, remplace ce code :

      .post img {
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      }

      Par celui-ci :

      .post img {
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0 !important;
      padding-right: 0 !important;
      }

      A la suite de ce code colle :

      .post-body a {
      margin: 0 !important;
      padding: 0 !important;
      }

      Et voilà ;)

      Supprimer
    2. Finalement, j'ai retiré les articles en grille mais grâce à toi j'ai réussi à aligner mes photos donc encore une fois merci :)

      Supprimer
  21. Salut Catherine!
    Je n'arrive pas à mettre mes images à la même taille que mon texte, comment faire?
    si tu peux jeter un oeil
    http://northxxsouth.blogspot.fr/

    Douces bises, nxs

    RépondreSupprimer
    Réponses
    1. Bonjour,

      La zone de tes articles fait 854 pixels de large. Il faut donc que tes photos / images fassent au moins cette largeur ;)

      Supprimer
  22. Bonjour.

    Pour ajuster la taille des images à l'article, y a t-il une solution quand on a déjà beaucoup d'article avec beaucoup d'images ?

    Merci.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui on peut forcer toutes les images des articles à prendre toute la largeur de la zone d'article. L’inconvénient c'est que si les images sont plus petites que la zone d'article, alors elle seront flous.

      Voici tout de même le code pour forcer les images à prendre 100% de la largeur des articles :

      .post-body img {
      min-width: 100%;
      max-width: 100%;
      height: auto;
      }

      Supprimer
    2. Merci pour ta réponse.
      Malheureusement, j'ai aussi des images au format portrait qui sont côte à côte... Donc ca m'embête de mettre les images à la largeur de l'article.
      Je pensais plutôt à une marge... mais je n'arrive pas à trouver dans le code à ce qui correspond au texte des articles...
      Encore une fois : merci de ton aide :).

      Supprimer
    3. Malheureusement sur Blogger on ne peut pas spécifiquement cible le texte des articles. On peut utiliser le code CSS suivant :

      .post-body {
      }

      Pour modifier la police du texte, mais si tu souhaites ajouter une marge, elle va également s'appliquer à tes images.

      Supprimer
  23. Bonjour Cathy,

    Merci pour tous ces tutos, c'est super !!! Je voulais mettre une marge d'environ 30px à mon texte d'article et une marge de 0 à mes photos d'article ... Mais je viens de lire ton commentaire ci dessus et j'ai l'impression que c'est pas possible .... Zut zut.
    Actuellement j'ai un pb sur mon blog ma photo est complètement décalée.. (http://lespetitspostsdesophie.blogspot.fr)
    Si tu as le temps, pourrais tu y jeter un oeil stp, car j'en peux plus là, je vais m'arracher les cheveux lol ...

    Merci beaucoup pour ton aide !!!!

    RépondreSupprimer
    Réponses
    1. Bonjour Sophie,
      Remplace ton code :

      .post img {
      max-width: 100%;
      margin-left: -10;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      }

      Par :

      .post img {
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0 !important;
      padding-right: 0 !important;
      }

      .post-body a {
      margin: 0 !important;
      padding: 0 !important;
      }

      Supprimer
  24. Coucou :) Tout d'abord, je tenais à te remercier pour ce super blog!!!
    Je voulais savoir concernant l'aération des articles, c'est dans modifier le code HTML que l'on doit rentrer
    h3.post-title {
    margin: 10px 0 10px 0;
    }
    ?

    Je te remercie d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour Fanny,
      Oui, va dans Modèle > Modifier le code HTML.
      Ensuite clique sur le triangle noir à gauche de :

      <b:skin>...</b:skin>

      Clique n'importe où dans la boîte de code. Appuie sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît en haut à droite de la boîte de code (et non de la page web) colle :

      /* Content

      Appuie sur Entrer.
      Colle :

      h3.post-title {
      margin: 10px 0 10px 0;
      }

      Au-dessus de la ligne :

      /* Content

      Comme ceci :

      h3.post-title {
      margin: 10px 0 10px 0;
      }

      /* Content

      Supprimer
  25. Salut comme je vient de débuté je voulais bien arranger mon blog avant de commencer mais pour modifier les photos sa na fait pas.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu me donner le lien de ton blog pour que je puisse regarder le problème ?

      Supprimer
  26. Bonjour,

    merci pour ce super blog, je me lance tout juste dans la création d'un blog et votre blog va m'aide d'une grande aide !

    RépondreSupprimer
  27. Bravo pour tous ces conseils. Je voudrais soumettre un problème : depuis deux jours les images de Pinterest qui sont sur ma sidebar se positionnent sur 3 petites colonnes alors qu'elles étaient sur une seule plus large et plus longue ce qui était mieux. J'ai essayé de changer les nombres dans la page de code sans succès.
    Peux-tu m'expliquer cela ? Merci d'avance !
    data-pin-scale-width="100" data-pin-scale-height="3500" data-pin-board-width="150">

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Effectivement c'est très bizarre :/
      Pour que les images soient sur une seule colonne, il faut que data-pin-scale-width et data-pin-board-width aient la même valeur.

      Essaye avec le code suivant :

      <a data-pin-do="embedUser" data-pin-board-width="150" data-pin-scale-height="3500" data-pin-scale-width="150" href="https://www.pinterest.com/briqueloup/"></a>

      Supprimer
    2. Merci pour la réponse, j'ai mis le nouveau code proposé, malheureusement cela ne change rien.

      Supprimer
    3. Super, ce soir je viens de changer ainsi :
      data-pin-board-width="100" et data-pin-scale-width="100"
      et maintenant j'ai une seule colonne.
      Un grand merci pour tes conseils

      Supprimer
  28. Bonjour Catherine,
    J'ai encore et toujours des problèmes haha...
    Tout marche très bien mais quand j'ajoute une légende à l'image elle devient plus grande que les autres...
    Je te laisse le lien d'un article où il y à des légendes si tu veux voir:
    http://www.watercolorcake.fr/2016/03/normal-0-21-false-false-false-fr-x-none_10.html#more
    Merci d'avance et bon courage pour tout ce que tu as à faire !
    Bisous

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu réglé le problème ? Je ne vois pas de différence entre les photos avec et sans légende :/

      Supprimer
    2. Bonsoir,
      Non, je n'ai pas réglé le problème, dans l'article que je t'ai envoyé, il y a une légende sous le gâteau chat et sous le gâteau Minnie. En tout cas moi ça me les mets plus grandes que les autres... :/

      Supprimer
    3. Remplace ton code :

      .post img {
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      }

      Par :

      .post img {
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0 !important;
      padding-right: 0 !important;
      }

      !important va forcer le navigateur à prendre ces lignes en compte.
      Ensuite ajoute le code CSS à la suite du précédent (après le signe }) :

      .post-body .tr-caption-container {
      padding: 0 !important;
      }

      Supprimer
    4. Bonjour,
      Merci de ta réponse mais ça n'a pas marché...
      Sinon je vais simplement enlever les légendes :/

      Supprimer
  29. Merci beaucoup c'est très intéressant
    car je suis un peu perdue
    http://meloddyne.blogspot.fr/
    Bon après-midi

    RépondreSupprimer
  30. bonjour

    j adore ton blog il ma déjà beaucoup aidé
    je suis en train de créer le mien et j aimerai dans ma page d accueil ou se trouveront mes articles avoir un résumé de ceux ci
    avec une image a gauche le texte a droite de celle ci
    comme dans ce blog http://crocmonde.fr/
    mais je ne sais pas comment faire
    pourrais tu m aider ?

    MERCI

    RépondreSupprimer
    Réponses
    1. Bonjour Sandra,
      Pour cela il faut modifier directement le code HTML de ton thème. C'est plus délicat que de modifier les codes CSS. Mais je peux réaliser cela pour toi par prestation. C'est par exemple ce que j'ai fait pour Les Chroniques d'une Bavarde, Garlic and Grenadine, ou Cocodélices. Si cela t'intéresse, envoie-moi un message avec ce formulaire ;)

      Supprimer
  31. Bonjour,
    J'ai regardé plusieurs fois mais impossible de trouver le code : " /* Content "
    Pouvez vous me renseigner ? Merci.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En regardant ton blog, ce code est bien présent.
      Clique dans la boîte de code de ton thème et appuie sur Ctrl et F en même temps (Cmd et F sur mac), dans la boîte de recherche qui apparaît dans la boîte de code (et non en haut de la fenêtre) colle :

      /* Content

      Attention aux espaces avant et après le texte ci-dessus ;)
      Appuie sur Entrer et tu devrais le trouver.

      Supprimer
  32. Salut cath pour ton super blog qui m'à aidé et qui continue de m'aider. Mais ma préoccupation est la suivante. Peut-on réduire la largeur du texte des articles à 500px de sorte qu'ils puissent avoir la même largeur que mes images d'article qui font eux-mêmes 500px de largeur ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est tout à fait possible :)
      Ajoute le code CSS suivant :

      .post-body {
      max-width: 500px; /* Largeur maximale de la zone de texte des articles */
      margin: 0 auto; /* Centre la zone de texte des articles || Si tu ne souhaites pas la centrer, supprime cette ligne */
      }

      Avant la ligne suivante dans ton thème :

      ]]></b:skin>

      Supprimer
  33. Bonjour c'est encore moi...
    Tu vas bien ?
    J'avais une question à te poser, j'utilise une police pour le titre de mes articles, mais elle ne s'affiche pas toujours. Quand elle ne s'affiche pas mes titre son écrit en Comics sans MS et j'en ai déduis que c'était peut être un genre de police par défaut...
    Alors saurais tu par hasard comment la modifier ? Histoire que quand ma police ne marche pas ce soit moins moche..
    Merci d'avance et bon courage à toi! :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Cherche ce morceau de code dans ton thème :

      <Group description="Post Title" selector="h3.post-title, .comments h4">
      <Variable name="post.title.font" description="Font" type="font"
      default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
      </Group>

      Remplace :

      normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif

      par :

      normal normal 36px 'Dancing Script', cursive

      Attention à ne pas supprimer les guillemets autour de cette partie de code ;)

      Supprimer
    2. Super merci beaucoup !
      Bon courage pour tout le reste ! :)

      Supprimer
    3. Bon bein en fait...
      Je me suis connecté avec le pc de ma mère et verdict j'ai le même problème avec les liens de navigations (récent, accueil , ancien), les titres de mes gadgets pied de page et les titres de mes encart de présentation dans ma barre latéral >.<
      Si jamais tu as du temps...
      Encore merci !

      Supprimer
    4. Le problème peut venir des codes JavaScript de Google fonts. Remplace tes 3 codes Google fonts par :

      <link href='https://fonts.googleapis.com/css?family=Oranienbaum|Dancing+Script|Tangerine|Josefin+Slab|Sue+Ellen+Francisco' rel='stylesheet' type='text/css'/>

      Supprimer
  34. Bonjour et bravo pour vos super conseils et le design épuré de votre blog.
    J'aurais moi-même une question à vous poser... je voudrais changer la palette de couleurs proposée dans l'éditeur d'un article (en fonction de la palette du modèle).
    Pourriez-vous me guider?
    Merci

    RépondreSupprimer
    Réponses
    1. Bonjour CloClo,
      Malheureusement je ne pense pas qu'on puisse changer les couleurs par défaut dans l'éditeur d'article.
      Par contre tu peux modifier les couleur de tes titres et liens d'articles directement dans le code CSS de ton blog avec les codes suivants :

      /* Couleur des liens de l'article */
      .post-body a {
      }

      /* Couleur des titres de l'article */
      .post-body h2 {
      }

      /* Couleur des sous-titres de l'article */
      .post-body h3 {
      }

      /* Couleur des titres secondaires de l'article */
      .post-body h4 {
      }

      Si tu souhaites changer la couleur d'un mot en particulier, il faut le spécifier manuellement dans le code HTML de ton article. Clique sur le bouton HTML en haut à gauche de la page, avant le mot en question ajoute :

      <span style="color:#000000;">

      Et après le mot ajoute :

      </span>

      Par exemple avec le mot Bonjour :

      <span style="color:#000000;">Bonjour</span>

      Remplace #000000 par le code couleur de ton choix.

      Tu peux aussi créer un style CSS pour une couleur, pour aller plus vite. Par exemple tu peux créer un code CSS nommé bleu comme ceci :

      .bleu {
      color: #3CA2A2;
      }

      A coller avant la ligne suivante de ton thème :

      ]]></b:skin>

      Ensuite il te suffira d'associer ce style à ton mot dans ton éditeur. Ajoute le code suivant avant le mot en question :

      <span class="bleu">

      Et ce code après le mot :

      </span>

      Comme ceci:

      <span class="bleu">Bonjour</span>

      Sauvegarde, et voilà ;)

      Supprimer
  35. Salut Ladybird, tout d'abord, merci pour tout tes tutoriels, ils m'ont beaucoup aidé! Mais je dois avouer que j'ai finis par m'emmeler les pinceaux... je suis un peu perdu, alors voilà mes différents problème !

    1) Ma barre de navigation ne s'affiche plus à 100% de mon blog
    2) J'aimerais mettre mes articles ainsi que l'apercu et les photos à 100 % de mon blog, mais je n'y arrive pas du tout (et j'ai retourné le problème dans tous les sens)
    3)Mes fontawesome de ma barre de navigation reste collé à la bordure droite et je n'arrive pas du tout à les espacer

    En espérant que tu auras le temps de me répondre, je te remercie d'avant! Lina. (https://wearemultifaced.blogspot.fr/)

    RépondreSupprimer
    Réponses
    1. Bonjour Lina,
      Tout d'abord il faut commencer par supprimer la marge qu'il y a autour de ton blog. Pour cela retrouve ces lignes :

      /* Content
      ----------------------------------------------- */

      Juste en-dessous tu trouveras un code commençant par :

      body {

      Retrouve la ligne commençant par :

      padding:

      Remplace-la par :

      padding: 0;


      Ensuite, pour que l'ensemble de ton blog soit à 100% de largeur de la page.

      Retrouve le code CSS commençant par :

      .content-outer, .content-fauxcolumn-outer, .region-inner {

      Remplace-le par :

      .content-outer, .content-fauxcolumn-outer, .region-inner {
      min-width: 100%;
      max-width: 100%;
      _width: 100%;
      }

      Retrouve le code CSS commençant par :

      .content-inner {

      Contenant une ligne commençant par :

      padding:

      Remplace ce code par :

      .content-inner {
      padding: 0;
      }

      Ensuite retrouve ce code CSS :

      /* Fond et Bordure de la Barre de Navigation */
      #barre_nav {
      text-align: left;
      background-color: #1bd88c;
      padding: 0;
      margin: -50px;
      border-top: solid;
      border-top-color:#1bd88c;
      border-top-width: 8px;
      border-bottom:solid;
      border-bottom-color: #1bd88c;
      border-bottom-width: 8px;
      }

      Remplace la ligne :

      margin: -50px;

      Par :

      margin: 0;

      Retrouve le code CSS commençant par :

      .main-inner .column-center-inner {

      Remplace-le par :

      .main-inner .column-center-inner {
      padding: 0;
      }

      Pour finir retrouve le code CSS de ton affichage en miniature :

      /* Code pour la VERSION 2 */
      .date-outer {
      display: inline-block;
      width: 100%; /* 2 colonnes = 47% / 3 colonnes = 31% */
      height: auto;
      overflow: hidden;
      margin: 0px 5px -25px 5px;
      position: relative;
      vertical-align: top;
      }

      Remplace la ligne :

      margin: 0px 5px -25px 5px;

      Par :

      margin: 0px 0 -25px 0;

      Retrouve maintenant le code commençant par :

      .post-footer {

      Remplace le ligne commençant par :

      margin:

      Par :

      margin: 20px 0 0;

      Retrouve ton code CSS :

      .post img {
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      }

      Remplace les 2 dernière lignes par :

      padding-left: 0 !important;
      padding-right: 0 !important;

      Pour finir ajoute les 2 codes CSS suivants :

      * {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      }

      .separator a {
      margin-left: 0 !important;
      margin-right: 0 !important;
      }

      Juste avant :

      /* Apparence des liens vers la suite des articles */

      Supprimer
  36. Bonjour,merci pour cette astuce ! Par contre, j'ai un soucis concernant la taille de l'écriture de mes message. Dans l'option "modèle"-"avancé", j'ai mis le type d’écriture "times new roman" et je vœux mettre le texte en taille 20px. Et donc, le texte de présentation, ceux en dessous des images et ceux en dessous des textes (l'auteur du message...) sont plus gros que le reste. Et quand je change le type d'écriture et la taille du texte directement quand je l'écris, une fois publié, il n'y a pas de différence. Pourriez-vous m'aider s'il-vous-plais !

    RépondreSupprimer
    Réponses
    1. Bonjour Théo,
      Peux-tu me donner le lien de ton blog pour que je puisse regarder le problème ?

      Supprimer
  37. Bonjour !
    Je suis en train de construire une maquette pour mon futur blog en grande partie à l'aide de tes tutoriels (encore merci !). J'ai toutefois un problème avec ce tutoriel. Peu importe à quelle dimension je mets l'image, même si celle-ci est à plus de 1000px, et peu importe son alignement dans l'article, la zone texte est toujours plus large. Pourrais-tu m'aider s'il te plaît ?
    Voici le lien de mon blog test : http://littletestblog1.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il reste une marge autour de tes images. Retrouve ton code CSS :

      .post img {
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      }

      Et remplace les 2 dernières lignes par :

      padding-left: 0 !important;
      padding-right: 0 !important;

      Comme ceci :

      .post img {
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0 !important;
      padding-right: 0 !important;
      }

      Supprimer
  38. bonjour
    beh moi mes photos ne se mettent pas comme tu le dis snifff!!!!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il me semble que tu as trouvé comment résoudre le problème car tes photos prennent bien la même largeur que le texte de tes articles ;)

      Supprimer
  39. Merci, le rendu avec les photos ajustées à la largeur e l'article est tout simplement splendide

    RépondreSupprimer
  40. Bonjour :)

    J'ai suivi ce tuto pour pouvoir ajuster mes photos à mes articles mais elles débordent dans la barre latérale de droite... :(

    RépondreSupprimer
    Réponses
    1. Bonjour Madelis,
      As-tu bien ajouté le code CSS suivant :

      .post img {
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      }

      Vérifie que tu as bien la ligne :

      max-width: 100%;

      Car elle va restreindre la largeur des images à leur contenant, pour éviter qu'elles ne débordent.

      Supprimer
    2. Bonjour !

      J'ai exactement le même problème et cela fait des mois que j'essaie de le résoudre sans succès. L'image n'est bien qu si je la positionne à gauche mais si je la centre, elle sera trop à droite.
      J'ai remarqué que le texte centré a le même problème...

      Une idée sur la provenance de ce souci ?

      Supprimer
    3. Bonjour Marianne,
      Essaye d'ajouter !important à la fin de la ligne :

      max-width: 100%;

      Comme ceci :

      .post img {
      max-width: 100% !important;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      }

      Il y a un autre code dans ton thème qui défini la largeur maximale des images à 650px, et qui entre en conflit avec ce nouveau code. Ajouter !important lui donne le dessus.

      Supprimer
  41. Bonjour Catherine :)

    Merci encore pour ces tutoriels géniaux !

    Je reviens encore une fois vers toi car je voulais savoir s'il était possible de mettre le fil d'actualités ainsi que la colonne à droite sur quasiment toute la largeur de l'écran ? Je pense que cela serait beaucoup plus jolie.

    En te remerciant par avance pour ta réponse,

    Marion.

    RépondreSupprimer
  42. Bonjour Catherine,
    Afin d'alléger la version mobile, je cherche à réduire le nombre d'articles sur la page d'accueil qui reste à 5 minimum (version mobile) ?
    Merci pour ta réponse même si j'ai peu d'espoir que tu connaisses la solution car introuvable sur le net.
    Cordialement,
    Pierre

    RépondreSupprimer
    Réponses
    1. Bonjour Pierre,
      Effectivement, je ne pense pas que l'on puisse modifier le nombre d'articles sur la version mobile seulement. Le nombre d'articles sur la page d'accueil utilise le même paramètre sur mobile et web :/
      Désolée

      Supprimer
    2. Bonjour Pierre,
      Effectivement, je ne pense pas que l'on puisse modifier le nombre d'articles sur la version mobile seulement. Le nombre d'articles sur la page d'accueil utilise le même paramètre sur mobile et web :/
      Désolée

      Supprimer
  43. Bonjour,

    J'ai suivi beaucoup de tes (super) tutos, mais celui qui doit aligner les images au texte des articles ne fonctionne pas pour moi !
    j'ai essayé plusieurs des astuces données en réponse aux autres commentaires, mais si je réduit la zone des articles, l'article (texte et photos) déborde du cadre sur la droite :/.
    Une idée ? :)
    Mon blog: https://nos-idees-sorties-dans-le-93.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Mathilde,
      Tout d'abord ta zone d'articles fait 856 pixels de large. Il faut donc que tes images fassent au moins cette largeur.
      Ensuite, retrouves ce code :

      .post img {
      max-width: 100% !important;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      }

      Remplace les 2 dernières lignes :

      padding-left: 0;
      padding-right: 0;

      Par :

      padding-left: 0 !important;
      padding-right: 0 !important;

      Pour forcer la navigateur à ne pas ajouter de marge autour de tes images ;)

      Supprimer
  44. Bonjour !
    D'abord, un grand merci pour tes tutos, je crois que sans toi, je me serais déjà jeter par la fenêtre de mon rez-de-chaussée (peu efficace, certes, mais on fait avec ce qu'on a ^^ !). J'ai tout réussi sans demander à personne (et je dois dire que j'en suis plutôt fière) mais là, je m'incline, j'ai retourné le problème dans tous les sens, impossible de m'en dépétrer :

    Quand j'ouvre un article, il me reste toujours une marge à droite plus importante que celle à gauche, ce qui donne un air bancal à mes articles (les titres, à l'intérieur, ne semblent pas centrés).

    J'ai essayé de changer le margin/padding (les solutions que tu proposes dans les commentaires et d'autres trifouillages) mais rien n'y fait. En soi, ce n'est pas dramatique et finalement peu visible (d'après ce qu'on m'a dit) mais tout de même, quand on veut faire les choses bien, c'est agaçant.

    Est-ce que tu vois le problème ?

    Merci d'avance !

    Valentine

    RépondreSupprimer
    Réponses
    1. Bonjour Valentine,

      Tu peux réduire la marge à droite de la zone de tes articles. Retrouves ton code qui commence par :

      .main-inner {

      Remplaces la ligne commençant par margin par :

      .main-inner {
      padding: 15px 0 20px 20px;
      }

      Si tu souhaites réduire encore plus la marge à droite change la valeur 0 par une valeur négative ;)

      Supprimer
    2. Bonjour !

      Merci beaucoup pour ta réponse mais il doit y avoir un truc qui coince quelque part ailleurs, les marges bougent bien avec le code que tu as donné mais pas plus d'un certain point. C'est à dire que quoi que je change, il y a moment où ça ne se modifie plus du tout (même en tentant -50px par exemple !).

      Ce n'est pas trop grave, j'arrive à m'en accommoder, je trouve juste ça très bizarre :D

      Bonne journée à toi !

      Supprimer
    3. Bonjour Valentine,
      Essaye de rajouter !important à la fin de la ligne comme ceci :

      .main-inner {
      padding: 15px 0 20px 20px !important;
      }

      En remplaçant les valeurs en pixels ;)

      Supprimer

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