Tout est dans le titre. Ce petit tuto sera très, mais alors là très technique, voir indigeste. Mais le jeu en vaut peut être la chandelle si vous souhaitez une présentation aux petits oignons.

Lorsque l’on se lance dans la conception d ‘un site auteur, d’un blog de chroniques, il faut passer par 4 étapes (oui peut être plus, mais restons simples).

  • Le choix du support,
  • L’apparence du site,
  • Le contenu du site,
  • Le référencement du site.

Et on n’est pas sorti de l’auberge avec ces quatre-là !

Le choix du support

J’entends par là, où l’on va héberger son site mais également de quoi il sera fait (parfois, c’est du 2 en 1).

WordPress ? Blogger ? Joomla ? Wix ? Weebly ? Ils ont tous leurs qualités et leurs défauts. Et hélas, ce n’est pas le but de cet article d’en faire la comparaison (oh la vilaine !). De plus, si ce qui va suivre fonctionne avec toutes les plateformes (à condition qu’elles permettent ce genre de modifications), nous nous axerons sur WordPress.

L’apparence du site

C’est le but de l’article. J’y reviendrai donc plus loin. Le thème, le template, le design. Les polices, couleurs, images, l’agencement. Nous vivons dans un monde ou le visuel est important, soigner l’apparence de son site fait tout de suite pro, passionné, sérieux. Couplé avec une bonne organisation, il fait plaisir à l’un des cinq sens : la vue.

A l’époque où je jouais sur des forums roleplay, le design était devenu quasi primordial dans le choix d’un forum pour pas mal de nouveaux joueurs. Oui, c’est bête, ce devait être l’ambiance entre membres, les animations et, bien entendu, l’univers dans lequel se déroule le jeu. Mais l’aspect avait grande importance aussi. Parfois trop sophistiqué, l’on pouvait s’y perdre ou se retrouver avec des bugs selon le navigateur utilisé. Voilà pourquoi je conseille toujours la simplicité à défaut de connaissances techniques.

Sinon, les plus téméraires touchaient au code source du forum pour créer de véritables petits bijoux, et ce code source, c’est le CSS (et l’HTML).

Le contenu du site

Que je passerai outre également. Il dépend de ce que l’on souhaite y voir apparaitre. Le tout est de construire un menu bien organisé et hiérarchisé.

Le référencement

Bon, je crois que j’ai assez saoulé la terre entière avec ça. Visitez mon blog 😀

Qu’est-ce que le CSS ?

Acronyme de Cascading Style Sheets, le CSS est une suite de paramètres destinés à définir l’aspect de certains éléments de votre site.

Par exemple, vous voulez que vos titres soient en police Garamond, taille 14, gras, italique, souligné en pointillés d’une épaisseur de 1 pixel. Votre texte justifié en Arial 12 et dont chaque première ligne de paragraphe soit en retrait. Ceci est un exemple succinct de ce que vous pouvez faire en CSS.

Vous pouvez y ajouter de la couleur, des ombres, des effets (quoique ‘tention avec les effets, d’un navigateur à l’autre, cela peut être différent), des marges, des tailles… enfin bref, tout ce que vous avez déjà vu sur un site quoi.

Et cela ne marche pas que sur le texte, sur les images aussi. Sur tout le site.

C’est clair qu’un site complet requiert un code CSS assez conséquent et compliqué à force. Il faut alors tout définir, les marges, la taille et l’emplacement de chaque partie du site, et que ce soit Responsive (= pas tout pété sur téléphone et sur tablette) par-dessus le marché.

Mais pour WordPress, vous n’aurez besoin que de l’essentiel : les paramètres (et la syntaxe… oui elle est partout celle-là ! Dans les romans puis même dans le code source de mon blog !).

Le HTML, qu’est-ce que c’est ?

