Comment embellir vos articles de blog avec CSS ?

Second opus qui vous conduira de nouveau dans les méandres du CSS (et de l’HTML). Bien que j’ai déjà mentionné tout ça dans un article précédent, je me répéterai ici plutôt que de vous y renvoyer. Ainsi cet article sera complet.

Lorsque l’on crée un blog, c’est pour y écrire quelque chose. Articles, avis, chroniques, billets d’humeur, annonces, tutoriels.

Un peu de tout ^^

Et l’important dans tout cela outre l’intérêt de la chose, c’est sa présentation.

Un texte fait de gros pâté est indigeste, alors qu’une présentation aérée est toujours plus sympa. Il y a également quelques petites règles à savoir. Pas forcément gravées dans la pierre.

On commence par les piqûres de rappel.

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 ici, vous n’aurez besoin que de l’essentiel : les paramètres et la syntaxe.

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 les éléments de votre site. Facile à reconnaître, elles s’écrivent entre crochets <>. Certaines seules, la plupart accompagnées de paramètres entre ces crochets.

De plus, la plupart vont par deux, l’une des balises “ouvrant” et l’autre “fermant”. Dans ces cas-là, on les reconnait aisément car la balise fermant est toujours accompagnée d’un slash /.

Exemple :

<bold>Votre texte en gras ici</bold>

Et comme vous le devinez, il est possible d’insérer des balises ayant les mêmes propriétés que certains paramètre CSS. C’était d’ailleurs la seule façon de faire à la préhistoire du web.

Si je voulais en venir là, c’est que non seulement de l’HTML, vous allez en croiser, mais vous devrez cette fois insérer votre CSS via certaines de ces balises HTML.

Comment éditer mon code HTML ?

Indispensable si vous souhaitez le modifier, isn’t it ?

A la différence du tuto précédent, bien que vous ne détruirez rien, ce sera plus ardu de revenir sur vos pas si vous changez d’avis. Il suffira certes de simplement effacer ce que vous avez ajouté et qui ne vous convient pas ou plus. Mais ceci pouvant, selon ce que vous avez souhaité modifier, se trouver un peu partout dans le code, ce sera un poil plus long si vous avez fait beaucoup d’ajouts.

Mais jamais impossible ! Au pire, effacez le formatage du texte et recommencez (bon ok, j’ai rien dit :p ).

Revenons à nos moutons. Comment éditer votre code HTML ou plus communément appelé Code source.

Tout d’abord, rendez-vous dans l’éditeur de votre article.

Sous WordPress.com :

Avec la nouvelle interface “Gutenberg” (qui l’aime ? Levez le doigt). Rendez-vous sur le bloc de texte à modifier. Une barre flottante apparaît. Choisissez les trois points puis Modifier en HTML.

Voilà, vous avez les mains dedans. Pour revenir à l’éditeur précédent, toujours les trois points puis Modifier visuellement.

Vous verrez sans doute les balises <p> et </p> entourant votre paragraphe. Et ça tombe bien car ces balises définissent justement un paragraphe ! Et vous pourrez entrer des modifications sur ce paragraphe dans cette balise (celle “ouvrante”).

Je vous avoue que j’utilise toujours l’ancienne interface. Si vous faites comme moi, cliquez sur le petit onglet texte (à côté de Visuel) en haut de la fenêtre d‘édition.

Sous blogger (Google) :

Lorsque vous êtes dans l’interface de création d‘un article, cliquez sur le bouton HTML. Bête comme chou.

Ici, par contre, pas de balise paragraphe p. Il devrait pourtant, mais ce n’est pas grave, il est possible d’en ajouter sans tout casser. Sous Wix : (je n’avais jamais testé cette possibilité et… apparemment il n’y a pas moyen). De même sous Weebly. Merci les gars, vous m’aidez pas beaucoup hein !

Comment s’écrit concrètement le HTML

