Difficulté
Facile. Prévoyez une journée de travail pour prototyper le truc, une semaine pour faire quelque chose de propre et fignolé.
Requis
Des connaissances en HTML et en CSS sont requises – rien de très poussé cela dit !
Le but d’une page web est d’être partagée, donc je pars du principe que vous avez un nom de domaine et qu’il est hébergé quelque part.
Contexte
Vous avez des tas de liens que vous voulez regrouper en une seule page, à la façon d’un LinkTree.
Vous voulez avoir le contrôle total de votre liste de liens et la modifier à votre convenance.
Attention
Si vous n’avez aucune connaissance en développement web, ça risque de prendre plus de temps que prévu et dans ce cas-là, il est avisé de déléguer cette tâche.
Il est recommandé de tester son site en local avant de l’envoyer sur le net.
Ce tutoriel n’est pas un tout mais une piste à explorer, alors explorez !
LinkTree. On ne va pas se mentir, c’est quand même bien utile. Mais il y a quelque chose qui me chiffonne avec ce service. C’est qu’il y a une option premium qui fait que pour 3 euros par mois, vous débloquez le potentiel intégral.
Et là, je parle avec mon passé de pirate informatique : qui va payer trente-six euros par an pour un LinkTree ? C’est juste une putain de malheureuse liste de liens qu’on a tartiné de CSS !
Alors c’est vrai que présenté comme ça, 3 euros c’est vraiment pas cher. Mais c’est un abonnement mensuel qui s’ajoute à celui de tous les autres services que vous utilisez. Surtout qu’il ne faut pas des compétences informatiques très poussées pour faire une liste de liens !
Déjà avec ces informations, si vous êtes un développeur aguerri, vous devrez pouvoir vous débrouiller sans même lire la suite de cet article. Pour les autres, je vous propose un tutoriel pour fabriquer votre liste de liens vous-même. C’est de cette façon que j’ai codé la liste de liens de mon entreprise de jeux vidéo, voici à quoi ça ressemble et voici ce que vous serez capables de faire à la fin de ce tutoriel.
Concrètement, nous procédons en deux étapes. D’abord, nous rédigeons le contenu de la page en html. Ensuite, nous rédigeons le CSS pour que ce soit beau.
On se retrousse les manches !
Le contenu html est basique de chez basique. Prenez ce template. Copiez et collez-le à la racine de répertoire de votre projet web, que vous appellerez « index.html » – Sans trop compliquer le tutoriel : il vaut mieux ne pas changer ce nom.
<!doctype html>
<html lang="fr">
<head>
<title>Le nom de votre site ici</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div>
<ul>
<a href="#"><li>Texte du premier lien</li></a>
<a href="#"><li>Texte du deuxième lien</li></a>
<a href="#"><li>Texte du troisième lien</li></a>
</ul>
</div>
</body>
</html>Voilà, ici vous avez déjà un squelette de page html. Je ne rentrerai pas dans les détails techniques, mais il est possible d’approfondir et de tartiner. Par exemple, si vous voulez faire des catégories de liens, placez chaque catégorie dans une balise div au sein duquel vous mettrez un h3 (par exemple) suivi de votre liste ul.
Vous voyez les balises a ? Remplacez le # de href= »# » par le lien que vous voulez mettre, en https idéalement. Oui, les développeurs, je vous vois venir : vous pouvez mettre des liens relatifs. Je sais ! Mais comme je veux faire un tutoriel accessible à tout le monde, je préfère ne pas compliquer.
A partir de là, nous allons rédiger notre page CSS.
Dans le cadre de ce tutoriel, je l’ai placée dans un sous-dossier « styles », située dans le dossier où est situé votre fichier « index.html ». Dans ce sous-dossier, j’y ai créé un fichier « style.css ». Vous pouvez nommer ce fichier comme vous voulez et le placer ou vous voulez, mais il vous faudra changer ceci en conséquence :
<link rel="stylesheet" href="styles/style.css">Au sein de ce fichier, nous allons rédiger notre CSS. Globalement, pour faire une liste de liens, il est recommandé que la liste soit centrée, que les liens s’affichent les uns en-dessous des autres sous forme de boutons rectangulaires. Lorsqu’une première version est faite, nous ajoutons un peu de CSS supplémentaire pour rendre le site responsive design – ça veut dire que ce ne soit pas moche quand on le consulte d’un smartphone.
Déjà, testez si votre fichier CSS fonctionne. Ecrivez-y le crash test :
html {
color : red;
}Et ouvrez votre fichier html dans votre navigateur – ou depuis votre serveur web, si vous en avez un. Si les textes s’affichent en rouge, alors bingo. On peut effacer l’horreur du dessus et commencer à bosser !
A partir de là, vous avez quelque chose qui fonctionne, je vous laisse donc consulter la suite du tutoriel à votre convenance et l’adapter à ce que vous voulez faire !
Astuces en vrac
Restez simple !
N’en faites pas dix tonnes avec le CSS ! Votre site doit quand même rester lisible et agréable.
Mettre un arrière-plan.
Par défaut, l’arrière-plan de votre site est tout blanc. C’est sobre et ce n’est pas très agréable. Pour mettre un arrière-plan, vous devez utiliser ceci :
body {
background-image : url("lien/vers/votre/image.jpg");
}Sentez-vous libre d’approfondir avec des documentations présentes sur le net, comme expliqué ici : https://developer.mozilla.org/fr/docs/Web/CSS/background . Par exemple, vous pouvez faire en sorte que votre background ne défile pas. Vous pouvez décider de le répéter à la façon d’une mozaïque si l’image s’y prête – prudence avec ça. Si vous n’avez pas d’image sous la main, vous pouvez utilisez un background-color pour rester sobre.
Agencer correctement la liste de liens.
Admettons que vous ayez placé votre liste ul dans un div (ce que je recommande vivement !). Il faut quelques modifications pour que votre liste ne soit pas placée par défaut à gauche de la page. Encore une fois, je vous donne ma méthode, sentez-vous libre d’aller plus loin ou de vous renseigner sur ce que signifie « display : inline-block; » – ce n’est pas que je n’ai pas envie, mais ce tutoriel est déjà très long.
div#content {
width : 100%;
display : inline-block;
text-align : center;
}Aligner la liste de lien au centre de la page et enlever le « petit point ».
Par défaut, ul est utilisé pour faire une liste à puces. C’est bien mais ça va vous mettre un petit point devant chaque lien. Pour l’enlever, on utilise « list-style : none; ». Le petit point sera remplacé par un espace vide… Mais celui-ci va quand même décaler le texte de votre lien. Ce problème se règle avec « padding-left : 0; ».
width permet de définir la largeur de votre liste de liens. Ici j’ai mis 600 pixels, mais je vous laisse adapter à vos besoins. Quand à « margin : 0 auto » : contentez-vous de savoir que cela va vous aligner la liste en centre de page. C’est plus complexe que ça, mais restons simples !
div#content ul {
list-style : none;
width : 600px;
margin : 0 auto;
padding-left : 0;
}Faire des boutons qui ressemblent à des boutons
Bon, je pense que c’est clairement la seule partie du tutoriel qui va vous intéresser. Le plus important ici, ce sont les attributs qui commencent par « border ». Si les quatre bordures de vos liens sont identiques, contentez-vous de taper « border : 2px black solid ». Autrement, voici quelque chose de plus fantaisiste.
div#content ul a li {
margin : 0 auto;
border-top : 8px #000 inset;
border-left: 8px #000 inset;
border-bottom : 8px #444 inset;
border-right : 8px #444 inset;
background-color : #c2fcff;
}Faire des boutons aux bordures arrondies
Rajoutez cet attribut dans div#content ul a li.
border-radius : 10px;Mettre un avatar sur votre liste de liens.
Dans votre html, placez ceci en haut de page – ou où vous voulez, en fait c’est votre site, vous avez le contrôle dessus, si vous voulez le mettre en bas, vous pouvez, mais je ne vois pas dans quel contexte ça pourrait être cohérent. Je vous conseille toutefois de placer ceci dans un div auquel vous y ajouterez les attributs « margin : 0 auto; » et « display : inline-block; »
<img class="logo" src="lien/vers/votre/image.jpg" alt="Description de votre image ici, pas onligatoire mais recommandé.">Bien. Si vous ouvrez votre page maintenant, votre image va être sans-gêne alors on va y poser des limites. On va polir un peu tout ça. Dans votre fichier CSS, tapez ceci.
img.logo {
max-width : 150px;
border-radius : 50%;
}
C’est tout ! Aves les attributs au-dessus, votre avatar est parfaitement arrondi et sa taille ne dépassera pas les 150 pixels !
Supprimer le soulignage des liens
Par défaut, les navigateurs soulignent les liens cliquables. Comme nos liens sont dans des boutons, il est évident qu’ils sont cliquables et on peut se passer du soulignage.
div#content ul a {
text-decoration : none;
}Des liens un peu plus vivants.
Par défaut, lorsque vous placez votre souris sur un lien, il ne se passe rien, les boutons ne changent pas de couleur ni rien. C’est pas très engageant. Remédiez à ce problème en rajoutant ceci :
a:hover li {
background-color : blue;
color : white;
transition : 500ms;
}Ici le plus important est l’attribut « transition » qui permet une transition pas trop brutale. Remplacez les autres attributs par ce que vous voulez !
Rendre le site responsive-design.
Tout en bas de votre fichier CSS, rajoutez ceci.
@media(max-width: 800px){
}Je ne vais pas vous faire un cours maintenant, mais concrètement, lorsque votre site s’ouvrira d’un smartphone, toutes les règles CSS que vous écrirez entre les deux accolades vont supplanter les règles que nous avons écrites précédemment. Par exemple, nous voudrions que sur un téléphone, la liste de liens ne prenne pas 600 pixels de large mais 90% de la largeur de l’écran du navigateur. Rien de plus facile, nous rajoutons ceci :
div#content ul {
margin : 0 auto;
width : 95%;
padding-left : 0;
}A l’intérieur des accolades @media .
Analyser le traffic entrant du site.
LinkTree propose un service d’analyse pour savoir qui visite votre site. Vous pouvez le faire en intégrant un peu de javascript dans votre site et en passant par des services – gratuits ou non. A l’heure actuelle Google Analytics est le plus connu mais aussi le moins éthique. Des alternatives éthiques existent telles que Matomo, j’en parlerai dans un tutoriel ulterieur.
Félicitations, vous avez une bonne base pour construire une liste de liens par vous-mêmes ! Il ne vous restera plus qu’à l’envoyer sur votre hébergeur !
Hefka le Nekopunk
Laisser un commentaire