C’est, en gros, le squelette du site. Autrefois (aux temps paléolithiques du net), les sites web n’étaient codés qu’en HTML. Ce langage est une série de balises destinées à afficher ceci ici, cela là-bas, etc.  Facile à reconnaitre, elles s’écrivent entre crochets <>. Certaines seules, la plupart accompagnées de paramètres.

Il a évolué au fil du temps, il s’est fait accompagner d’autres langages (comme le PHP, Javascript) qui le rend dynamique et interactif : c’est le Web 2.0.

Nous n’irons pas plus loin sur cette explication. Juste que vous avez le HTML qui est la charpente, les murs, les portes et les fenêtres de votre site et le CSS la décoration (et même un peu plus). Grosso modo.

Si je voulais en venir là, c’est que de l’HTML, vous allez en croiser. Autant savoir que ça existe.

Que modifier en CSS sur mon blog ?

Cela dépend de ce que vous voulez. Si tout vous convient, ne changez rien. Si un élément vous arrache les yeux et que le thème ne permet aucune modification via le panneau d’administration à ce niveau-là, ce guide est fait pour vous.

Par exemple, mon thème permet l’affichage automatisé de mes articles, titres, dates, résumés à la suite, mais l’aspect de ces éléments ne me plait pas. Le titre est énorme, la date est illisible car trop petite au contraire, et je voudrais que le résumé soit en italique. Et pas moyen de changer ça simplement dans le panel administration (ça arrive).

C’est ça que vous allez pouvoir changer.

Modifier concrètement le CSS de mon WordPress

Avant tout, il faut savoir comment se rédige le CSS. Vous allez voir, c’est comme une potion magique. Il faut respecter les ingrédients, les dosages, faire quelques tests (et risquer l’explosion) et tout ira bien. Rien n’est irréversible avec cette méthode. Cela ne vous plait toujours pas, vous modifiez. Vous en avez marre, vous enlevez vos modifications et, au pire, votre site redeviendra comme avant.

Voilà la bête (appréciez) :

.titre_article
{
font-size: 24px;
color: white;
font-family: 'Bree Serif', serif;
text-shadow: 2px 2px 3px #000;
}

Cela vous parle un peu ?

Cela concerne un bidule (en fait on appelle ça un sélecteur) nommé Titre_article. Il aurait pu se nommer Tartempion, le principal est de toujours l’écrire de la même façon dans le CCS et l’HTML (et qu’il évoque ce qu’il représente pour ne pas se perdre).

Ensuite, toujours placer les paramètres que l’on souhaite attribuer à notre Titre_article entre accolades. On appelle ça, un bloc. Là, pas de mystère, ces paramètres sont les mêmes pour tout le monde (vous en aurez une liste plus loin).

Ici, nous avons :

      • Font-size : la taille de la police, 24 pixels.
      • Color : la couleur du texte. Définie à White (blanc).
      • Font-family : vous avez deviné, la police de caractères.
      • Et enfin, un effet (tout simple), Text-shadow, une petite ombre portée pour faire joli.

Et on ferme bien l’accolade sinon ça va foirer.

Autre chose d’importance. Vous voyez, il y a un point devant Titre_article. C’est parce qu’il existe des sélecteurs ayant le même nom qu’une balise HTML. Modifier un sélecteur de balise HTML, c’est avoir un impact sur toutes ces balises et non élément par élément. 

C’est pratique si vous souhaitez uniformiser votre site (chaque image ayant une bordure bleue de 5 pixels, par exemple). Mais toutes les images seront touchées ! Y compris celle que vous souhaitiez peut-être sans bordure. Donc mieux vaut opter pour un sélecteur placé sur les images que vous souhaitez modifier uniquement. Et comme votre site est dynamique, une seule modification suffira pour que toutes les images concernées par ce sélecteur soient touchées.

Bref, un sélecteur de balises HTML s’écrit sans le point, un sélecteur personnalisé, avec le point. Mais ce point n’apparaît que dans le CSS pas l’HTML.

