Dans les coulisses du blog #8: le CSS

Hello, je commence ce mois avec un nouvel opus des coulisses du blog.

Aujourd’hui je vous parle css.

Je tiens d’avance à m’excuser pour les pros du css, qui risquent d’ailleurs de se tirer les cheveux. 
Ceci est le comment coder pour les nuls. 
Coder, css des mots qui font mal et pourtant nécessaire si l’on veut avoir un blog optimal ou plus à notre image. 
C’est une des premières raisons qui m’a fait me tourner vers elementor . 
Je, vous en parlais ici

Guide Bloguer pour les nuls.

J’ai commencé par Blogger et autant vous dire que tout passe quasiment par le codage. 
éditeur wordpress
Et puis est arrivé le moment où j’ai migré vers Wordpress. 
Dans un premier temps vers la version gratuite qui même si elle est plus complète que Blogger pour moi, reste limitée. 
Voir les oubliés de wordpress.
WordPress.org devait être le Saint Graal une infinité d’options débloquées. 
Accès à des thèmes plus développés, les extensions. 
Bref, naïve que je suis, je pensais avoir un blog clé en main, sans avoir à mettre les mains dans le cambouis. 
Que néni, même s’il y a tout de même plus de facilités et un bon nombre de plugin pour nous faciliter la vie. 
Il n’y a pas le choix pour le design, il faut s’attaquer au codage. 
Je vous ai déjà parlé du livre Html 5 et CSS qui est un très bon guide pour les débutants. 

html 5 et css, un bon guide pour débuter dans le codage

J’ai commencé par le CSS dans le mode apparence. 

Étape par étape. 
Je ne vais pas vous mentir, vous avez plus ou moins de possibilités. 
Mais ça ne va pas être une révolution.
Ce qu’on y change  principalement.

Les balises titres.

Vous pouvez choisir la taille de la police, sa couleur. 
Avant d’avoir mon thème actuel, je dois dire que cela m’a bien aidé. 
Les balises titres étant par défaut plus grandes que le paragraphe. 
Ça permis de rendre la lecture de mon blog plus fluide et moins agressive. 

Les images. 

 
Celles mise en avant, il est possible de régler la taille, pour qu’elle soit plus adaptée à vos articles. 
Pour l’instant en mode apparence, ce sont les deux éléments que j’ai modifié.
Les exemples, les plus simples :

  •  h1

{
font-size: 16px
}
pour la couleur vous remplacez font-size par color et le code couleur qui correspond.

  • img

{
max-whidth: 55%
}
Voici une liste de sites qui m’a bien aidé pour le mode apparence:

Passons aux choses sérieuses. 

        <h3>Le mode éditeur. </h3>
                                    <img width="300" height="450" src="https://ydconseilscreations.fr/wp-content/uploads/2018/11/yd-conseils-creations-editeur-css-300x450.jpg" alt="éditeur css" srcset="https://ydconseilscreations.fr/wp-content/uploads/2018/11/yd-conseils-creations-editeur-css-300x450.jpg 300w, https://ydconseilscreations.fr/wp-content/uploads/2018/11/yd-conseils-creations-editeur-css.jpg 400w, https://ydconseilscreations.fr/wp-content/uploads/2018/11/yd-conseils-creations-editeur-css-107x160.jpg 107w" sizes="(max-width: 300px) 100vw, 300px" />
    <p>Celui où une erreur peut vous coûter tout votre site. 

Je vous conseille dans un premier temps de faire une sauvegarde, ou de le modifier à partir d’un thème enfant. 
Je dois vous avouer que l’éditeur me fascine tout autant qu’il me fait peur.
Là on commence à parler CSS , on rentre dans la cour des grands.
Malgré mon livre magique, c’était encore du chinois pour moi et ça l’est toujours d’ailleurs.
Où trouver les bonnes lignes de codes? Un calvaire.
C’est beaucoup moins clair qu’avec Blogger.
Et tous les thèmes ont des feuilles de styles différentes.
Je sentais déjà la migraine pointer le bout de son nez.
avoir une migraine car trop travailler
Mais je ne désespère pas pour autant.
Je vais d’abord commencer par des choses simples.
Certes, mais le problème reste le même. 
Je ne sais pas où regarder.
Et c’est là, comme signaler plus haut que les pros du CSS risque d’avoir une crise cardiaque.
Je décide d’utiliser la fonction inspecter la page pour m’y retrouver.

Dans ce cas de figure, je vais vous parler de la couleur des liens.
J’aime bien qu’il ressorte et pourr ça j’utilise la couleur.
Et le faire manuellement à chaque fois est assez pénible.
Grâce au coup de pouce d’inspecter la page.
Je sais  que ce que je dois modifier est le span style. 
Je dois vous avouer que j’ai un peu galéré pour le trouver dans l’éditeur, n’hésitez pas  à utiliser la fonction recherche d’un mot dans la page. Ça facilite la tâche.
D’ailleurs, vous pouvez tester les modifications dans la colonne de droite pour voir le résultat, ça ne modifiera pas votre thème.
Pour l’instant étant encore une débutante, c’est le moyen le plus facile que j’ai trouvé pour pouvoir toucher au code sans me perdre.

