Style

Ajoutez un petit peu de couleurs à vos articles

Si le thème de votre site n’est pas marqué par une couleur dominante, comme c’est le cas pour mon blog, vous pouvez ajouter une petite touche de couleur à chaque article en suivant cette astuce. L’idée est de partir de l’image à la une pour déterminer une teinte dominante et utiliser cette teinte dans le thème. Pour ma part, je l’utilise sur les liens au survol et sur les boutons de partage et les métadonnées en bas de chaque article.

Voici ce que cela donne avec trois exemples différents :

haut.jpg

Lire la suite

Publicités

Améliorer les notes de bas de page avec bigfoot.js

Ce n’est pas forcément très connu, ni très utilisé, mais WordPress sait gérer les notes de bas de page à condition d’activer l’un des modules qui ajoutent la prise en charge du Markdown. Si vous utilisez le module Jetpack, vous pouvez l’activer en un clic, par exemple. Ensuite, il suffit d’insérer [^1] à l’endroit où l’on veut insérer une note de bas de page, puis à la fin de l’article, commencer une ligne avec [^1]: pour constituer une note de bas de page, avec le texte de la note sur cette ligne. Ce n’est pas forcément évident à saisir à la main, mais on prend vite la main et certains logiciels spécialisés dans le Markdown automatisent un petit peu le processus.

C’est bien, mais ces notes de bas de page sont alors situés… en fin d’article, c’est logique. À l’usage, elles ne sont pas idéales toutefois, surtout sur un petit écran. Le lecteur doit multiplier les allers et retours entre le texte et les notes et on perd un peu le fil. Souvent, on finit par ne plus lire les notes du coup, ce qui les rend totalement inutiles. Ce serait bien mieux si on pouvait avoir le contenu de la note au niveau du texte, non ? Comme ici, par exemple :

bigfoot
Lire la suite

Des icônes dans le menu sans plugin

Avec WordPress, il existe des plugins pour tout et n’importe quoi. Pourtant, il y a souvent aussi des méthodes pour faire la même chose sans installer quoi que ce soit, et parfois même sans toucher au code ! Par exemple, j’ai ajouté récemment une fonction qui permet de sélectionner un article au hasard et j’ai choisi d’ajouter un élément au menu pour y accéder. Au départ, j’avais nommé cet élément « Article au hasard », mais cela prenait trop de place à mon goût, surtout pour une fonction aussi anecdotique.

J’ai eu l’idée de remplacer ces mots par une icône. Ce n’est pas toujours facile de trouver une icône adaptée, mais par chance, l’aléatoire a une icône connue, puisqu’on la retrouve un peu partout et notamment dans les lecteurs audios, physiques ou virtuels. Restait à trouver un moyen d’insérer cette image dans le menu et j’ai commencé à chercher des méthodes assez complexes (modifier le fichier header.php, puis utiliser une image en fond grâce au CSS…). Mais j’ai fini par découvrir que WordPress intégrait quelques icônes que l’on pouvait utiliser très facilement. Deux minutes plus tard, voici le résultat :

icone-menu

Lire la suite

Créneler le texte pour un meilleur rendu

Étant de nature à écrire beaucoup et sans doute même trop, je cherche toujours à améliorer la mise en forme du texte sur mon blog. À défaut de me forcer à écrire moins, je peux au moins faciliter la lecture des textes. Et dans ce domaine, la référence reste pour moi Medium qui propose des mises en page très agréables.

Et j’ai (re)découvert un peu par hasard une option en CSS qui améliore à mon avis le rendu du texte : le crénelage, ou antialiasing en anglais. Les explications techniques sont un peu trop complexes, mais disons simplement qu’il s’agit d’adapter les polices pour avoir un rendu meilleur sur nos écrans composés d’une grille de pixels carrés. Les polices étant souvent rondes, il y a plusieurs options pour afficher chaque caractère et le crénelage peut offrir un rendu de meilleure qualité.