Mais avant, il faut savoir quel sélecteur modifier ! Comment se nomme-t-il ce petit coquin ?

Comment trouver le sélecteur CSS qui m’intéresse ?

Retroussez vos manches, on va mettre nos mains dans le bloc moteur de la bête.

Ouvrez votre blog/site via votre navigateur et dénichez ce que vous souhaitez modifier. Vous l’avez, votre titre trop gros ? Bien.

Selon votre navigateur, entrez en mode Inspection.

      • Sous Chrome : appuyez sur la touche F12 (et ne fuyez pas !).
      • Sous Firefox : appuyez sur les touches Ctrl+Maj+C (en même temps). Et ne fuyez pas non plus !

Faites la même combinaison de touches pour revenir en arrière.

C’est ici que cela se complique car vous allez devoir chercher dans le code source un peu sans trop savoir à quoi ressemble le sélecteur. Et justement, c’est le but, savoir quel nom lui a été attribué.

Ainsi, grâce à lui, vous ajouterez ou modifierez des paramètres.

Passez lentement votre curseur de souris sur les différentes lignes de codes de la fenêtre principale qui vient de s’afficher. Bougez un peu. Vous voyez ? Les éléments de votre site sont colorés. Cela signifie que vous passez sur le bout de code qui correspond à cet élément.

Je vous montre :

Pour affiner votre recherche et arriver au vilain titre mal fichu, déployez le code en cliquant sur la petite flèche de chaque balise div entre crochets (c’est souvent des balises div), poursuivez jusqu’à tomber sur la portion la plus exacte, le titre et rien que le titre.

Ici, je suis tombée sur un sélecteur du nom de bdp-post-title.

Ce que vous devez viser pour connaitre le sélecteur, c’est ce qui se trouve entre les parenthèses de class = «  » . Class définit toujours le sélecteur de l’élément, de la balise.

Bon, nous avons notre sélecteur, allons le modifier.

La syntaxe CSS (petit topo rapide)

Il y a des règles à respecter pour écrire du code CSS sinon ça plante et c’est tout moche (ou alors rien ne change). Certaines ne vous servirons pas, mais vous serez au courant.

Majuscules ou minuscules ?

Premièrement, houra, majuscule ou minuscule, le CSS s‘en fiche. On se sert souvent des Majuscules pour délimiter clairement deux mots comme TitresArticles plutôt que d’employer un underscore.

Syntaxe du sélecteur

Les sélecteurs s’écrivent uniquement avec des signes alphanumériques (lettres et chiffres) ainsi que le tiret et le tiret de soulignement (underscore). Et bien entendu, le point avant le sélecteur personnalisé, mais seulement avant, pas dedans ni derrière. Et pas d’espace dedans non plus, jamais !

Il existe des paramètres qui s’inscrivent avec deux points, mais ne compliquons pas les choses.

Vous pouvez tout écrire sur une même ligne pour gagner de la place.

Les accolades { }

Elles enferment vos paramètres tel un bloc destiné à votre sélecteur. Bon nombre d’erreurs viennent d’une accolade oubliée.

Le point-virgule ;

Le point-virgule à la fin de chaque paramètre. C’est comme le point de votre phrase, mais les informaticiens lui ont préféré le point-virgule. Il ferme le paramètre afin de passer au suivant sans encombre. Une erreur classique à traquer quand rien ne va.

Le paramètre !IMPORTANT

Oui il est important mais surtout il s‘écrit tel quel, avec le point d’exclamation collé devant. Si en modifiant votre sélecteur, rien ne se passe, que vous n’avez pas omis le point-virgule, ni l’accolade et écrit correctement vos paramètres, il se peut que le thème prenne la main sur votre modification. Ajouter !IMPORTANT en fin de paramètre, juste avant le point-virgule permet d’imposer vôtre modification.

Exemple : 