(Rappel) Le HTML s’écrit via des balises entre crochets. Le CSS, lui, s’écrit entre accolades. Mais pas ici.

Pourquoi faire simple quand on peut faire compliqué, vieil adage d’informaticien.

Si précédemment nous écrivions du code CSS à part du code HTML, ici, nous l’allons l’insérer directement dans celui-ci. Il n’y aura pas d’accolade, mais des guillemets.

Ce n’est pas pour rien que les éditeurs de blogs modernes permettent de construire leurs articles au moyen de blocs. En HTML, tout est également construit à partir de blocs. Repérez dans le code source le bloc contenant le texte ou le titre à modifier.

Les titres

Ils s’écrivent uniquement avec une balise H. Comme ils peuvent être hiérarchisés, plus exactement Hn. Tout à fait concrètement H1, H2, H3, H4, H5 et H6.

Les paragraphes

Comme nous l’avons vu, ils sont censés être entourés de balises <p> et </p>. Mais ce n’est pas toujours le cas. Ça marchera aussi. Vous pouvez soit ajouter cette balise p (paragraphe) ou une balise passe partout telle que <div> ou <span>.

Les images

La balise image est de celles qui contiennent des paramètres. Obligé pour indiquer l’adresse de l’image, mais aussi d’autres petites choses. En outre, c’est une balise solitaire. Et non <image> ne possède pas de balise fermante </image>.

Exemple :

<image src=”dossier_images/paysage.jpg”>

Listes à puces

La balise principale de la liste à puce est <ul>pour des puces graphiques, <ol> pour de puces alphanumériques. Chaque élément étant défini ensuite, à l’intérieur par une balise <li>.

Exemple :

<ul>
<li>Puce 1.</li>
<li>Puce 2.</li>
<li>Puce 3.</li>
</ul>

Vous pouvez insérer du CSS dans ces balises (voir ci-dessous) OU utiliser des balises HTML permettant de personnaliser votre texte. Certaines seront à double emploi, d’autres uniquement en CSS. Par exemple, passer un texte en italique se fait en HTML comme ceci :

<p><em>Mon texte en italique version HTML.</em></p>

Ou en CSS comme ceci :

<p style=”font-style:italic;”>Mon texte en italique version CSS.</p>

Cet exemple ne vous servira pas vraiment puisque tout bon éditeur permet de passer en italique d’un clique.

Quelques balises HTML

<b>Texte en gras</b> ou <strong>Texte  en gras</strong>
<i>Texte en italique</i> ou <em>Texte en italique</em>
<sub>Petits caractères bas</sub>
<sup>Petits caractères hauts</sup>
<del>texte barré</del>
<mark>Texte mis en évidence</mark>

<ol type="1">Liste numérique (par défaut).             
<ol type="A">Liste alphabétique, majuscules.
<ol type="a">Liste alphabétique, minuscules.
<ol type="I">List numérique en chiffres romains, majuscules.
<ol type="i"> List numérique en chiffres romains, minuscules.

Quelques styles CSS

<p style = « text-decoration: underline; »>Souligné</p>
<p style = « text-decoration: overline; »> Surligné </p>
<p style = « text-decoration: line-through; »>rayé</p>
<p style = « text-decoration: blink; »>Clignotant</p>
<p style = « text-transform: capitalize; »>Première lettre en majuscules</p>
<p style = « text-transform: uppercase; »>Tout en majuscules</p>
<p style = « text-transform: lowercase; »>Tout en minuscules</p>

Pour un effet ombré :

<p style = « text-shadow: 5px 5px 5px black; »>Ce texte est ombré.</p>

Pour une indentation de 20 pixels sur la première ligne uniquement :

<p style= « text-ident :20px ;»>…</p>

Les marges

Intérieures avec :

<p style= « padding :50px ;»>Texte/<p>

Ou, définissant certaines marges (haut, gauche, bas, droite) :