Avec la police choisie sur mon blog (Georgia), le rendu est très différent et le texte, comme on peut le voir sur l’illustration, est plus fin avec le crénelage (gauche) que sans l’option activée (droite). J’ai un peu hésité à activer le crénelage par peur que ce soit moins lisible, mais j’ai trouvé une solution pour éviter un côté trop clair : foncer légèrement la police. Le texte n’est pas en noir, mais en gris foncé et j’ai simplement opté pour une couleur un petit peu moins grise.

Crénelage à activé à gauche, inactif à droite

Crénelage à activé à gauche, inactif à droite (clic pour la taille originale)

Je suis plutôt satisfait du résultat, même si on est encore loin de mon objectif, mais c’est un pas dans la bonne direction.

Si vous voulez activer cette option sur votre blog, voici les trois lignes à ajouter aux blocs de textes concernés en CSS. La première active la fonction sur Safari (iOS et OS X), la deuxième sur Firefox (OS X) et la troisième sur la majorité des navigateurs sous Windows et Linux.

p {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering: optimizeLegibility;
}

Le retour des liens soulignés ?

Les pionniers du web ont choisi de souligner les liens hypertextes qui permettent de relier deux pages. C’est une convention pour repérer très simplement quels sont les mots qui sont aussi des liens, mais si cette présentation est pratique, elle a longtemps été assez grossièrement appliquée. Pendant longtemps, les navigateurs se sont contentés d’appliquer un trait sous le texte un peu grossièrement, sans tenir compte de la présentation, coupant les lettres et souvent en ajoutant une gène visuelle. À tel point que beaucoup de sites les ont finalement retirés, jusqu’à Google lui-même.

Comme beaucoup de sites, j’avais également choisi de retirer tous les traits sous les liens de mon blog personnel. Pour signaler la présence d’un lien, je changeais la couleur en noircissant légèrement le texte. L’idée était bonne, mais le résultat n’était pas vraiment à la hauteur : les liens étaient difficiles à détecter correctement, et j’imagine que la majorité des lecteurs ne les voyait jamais. Dans l’idéal, j’aurais voulu mettre en place la solution de Medium (longuement détaillée à cette adresse : si le sujet vous intéresse, je vous en recommande la lecture), mais elle est très complexe et mes connaissances en CSS sont trop limitées.

Fort heureusement, les navigateurs évoluent. Et les dernières versions de Safari, le navigateur d’Apple, gèrent désormais plutôt bien les liens soulignés, comme l’a judicieusement fait remarquer Anthony. En particulier, les traits ne coupent plus bêtement les lettres qui passent sous la ligne, ils s’interrompent proprement autour de la lettre.

liens-soulignes-safari

Du coup, j’ai réactivé les liens soulignés sur le blog. Ce n’est pas parfait, c’est moins bien que la solution de Medium — j’aimerais des traits légèrement affinés —, mais c’est beaucoup plus simple à mettre en place et avec Safari, le rendu est plutôt sympa. Pour les autres navigateurs, on peut espérer qu’ils s’y mettent aussi un jour, et en attendant, les liens sont beaucoup plus visibles ainsi qu’en variant la couleur comme je le faisais auparavant.

Côté code, c’est assez simple, il suffit d’une ligne en CSS sur la balise a (celle des liens) et c’est fait. Le plus souvent, les thèmes utilisaient text-decoration: none; pour masquer les traits sous les liens et on peut ainsi la remplacer par text-decoration: underline; pour obtenir le bon résultat.

Sur mon blog, je modifie aussi la couleur par défaut des liens (bleu, si vous ne précisez rien) en reprenant celle de l’élément parent, en l’occurrence le texte des articles. À vous de voir si vous voulez doubler le lien avec une couleur différente. Pour ma part, j’ai opté uniquement pour une couleur différente quand le curseur de la souris passe au-dessus du lien, ici du noir pour l’exemple.

a{
    text-decoration: underline;
    color:inherit;
}
a:hover{
    color:black;
}