Les erreurs de css dans le thème.

Autre désillusion que j’ai eu , les thèmes ne sont pas tous parfait.
Quand vous allez mettre le nez dedans, vous allez certainement voir, des erreurs en jaune et rouge.
Les jaunes, je n’y ai pas touché, les rouges corrigées.
Avec mon thème actuel , je n’en ai pas, alléluia.
C’est assez frustrant surtout si l’on a payé.
Je vous ai également fait une liste de sites si vous voulez vous aventurez dans l’expérience éditeur.

    <p> A travers cette rubrique, je partage mes trucs et astuces.

Et aussi mes doutes. Alors, j’espère que ce petit topo vous a aidé.
Si vous voulez que j’aborde un sujet en particulier, vos retours sont la bienvenue.

        <h4>Et pour vous CSS maîtrise ou galère?</h4>
                                    <img width="400" height="600" src="https://ydconseilscreations.fr/wp-content/uploads/2020/03/ydconseilscreations-css-400x600.png" alt="coulisses du blog le css" srcset="https://ydconseilscreations.fr/wp-content/uploads/2020/03/ydconseilscreations-css-400x600.png 400w, https://ydconseilscreations.fr/wp-content/uploads/2020/03/ydconseilscreations-css-273x410.png 273w, https://ydconseilscreations.fr/wp-content/uploads/2020/03/ydconseilscreations-css-107x160.png 107w, https://ydconseilscreations.fr/wp-content/uploads/2020/03/ydconseilscreations-css-367x550.png 367w, https://ydconseilscreations.fr/wp-content/uploads/2020/03/ydconseilscreations-css-585x877.png 585w, https://ydconseilscreations.fr/wp-content/uploads/2020/03/ydconseilscreations-css-404x605.png 404w, https://ydconseilscreations.fr/wp-content/uploads/2020/03/ydconseilscreations-css-434x650.png 434w, https://ydconseilscreations.fr/wp-content/uploads/2020/03/ydconseilscreations-css.png 735w" sizes="(max-width: 400px) 100vw, 400px" />

pinit fg en rect red 28

13 Comments

  • linemourey
    Posted novembre 4, 2018 5:23 0Likes

    Le CSS tout un mystère pour moi ! Heureusement que Monsieur Marketing gère les dessous de mon blog et site pro parce que sinon, j’aurai déjà claqué la porte ! Néanmoins, j’apprends aussi petit à petit 😉

    A bientôt,
    Line de https://la-parenthese-psy.com/

    • Yasmine
      Posted novembre 4, 2018 5:26 0Likes

      Tu as bien de la chance, je rêve d’avoir ce genre d’aide 😊. Pas à pas on apprend.

  • La Parenthèse d'Or
    Posted novembre 4, 2018 6:01 0Likes

    Et bien, je garde ton article sous la main, parce que moi je suis toujours une grosse nul en CSS :p

    • Yasmine
      Posted novembre 4, 2018 6:03 0Likes

      Je ne suis pas une grande pro. Mais quand j’ai réussi à changer ma première ligne de code et de ne pas faire planter le site, c’est comme si j’avais gagné les jeux olympiques 😂

      • La Parenthèse d'Or
        Posted novembre 4, 2018 6:05 0Likes

        Chaque petite victoire est importante :p

  • Miss Avery
    Posted novembre 5, 2018 6:55 0Likes

    Brrrrr ça me donne vraiment pas envie de me mettre dans tout ça 🙂 mais bravo de l’avoir fait !

    • Yasmine
      Posted novembre 5, 2018 9:53 0Likes

      Lol, ça fait peur. Mais la satisfaction de se dire je l’ai fait, n’a pas de prix. Il faut juste y aller pas à pas.

      • Miss Avery
        Posted novembre 5, 2018 10:38 0Likes

        J’avoue que c’est pas dans mes priorités pour le moment mais peut-être un jour ^^ merci pour les conseils !!!

  • Melle Bulle
    Posted novembre 5, 2018 8:14 0Likes

    Charabia total pour moi lol ! Mais merci pour tes explications, tu démystifies un peu le truc pour moi … 😀

    • Yasmine
      Posted novembre 5, 2018 8:26 0Likes

      Lol, c’était un peu le but. Si je peux y arriver tout le peut à son rythme.

  • Parents-voyageurs
    Posted novembre 5, 2018 10:10 0Likes

    Je déteste le CSS et d’ailleurs je n’y mets jamais les mains. Je bidouille ! 🙂

    • Yasmine
      Posted novembre 5, 2018 10:14 0Likes

      Je pense qu’il est notre ennemi à tous. Mais pas si indomptable que ça, en fonction de ce qu’on veut faire.

Laisser un commentaire

%d blogueurs aiment cette page :