<p style= « padding :10px 50px 10px 50px ;»>Texte/<p>
<p style= « padding-top :50px ;»>Texte/<p>
<p style= « padding-left :50px ;»>Texte/<p>
<p style= « padding-bottom :50px ;»>Texte/<p>
<p style= « padding-down :50px ;»>Texte/<p>

Extérieures avec :

<p style= « margin :50px ;»>Texte/<p>

Ou, définissant certaines marges (haut, gauche, bas, droite) :

<p style= «margin :10px 50px 10px 50px ;»>Texte/<p>
<p style= «margin-top :50px ;»>Texte/<p>
<p style= «margin-left :50px ;»>Texte/<p>
<p style= «margin-bottom :50px ;»>Texte/<p>
<p style= «margin-down :50px ;»>Texte/<p>

Chronique du blog « Bite me if you can » pour La fiancée de Gravesend

Une nouvelle chronique pour La fiancée de Gravesend, très gentiment rédigée par (Jenny) Miss Borgia du blog Bite me … if you can que je remercie beaucoup beaucoup.

Vous pouvez en prendre connaissance ici ou sur son blog :

Ah, les mariages arrangés, si je tenais le con qui a inventé ça !! Je passe en première position pour lui dire ma façon de penser !! Katherine, l’une des personnages de cette histoire, en fait les frais à cause de son père au bord de la faillite !! (En même temps Gros, tu l’as bien cherché quelque part !! Bah oui, Môssieur est directeur d’une mine ; faut pas s’attendre à devenir Trump non plus !!)

Donc, ce cher papa a tout arrangé . Et par les temps qui court en ce temps là , époque Victorienne et tout le cérémonial pompeux des bonnes familles, il ne fallait pas jouer  « aux cons ». pourtant, Katherine ne veut pas de ce truc, elle veut un mari qui saura la respectée et non pas un prêteur sur gages. Féministe avant l’heure ? Ouais, mais un chouilla  pot de glue, parce qu’elle s’évertue à draguer un ex lieutenant de l’armée anglaise revenu des Etats unis, de la guerre d’indépendance avec son ami. Celui –ci n’aspire qu’à une chose, devenir fermier et ne plus penser à la guerre ;  pas au mariage !! Autant dire que la petite dame va ramé !!

Ambiance « prout prout » au départ, mais tout le long, nous apprenons à connaitre les personnages et par conséquences, on s’y attache. Mention spéciale à Charleston, qui réapprend à vivre  après son passé d’esclave.

Merci Gaelle, lu d’une traite !! Nuit blanche mais j’ai été totalement embarquée dans cette aventure, qui je dois dire ma totalement remise dans le bain des romances historique, tu es la seconde auteure qui m’a fait renouée avec ce genre et je ne suis pas déçue !! Merci pour cette super nuit blanche !!

Si vous aussi, vous êtes tenté par une nuite blanche dans les campagnes du Kent du 18ème siècle, découvrez La fiancée de Gravesend.

Disponible sur Amazon en version numérique, broché et « poche ».

Chronique de « Les livres, une dépendance » pour La fiancée de Gravesend

Un grand merci à Claudia alias Cloclo1313 du blog Les livres, une dépendance. Une première chronique pour La fiancée de Gravesend qui me fait chaud au cœur. Ecrire, c’est se faire plaisir, mais lorsque l’histoire plait, c’est encore mieux.

Je vous laissez en prendre connaissance ci-dessous ou sur son blog, à cette adresse.

Je ne sais pas vraiment quoi dire. C’est la première fois que je chronique un livre historique. J’en raffole mais habituellement j’en fait ma lecture personnelle.

Dans ce roman, l’on peu ressentir toutes les recherches qui ont du être effectué. Des personnages profonds, avec leur passer et leur douleurs. Un personnage principal, une jeune femme, au tempérament bien trempé. Je voit trop souvent dans les romans historiques des héroïnes soumises aux hommes et qui fait tous ce que son entourage lui demande sans rechigner. Gaëlle Laurier à réussi à démarquer sont oeuvre de toutes celles déjà écrites.