Je ne sais pas si je garderai ces liens soulignés ou si je changerai à l’avenir, mais j’aime bien l’idée de rendre les liens plus visibles. Du moins ceux à l’intérieur des articles, pour tous les liens autour, par exemple pour les listes de tags, je préfère une présentation plus propre, sans aucun trait. Mais peut-être ai-je tort et que les liens devraient toujours être soulignés.

Jetpack : modifier l’aspect des articles similaires

La dernière version de Jetpack, le module conçu par les propriétaires de WordPress.com, ajoute la fonction d’articles associés à n’importe quel blog WordPress hébergé. Même si je suis rarement fan de ce genre de fonctions, j’ai décidé de lui laisser une chance. Après tout, s’il y a bien un acteur qui peut trouver des articles similaires à un autre, c’est bien celui qui a créé le CMS. Cette fonction a en outre l’avantage de ne pas reposer sur votre serveur pour effectuer le lourd et difficile calcul de relations que tous les autres modules rendent nécessaire. Les images quant à elles sont chargées depuis les serveurs de WordPress.com, si bien que la charge sur votre hébergeur devrait rester minime.

Jetpack ne propose pas beaucoup d'options pour son module d'articles liés : tout au plus peut-on choisir d'afficher ou non "Connexe" et les images.

Jetpack ne propose pas beaucoup d’options pour son module d’articles liés : tout au plus peut-on choisir d’afficher ou non « Connexe » et les images.

Comme quasiment toutes les autres fonctions Jetpack, celle-ci s’active d’un clic dans l’administration du blog, mais vous n’avez pas beaucoup d’options pour modifier son apparence. Vous pouvez choisir de masquer ou non un en-tête et vous pouvez afficher, ou non, des images associées à chaque article. On ne peut pas influencer les résultats, modifier leur nombre ou encore changer leur emplacement sans passer par un peu de code.

Les réglages de Jetpack sont très légers par défaut.

Les réglages de Jetpack sont très légers par défaut.

Souhaitant une interface beaucoup plus sobre, avec uniquement les images — le lecteur peut connaître le nom de l’article en question en passant la souris sur une image —, j’ai simplement utilisé mon thème pour masquer les éléments que je ne désirais pas et retoucher les images pour les coller. Voici, à titre d’information, le code utilisé sur mon blog :

.entry-content .jp-relatedposts,
.entry-content .jp-relatedposts .jp-relatedposts-post,
.entry-content .jp-relatedposts .jp-relatedposts-items-visual,
.entry-content .jp-relatedposts .jp-relatedposts-post img{margin: 0;padding: 0;}
.entry-content .jp-relatedposts .jp-relatedposts-post{width: 33.33%;}
.entry-content .jp-relatedposts .jp-relatedposts-post-title,
.entry-content .jp-relatedposts .jp-relatedposts-post-context{display: none;}

Et voici ce que cela donne, remis dans le contexte. Pour information, les quatre articles « Dans la même catégorie » ne sont qu’une sélection au hasard dans la catégorie de l’article en cours. J’aime bien le côté aléatoire de la sélection, mais il est vrai qu’elle n’a pas vraiment de sens pour le lecteur.

Avec un peu de CSS, on peut facilement modifier l'aspect des articles liés proposés par Jetpack.

Avec un peu de CSS, on peut facilement modifier l’aspect des articles liés proposés par Jetpack.

Même si les options affichées pour ce module sont très simples, on a un contrôle plus fin qu’il n’en a l’air sur les résultats affichés. En ajoutant du code au fichier functions.php comme expliqué à cette adresse, on peut assez facilement modifier le nombre de résultats, mais aussi retirer des résultats certains articles, ou à l’inverse afficher systématiquement un article associé dans certains cas. On peut aussi choisir la position des résultats, mais malheureusement le choix est limité à deux options : en tête ou en fin d’article. Peut-être qu’il y a un moyen de placer les images plus précisément, ce qui me permettrait de retirer mes articles aléatoires, mais je n’ai pas trouvé comment faire.