.bdp-post-content {text-align:justify !IMPORTANT;}

Ou modifier le CSS ?

Rendez-vous dans votre panneau administrateur de WordPress (connectez-vous, tout ça, au besoin).

Puis Apparence > Personnaliser > CSS additionnel

Selon le thème utilisé, cela peut varier, cherchez la case de CSS à personnaliser dans tous les cas.

Vous entrerez votre CSS dans cette grande case.

Comment modifier le CSS ?

Un exemple concret  :

Je voudrais que mon titre d’article de blog soit d’une taille de 16 pixels, de couleur jaune (beurk ! Mais c’est pour l’exemple) et centré (il sera centré par rapport au bloc qui le contient).

.bdp-post-title 
{
font-size : 16px;
color : yellow;
text-align : center;
}

Je vous ai décomposé tout ça, mais en une ligne ça marche aussi.

.bdp-post-title{font-size:16px;color:yellow;text-align:center;}

Voilà ! Vous avez modifié ce satané titre ! Alors ? Heureux ? 😀

Et c’est comme ça pour le texte, la date, l’image aussi. Enfin tout quoi.

Annexe 1 : Les paramètres et leurs effets

Ces paramètres sont trouvables sur le net. Et il en existe bien plus que ceux-ci. Tous ne seront pas utiles pour votre blog cependant.

Les termes en italique sont ceux à employer (au choix) et écrire sans faute. Les paramètres none ou normal sont par ceux pas défaut. Inutile de définir none ou normal donc, sauf si vous voulez forcer l’aspect par défaut.

Propriétés sur le texte :

      • font-family : insérer la police ici, comme expliqué juste en dessus.
      • font-size : taille de la police. S’exprime en px (pixels) mais également en % ou en em.
      • font-weight : la « graisse » de la police. On la définit en bold (gras) ou normal.
      • font-style : le style de police, défini en italic, oblique ou normal.
      • text-decoration : autres formes de style. On l’emploie avec underline (souligné), overline (souligné dessus), line-through (barré), blink (clignotant, ne fonctionne pas avec tous les navigateurs) ou none (rien).
      • font-variant : défini si la police est en petites capitales (small-caps) ou non (normal).
      • text-transform : la façon d’écrire le texte. Choisissez entre capitalize (les premières lettres de chaque mot en majuscule), lowercase (tout en minuscule) ou uppercase (tout en majuscules).
      • text-align : alignement sur la gauche (left), centré (center), à droite (right) ou justifié (justify).
      • line-height : hauteur de ligne (interligne) : se définit en pixel, % ou normal.
      • text-indent : indentation du texte sur la première ligne du paragraphe, comme dans un roman. Se définit en pixels.
      • white-space : gestion des « blancs » dans le texte. Vous avez pre (tout est conservé tel quel, pratique pour écrire du code source sans retour à la ligne ni chichi), nowrap (élimine les espaces superflus et le retour à la ligne) ou normal.
      • word-wrap : césure forcée avec break-word sinon normal.

Les couleurs :

Voir les façons de coder une couleur en Annexe 3.

      • color : couleur des caractères du texte. 
      • background-color : couleur de fond des caractères (comme un surlignage).
      • text-shadow : ombre portée. Se défini au moyen de valeurs en pixels plus la couleur entre parenthèses. Ce qui donne texte-shadow (horizontal,vertical, fondu, couleur) ; Exemple : text-shadow (5px 5px 2px blue);

Les bordures (peut être utilisées comme soulignement) :

Les bordures peuvent être définies pour les quatre cotés (et former une boite fermée autour de votre texte ou image), mais vous pouvez également définir chaque côté individuellement. Pour cela les valeurs sont énumérées dans cet ordre : bordure haute, droite, bas puis gauche.

      • border : définir une bordure en une ligne. S’écrit entre parenthèses, la taille, le style, la couleur.
      • border-up, border-right, border-down, border-left : la même mais pour l’un des côtés.
      • border-color : couleur de la bordure.
      • border-width : épaisseur de la bordure, s’exprime en pixels.
      • border-style : style de la bordure, se défini en solid (solide), dotted (série de points), dashed (pointillés), double (double ligne), groove (rainure), ridge (en relief), inset (relief intérieur), outset (relief extérieur).