Un roman qui n’a pas son pareil pour nous emmener loin de la réalité. Pourquoi l’auteure n’a-t-elle pas fait un bouquin plus long? J’en aurait lu encore des centaines de pages.

Je fini cette chronique en trois mots:

Coup de Coeur.

Merci à l’auteure pour ce service de presse.

Envie de savoir si cette jolie histoire deviendra un coup de cœur ?

Disponible sur Amazon en version numérique, broché et « poche ».

[Corrections] Pis ou pire ?

Parce que je ne savais que rarement lequel choisir, optant plus généralement pour pire et bien souvent à tort. Quelle est la signification de ces deux mots et comment bien les employer ?

C’est tout bête, il faut se rappeler de leurs contraires.

Pire est synonyme de mauvais.

En le replaçant par meilleur, si la phrase sonne juste, on l’emploie.

Pis est synonyme de mal.

En le remplaçant par son contraire également, à savoir mieux.

Exemples :

  • Tant pis (mieux) si je rate mon train.
  • Il n’existe pas pire (meilleur) fromage que celui-là !

A nos corrections !

Comment optimiser un article (le référencement ou SEO) ?

Référencement et SEO, ces deux termes reflètent la même chose : les actions visant à ce que votre site auteur ou votre blog apparaissent au plus haut dans les moteurs de recherche (on appelle ça de la visibilité).

Et question moteur de recherche, l’on mise majoritairement sur Google, libre à chacun d’employer le service qu’il préfère, mais il ne faut pas oublier que Google possède 93 % des parts de marché en France, 86 % aux États-Unis et 92 % dans le monde. Il est donc de loin le plus utilisé en France, mais aussi partout ailleurs. Donc, visons ce géant si l’on souhaite être efficace.

Référencement SEO

Il faut savoir que le référencement se fait sur trois branches :

1. Optimisation de la structure interne du site

Les moteurs de recherche doivent trouver les informations pertinentes afin d’indexer votre site (de l’inscrire dans leurs bases de données afin qu’il soit visible). Si vous créez votre site de toute pièce en html, php, mysql et… aaargh stop, c’est quoi ce charabia ?! Pas de soucis, dites-vous qu’en employant un CMS tel que WordPress, Wix ou tout autre service du même genre, cette étape est déjà conçue et optimisée.

2. Optimisation du contenu de votre site (et de vos pages)

Remplir son site, c’est bien, mais encore faut-il connaître les points essentiels pour que ce que vous y inscrivez porte ses fruits. Comme la façon de rédiger vos articles, vos titres et les données s’y rattachant.

Nous allons essentiellement nous pencher sur ce point.

3. Optimisation externe : le netlinking (encore un mot barbare)

Car tout faire en interne ne suffit pas. Le netlinking ce sont les liens qui pointent vers votre site depuis internet. Par exemple, si un autre auteur vous cite dans l’un de ses articles et insère un lien vers votre blog, c’est du netlinking. Ce lien peut pointer vers n’importe quelle page de votre site, pas uniquement l’accueil.

Pourquoi ce référencement ?

Comme je l’ai déjà dit dans d’autres articles, promouvoir son prochain roman sur les réseaux sociaux ne suffira pas. L’existence d’un site ou blog permet d’être vu par des personnes cherchant de quoi lire ou se documenter (si vous rédigez des articles autres que promotionnels) à tout moment. Et ces personnes, si votre site est bien référencé seront de plus en plus nombreuses, vous aurez de plus en plus de lecteurs potentiels, plus de chance d’être connu par le bouche-à-oreille, le partage de liens, et surtout, via la recherche spontanée.

Bref, ce n’est pas à écarter.

Comment optimiser son contenu ?