Pour faire un soulignement, par exemple :

border-down(1px, solid,black);

En cadeau-bonus, insérer une lettrine :

C’est d’un niveau un peu au-dessus (quand je vous parlais des deux points, voici un exemple), mais copiez ceci en changeant juste les valeurs au besoin). Ici, le sélecteur c’est texte (donc modifiez selon votre sélecteur à vous).

.texte:first-of-type:first-letter 
{
   float:left;
   font-size: 20px;
   padding: 2px 2px 0 0;
}

Annexe 2 : Les polices de caractères extérieures

Vous pouvez utiliser des polices classiques disponibles dans WordPress ou employer des polices extérieures. A utilisez avec parcimonie car plus vous chargerez de polices extérieures, plus vous allongez le temps de chargement de votre page (et ce temps est important pour être bien référencé).

Je dirais que trois polices bien choisies pour un blog, c’est un bon compromis. Une pour les titres, une pour les textes, une troisième éventuelle pour les citations, un titre spécial ou mettre une portion de texte en évidence.

J’utilise surtout Google fonts (je suis très Google, la petite faiblesse qui me perdra) car je sais qu’elles sont libres de droit et le site permet de les intégrer facilement. Mais vous pourrez voir le principe sur vos faites votre marché sur d’autres sites.

Rendez-vous sur https://fonts.google.com/

Faites votre choix en cliquant sur le plus en rouge pour les glisser dans votre liste de sélection.

Quand vous avez terminé, ouvrez cette liste qui s’affiche en bas de votre écran.

J’en ai choisi deux. Cliquez sur l’onglet @IMPORT pour afficher les mêmes infos que moi.

Copiez la ligne :

@import url('https://fonts.googleapis.com/css?family=Alegreya|Alegreya+Sans');

Laissez tomber les balises style et copiez dans la case de CSS personnalisé (tout en haut, avant les autres paramètres).

Ensuite, définissez le nom de votre police employée comme indiqué dans la fenêtre dessous.

font-family: 'Alegreya', serif;

La règle : une font-family par sélecteur, sinon c’est la dernière mentionnée (et disponible) qui sera utilisée.

Annexe 3 : les codes couleur

Vous pouvez définir votre couleur de trois façons.

Via son nom (unique par couleur), son code hexadécimal (un truc du genre #FFFFFF, hashtag suivit de 6 symboles correspondant au Rouge, Vert puis Bleu) ou via son code RGB (Red, Green, Blue) qui est le mélange des trois couleurs primaires (aussi).

Ce qui donnera des propriétés telles que :

color : #FF0000;
background-color : yellow ;
border-color : rgb(255, 192, 203) ;

Pas de panique, il existe des listes de couleurs sur le net, des nuanciers, bref, tout ce qu’il faut. En voici un parmi d ‘autres :

https://htmlcolorcodes.com/fr/noms-de-couleur/

Annexe 4 : Des générateurs pour faire joli

A utiliser avec parcimonie également, tout en sachant que ce ne sera pas forcément reproduit de la même manière sur tous les navigateurs. C’est sans doute un (gros) niveau au-dessus, donc tatillonnez doucement si vous débutez. Faites des tests.

Piochez :

https://www.megaptery.com/2012/05/21-outils-generateurs-css-developpeurs-web.html

Voilà, nous sommes au bout de ce « petit » tuto sur comment bidouiller le design de son WordPress via le CSS. J’espère que je ne vous ai pas donné trop mal à la tête.

Articles similaires

%d blogueurs aiment cette page :