Parce que de créer juste des pages promo ne suffira pas (ou peu), il faut un contenu qui se rapportera à votre statut d’auteur. Publiez régulièrement, choisissez un rythme qui vous convient (même si ce n’est qu’une fois par mois).

Par exemple, je m’éloigne de ce conseil en proposant des articles de promotion et de référencement, mais c’est un choix, je souhaitais juste partager mes découvertes en la matière. Mais d’écrire des articles sur une période historique se retrouvant dans l’un de vos romans ou d’autres sujets concernant vos univers se rapprochera déjà beaucoup plus. Vous pouvez tenter également de parler plus en détail de vos personnages ou de certaines de leurs caractéristiques.

Ce que vous devrez optimiser :

  • L’URL (autrement dit l’adresse, le http://bidulemachinchose).
  • Le titre de votre article.
  • Les sous-titres.
  • Le contenu de l’article.
  • Le meta titre et les meta descriptions.
  • Le ALT des images.

Jusqu’à « meta », je pense que vous avez saisi, pour la suite pas de panique. Ce sont des balises de métadonnées ancrées en brut dans le code source de la page et lisibles par les moteurs de recherche. Elles ne s’afficheront pas dans votre article.

Comme optimiser son article ?

Pour cela, on se base sur un (ou plusieurs, mais faisons simple pour les explications) mot clé que l’on souhaite mettre en avant. Oui, ce même mot clé qui sera entré dans un moteur de recherche et grâce auquel on espère être situé au mieux dans les résultats.

Ici, restons dans l’ambiance : romance historique.

Si vous êtes sous WordPress, il est conseillé d’installer le plug-in Yoast SEO. Je me doute que tôt ou tard, vous allez dire que c’est moche, que ce n’est pas spontané, qu’il faut ajouter de choses là où l’on avait pas envie, etc. Mais c’est le jeu.

Tout d’abord, le titre

Avec ce mot clé, optimisons le titre de l’article. Le mot clé doit y figurer et de préférence au début. En passant, le titre doit être clair, ne le modifiez pas au point que cela ne veuille plus rien dire.

Exemple : Romances historiques et chroniques urbaines, même combat

Ensuite, l’optimisation des sous-titres

Les titres qui se trouvent dans le texte et séparent les paragraphes.

À ce propos, votre titre principal est codé tel un Titre 1 (H1 en css), donc débutez la hiérarchisation de vos sous-titres au sein de l’article par Titre 2 (H2) et non Titre 1 qui est donc déjà employé. La aussi, les robots des moteurs de recherche s’y retrouveront mieux. Vous pouvez bien entendu avoir plusieurs Titre 2 dans votre article (ainsi que des Titre 3, et ainsi de suite).

Pour les sous-titres, utilisez également les mots clés autant que possible. Pas systématiquement non plus sinon cela va faire trop forcément.

Puis, le texte de l’article

La cela va vous embêter, je le sens bien. Car il faudra modifier certaines phrases pour insérer encore une fois ce satané mot clé. Oui, cela fait très bourrage de crâne à force, c’est pour cela qu’il faut le faire avec le plus de naturel possible. N’oubliez pas qu’un article n’est pas de la littérature, quelques répétitions ne sont pas si graves.

Premièrement, ce mot clé doit être présent dans le premier paragraphe. Ouf ! Pas forcément au tout début, mais au moins dans les premières lignes.

Attention, vous ne devrez pas forcément écrire votre mot clé à l’identique et pourrez employer des variantes. Cela fait plus naturel (oui moi aussi, ça m’a fait sourire, naturel alors qu’on glisse exprès des mots recherchés 😀 ).

Les images

Employez vos propres photos ou des photos libres de droits. Vous en trouverez sur des sites spécialisés tels que Pixabay. Gare de ne pas bifurquer vers les propositions payantes si vous ne comptez pas sortir votre carte bleue, cela arrive très vite (mais cela se voit très vite aussi).

À ce propos, tuons une légende urbaine. Non, Google Images même avec filtre ne vous garantira jamais que l’image est libre de droits. Ne vous y fiez pas.

Ajoutez une image illustrant votre article (ou plusieurs) et remplissez les cases Titre et Texte alternatif de cette image (texte ALTernatif est très important, c’est cette donnée qui sera lue par les moteurs de recherche pour le référencement).

Les remplir avec quoi ? Vos mots clés déjà et un petit bonus qui identifie la photo au besoin.

Sous WordPress, voyons avec un plug-in de SEO

Installez et activez le plug-in Yoast SEO, paramétrez-le en suivant les directives et éditez l’un de vos articles. Il vous permet de visualiser ce que sera le résultat dans Google. Vous pouvez modifier votre titre ainsi que la meta description afin qu’elle concorde exactement à ce que vous voulez afficher auprès des visiteurs.

Le plug-in vous conseillera également pour vos descriptions sur les réseaux sociaux (en cas de partage et si vous avez défini vos identifiants sur ces réseaux).

Vous aimez les chiffres et les analyses ?

Un outil pour une bonne analyse ? Suivez le guide !

La plupart sont en anglais ou en partie payants (c’est un gros business là derrière). Ici, j’ai découvert une extension qui s‘ajoute au navigateur : SEO Quake.

Et il est en français ! Joie !

L’installer c’est bien, le tout est de comprendre comment ça marche. Si vous avez suivi ce qui est dit plus haut, vous allez voyager en terrain connu. L’icône de l’extension est dans la barre d‘outils (je suis sous Chrome), ouvrez votre site et consultez la Densité de mots clé.

Référencement SEO

Cherchez le ou les mots clés principaux (ici romance historique) et suivez la colonne Densité. Il est conseillé de se situer au plus près des 1 %, mais de ne pas dépasser les 2 %.

Pour un diagnostic de la page (et de l’article) en cours, choisissez Diagnostic. Vous aurez un aperçu des éléments à optimiser ainsi que de petits conseils.

Voici un exemple de ce que cal pourrait donner :

Référencement SEO

Qu'est-ce que le netlinking ?

C’est lorsqu’un lien sur un site tiers pointe vers le vôtre. Ce genre de lien est perçu par les robots de moteurs de recherche comme un signe de qualité de contenu (si l’on vous cible, c’est qu’il a du bon à consulter). Il gagne en popularité.

Et, cerise sur le gâteau, le netlinking est la base sur laquelle votre position sera déterminée (sur base de mot clé toujours). Donc, c’est important.

Le petit souci, c’est que vous n’êtes pas maître de ce netlinking, il provient d’autres sites donc c’est aux propriétaires de ces sites que revient la décision de vous citer ou non. Mais plus vous aurez de contenu intéressant, plus vous êtes susceptible d‘être linké.

Ce qui fait un bon netlinking :

  • Le site qui vous link fait partie de la même thématique que la vôtre.
  • Ce site bénéficie lui-même d’un bon référencement (autorité).
  • Le lien est placé naturellement dans le corps du texte d’un article.
  • Plus technique, il doit avoir une ancre optimisée et doit être défini en dofollow (par opposition à nofollow).

Quelle est la différence entre Dofollow et Nofollow ?

J’en parlais déjà dans mon article Lancer son site auteur. Pourquoi ? Comment ?

Nous avons vu qu’un site de bonne réputation peut influer sur celle de notre site. Et vice versa. Afin d‘éviter de mauvais points en référencement pour avoir indiqué un site de piètre réputation ou controversé, le lien doit être défini en nofollow. Ainsi les robots le scanneront, mais sans lui accorder l’importance d’un dofollow.

En conclusion, ne sous-estimez pas le référencement. Il en va de votre visibilité et selon moi, avec les posts bien tagués sur les réseaux sociaux, la meilleure façon (gratuite) pour être connu.