• Yo! Pas mal de personnes ne se contentent pas des polices présentes sur Ekla et souhaitent en choisir une différente.
    Je suis certaine qu'encore une fois, un ou des tutos ont déjà été faits sur le sujet mais voilà une astuce assez simple: le @font-face.

    Il s'agit d'une astuce full CSS, après laquelle vous devrez régler les polices de votre blog directement via CSS, du coup je vous donnerai aussi les sélecteurs des principaux éléments CSS. (Vous pouvez aussi cliquer droit sur l'élément à modifier, choisir "Inspecter" et vous aurez une page qui s'ouvrira où vous pourrez trouver votre sélecteur.)

    1. Hébergez votre police sur un hébergeur externe ou sur votre blog directement.
    Ici, je prendrai l'exemple de la police Scriptina (titre de ce blog). Vu qu'elle est hébergée dessus, je vous donne aussi l'URL d'hébergement, c'est tout bénèf: http://ekladata.com/KZ9FDbMcxNEZ-eYSElSZbrGJZlQ/SCRIPTIN.ttf
    Vous aurez besoin de cette URL, mais aussi du format de la police: souvent .ttf ou .otf -là c'est simple vous regardez l'extension du nom de fichier. Dans l'URL que je vous donne plus haut, c'est .ttf

    2. Allez dans apparence > modifier le thème > ajouter du CSS et copiez le code suivant:

    @font-face {font-family: 'Nom_de_la_police';
    src: url('URL SOURCE') format('extension du fichier');}

    Dans mon cas, avec Scriptina, ça donne ça:

    @font-face{font-family: 'Scriptina';
    src: url('http://ekladata.com/KZ9FDbMcxNEZ-eYSElSZbrGJZlQ/SCRIPTIN.ttf') format ('.ttf');}

    3. Codez les éléments où vous voulez voir apparaître la police :3
    Voici une liste délicate des sélecteurs des principaux éléments de votre blog Ekla (les sélecteurs changent en fonction des plateformes).

    Élément du blog Sélecteur Élément du blog  Sélecteur 
    Menu d'en-tête #menu a Menu de gauche #menu1
    Titre du header  #titre_header Menu de droite #menu2
    Slogan  #slogan_header  Titres du contenu  .module_titre_contenu
    Corps principal (header compris) #background Titres des menus .module_menu_titre
    Contenu #content Titres du menu de gauche #menu1 .module_menu_titre
    Pied de page #footer Titres du menu de droite #menu2 .module_menu_titre
    Sous-menu d'en-tête #menu ul a    

    Ladite liste n'est pas exhaustive, une liste plus complète est à paraître.

    Exemple, si vous voulez que les titres de vos articles apparaissent en Scriptina, vous mettez ça:

    .module_titre_contenu {font-family: Scriptina;}

    4. Voilà, c'est fini :3 j'espère que cet article vous aura servi!


    25 commentaires
  • Yo!

    Voici deux sites qui pourront vous aider si vous faites des schémas de couleur avant de créer vos designs et/ou si vous avez souvent besoin de convertir de l'hexadécimal -en gros les couleurs telles que vous les donne l'interface d'édition Ekla, de type #83d6b5 en RGB, utile par exemple si vous souhaitez changer l'opacité d'un background avec le code de type RGBA (a pour... opacité, oui, et j'ai pas envie de chercher pourquoi mais si vous savez manifestez-vous ça fait toujours plaisir).

    Un schéma de couleurs c'est quoi? En web-design, c'est tout simplement les couleurs dominantes que vous allez utiliser dans votre design. Ici, c'est gris clair, gris plus clair, vert, gris foncé et orange.

    Ce site, Colourcode, vous permettra de trouver un schéma de couleurs de 5 couleurs allant bien ensemble (exemple random ci-dessous pour des couleurs analogues):

                            

    Le site propose également de vous trouver des schémas monochrome + gris clair ou foncé, des couleurs analogiques et complémentaires; complémentaires; des trios et même des quatuors de couleurs accordées. J'ai voulu tester le quatuor et voilà ce que j'ai trouvé en balandant la souris sur l'écran:

                            

    Bien sûr, vous pouvez aussi créer vos propres schémas très librement en choisissant le mode "free build". Ce site donne des résultats assez harmonieux et ça m'arrive de l'utiliser pour certaines couleurs que je maîtrise mal.

    Un dernier exemple pour la route? 8D allez, monochrome: 

                            

    Le second site est tout simplement, comme je l'ai dit en haut, un convertisseur de l'hexadécimal (type #debcde) vers le RGB (red green blue, qui se présente comme ça: 25,37,255) et inversement.

    Voilà pour cet article, j'espère que ça vous servira à quelque chose :3 bien sûr, savoir choisir ses couleurs est important, mais si vous les mettez n'importe comment, ça n'ira pas même si elles vont bien ensemble.

    J'ai jamais su faire les conclusions, donc faites comme si y'en avait une~


    votre commentaire
  • Yo! Cet article est une synthèse de ce que j'ai pu voir conseillé ou conseiller moi-même à des gens durant mon expérience sur Ekla.

    Je trierai cet article en trois partiesesthétiquerangement et contenu.
    Mon tri se base sur ce que l'on voit en premier en arrivant sur un blog. L'esthétique concerne le design du blog, le rangement son interface et le contenu... le plus important, le contenu.

     

    L'esthétique

    Comme je l'ai dit plus haut, il s'agit du design du blog.
    Maintenant, je vais m'étendre un peu sur ses points faibles et sur les erreurs à ne pas faire.

    Si un blog est moche, c'est bête, mais ça fait juste fuir. Quand un design est cohérent mais qu'il ne me plaît pas, je reste. Mais si c'est moche, je pars.
    Ce qui est universellement moche se définit par: illisible, demandant trop d'attention et/ou chiant.

    Il existe de nombreux articles et topics sur le sujet, mais je fais quand même le mien -paraît que quand on répète ça rentre mieux.

    Les couleurs vives: les utiliser occasionnellement, c'est bien. Elles attirent l'attention sur un élément du design ou d'un article et retiennent l'œil du visiteur.
    En mettre partout, c'est MAL. Cela va fatiguer l'œil de votre visiteur, et visuellement c'est agressif.
    La superposition de couleurs... non. Du genre, ça, sur tout un écran ça vous tue les yeux et quand vous voyez ça, vous défoncez votre écran à coups de poings.

    Les gifs: une petite animation retient également l'œil du lecteur et attire également son attention, c'est pour ça qu'en mettre trop nuit fortement à votre blog: en mettre dans un menu détourne votre lecteur du contenu de l'article. Pire: les gifs récurrents. Autant un dans un menu ça va. Par contre, dans les titres, dans chaque module un gif, déjà ça va plus. Les animations de paillettes ou brillantes sont les pires, ça flashe, c'est horrible! Le curseur animé par défaut est aussi une erreur, sauf au survol où justement le loop d'animation attire l'attention du visiteur sur l'élément cliquable.
    Ultime erreur: le fond de fenêtre animé. On sait plus où regarder pour se fixer, impossible de vous lire! C'est peut-être très intéressant, mais on ferme la page parce que ça bousille les yeux.

    Les éléments invisibles: par exemple, le texte ou les liens d'une couleur ou luminosité trop proche de celle de votre fond, c'est invisible. Si vous arrivez à lire cette phrase sans sélectionner vous avez gagné. Et maintenant transposez ça à un menu ou un écran. Vous avez mal? C'est normal, fuyez.

    Le header: il doit être à la bonne taille pour représenter votre blog, mais pas trop haut parce que quand on voit un header non exploité de la hauteur de l'écran (766px pour moi, et oui ça existe) on a la flemme de scroller et on se casse, y'a même pas le titre de l'article pour attiser la curiosité du lecteur! En général, 300 à 350px maximum constitue une hauteur tout à fait correcte qui vous permet d'insérer un ou plusieurs élément(s) graphique(s), votre titre, votre slogan et éventuellement votre menu. Pour idée, celui de ce blog fait 169px de haut, dont 60px de menu plus le titre et la marge.

    Les éléments non accordés sont un fléau. Quand vous créez votre thème, n'oubliez pas les bordures, le pied de page, le fil d'Arianne s'il est activé... autant d'éléments auxquels on ne pense pas forcément, chose que j'ai déjà vue et ça faisait vraiment tache.

    Ensuite, je vais revenir sur la notion de design chiant. 1000px de large grand maximum. Pensez aux petits écrans (pensez à moi, aussi). Déjà parce que vous avez pas besoin d'un menu de plus de 250px de large ou d'un contenu de plus de 800px de large, et quand j'ai besoin de scroller horizontalement dans 90% des cas, je pars. Je n'ai pas envie d'avoir une partie du contenu masqué parce que le blog n'est pas adapté à mon écran.

    Autre chose qui est chiant, c'est quand votre fond de page est une image de 200px de large qui est répétée sur tout l'écran et que vous avez pas pensé à mettre une couleur à votre fond de page. Autant quand elle est répétable et à peu près monochrome et neutre (assez sombre pour écrire clair ou assez claire pour écrire sombre) c'est parfait, autant quand c'est une image d'un personnage (film, dessin animé, célébrité...) votre blog est illisible. Ce qui est dommage, si ça se trouve, ce que vous publiez est intéressant.

     

    Enfin, un petit point supplémentaire: quand vous agrémentez vos articles avec des images, essayez de vous arranger pour qu'il y aie un rapport et qu'elles ne soient pas trop grandes: l'image en haut d'article notamment, attirant l’œil du visiteur, il s'attend par défaut à avoir un article là-dessus. Si elles sont trop random, ça risque de perturber une partie de votre audience.

     

    Le rangement ou interface

    Ouep. Quand votre blog est mal rangé, c'est vraiment n'importe quoi.

    Il existe plusieurs types de rangements très efficaces, je vais vous en citer quelques-uns (donc là je copie-colle carrément le message posté sur le sujet flood de la TPW):

    Après, il y a d'autres blogs (type RPGs, lecture interactive) qui nécessitent une interface extrêmement simple et accessible, notamment mon blog Sur la Colline qui n'a besoin d'un accès qu'au "minimum" que j'ai installé dessus et donc qui n'a pas vraiment besoin d'être rangé.

    Les exemples donnés ne sont généralement pas des blogs "pros" mais faits par des gens comme vous et moi. Ce n'est pas une pub, qu'on soit bien clairs: je trouve simplement l'exemple probant.

    Ranger son blog, une fois qu'on a compris le truc, c'est simple. Mais si vous avez le même problème que moi et que vous avez tendance à le surcharger, cela va devenir un casse-tête.
    C'est pur ça que ci-dessous, je vais vous donner des conseils pour trier vos rubriques en menus déroulants ou en sommaires pour ceux qui préfèrent; ou en catégories de liens à afficher dans un menu. Avec cette dernière méthode, le risque est d'avoir un menu de 50km de long qui sera du coup très long à parcourir.

    1. Chaque lien doit apparaître une seule fois dans votre page. Une exception de temps en temps si vous voulez être sûr(e) qu'il soit bien vu. Mais autrement, déjà, vous perdez de la place et ensuite... ben ça sert à rien!
    Autre chose, le lien vers l'accueil est inutile: le lien inséré dans le header y mène par défaut.

    2. Si vous êtes amené(e) à trier vos rubriques, le tri doit répondre à une forme de logique universelle. En gros, si vous triez vos rubriques par couleur, euh... bon, plus simplement, si vous avez par exemple des rubriques traitant d'imagerie (photo, graph', dessin...) mettez-les ensemble; comme par exemple les rubriques musique, texte etc. Au bout d'un moment, une case "autres" sera peut-être nécessaire, mais si vous pouvez éviter... évitez ;)
    Vous pouvez aussi trier vos rubriques par "thème" mais autrement: par exemple pour un blog artistique, vous pouvez trier par œuvres joyeuses, tristes, sur l'amour, le partage, la mort etc.

    3. Gagnez de la place: allégez votre design. Si votre accueil est la page derniers articles, pas la peine d'avoir un module derniers articles dans le menu. Trois menus ne sont vraiment pas utiles à moins d'être vraiment bien gérés, cantonnez-vous à deux dans un premier temps. Le mieux reste d'en avoir seulement un (voire pas du tout si vous avez une seule rubrique.)

    Autre point dont je ne savais pas trop où parler donc ce sera là et puis tant pis si t'es pas content: la musique automatique. Pas mal d'internautes surfent avec leur playlist perso. Leur imposer la tienne, ça les fait automatiquement fermer la fenêtre de ton blog, point. Laisse-leur le choix d'écouter ou non la musique que tu as choisie, même si tu penses qu'elle est indispensable. Je te jure que ton nombre de "oh tiens j'arrive oh de la musique allez hop croix rouge" baissera drastiquement.

     

    Le contenu

    Oui, bon. Là, je vais juste copier-coller la fin de mon commentaire  puisque je n'ai rien à ajouter à ça:

    C'est la partie la plus importante de ton blog. Si un blog super beau et bien rangé a un contenu insipide, il sera nul. Mais si un blog un peu en bordel et pas super beau a un contenu du tonnerre, tout le monde ira dessus.
    Quand tu crées un blog, souvent, tu te demandes après-coup quoi mettre dessus. Ce n'était pas mon cas: j'avais un projet très précis en tête en créant le mien et son extension incontrôlable est survenue après. Plus tu as d'idées, mieux c'est. Si un projet fait un bide, mais qu'il te plaît, tu t'en fous, continue-le! Le plus important, c'est que ça te plaise à toi! Tu fais ton blog pour toi, pas pour tes visiteurs.
    Si j'ai des conseils à te donner:

    • Si tu fais un article avec ton cœur, ça se ressentira et on aura envie d'avoir d'autres choses comme ça. On sentira que tu aimes ce que tu fais et ça nous donnera envie d'en voir plus. En revanche, si tu te forces à faire quelque chose que tu n'aimes pas ça se sentira aussi et ça donnera pas envie de te lire. On sentira si tu veux ou pas te mettre derrière ton clavier pour écrire.
    • Fais un blog sur ce que tu aimes, ou ce que tu aimes faire. Tu fais quoi dans la vie, tu lis? Parle-nous-en! Tu dessines? Parle-nous-en! Tu écris? On veut lire! Tu bricoles? On veut voir! On veut voir ce que tu aimes, c'est TON blog, pas le nôtre! En arrivant sur ton blog pour la première fois, V n'a aucun préjugé. Il verra en premier ce que tu mets en valeur, aussi veille à bien mettre en avant le meilleur de ton blog.
      Si tu veux raconter ta vie, fais-le! Mais fais ce que tu as envie de faire et pas ce que tu penses que nous (les visiteurs) on a envie de voir!
    • J'ai refait un peu le tour de ton blog pour voir, et... le bilan est... un peu... comment dire... mitigé! J'avoue apprécier la rubrique PUB qui me fait découvrir de nouveaux blogs, mais tu pourrais en présenter plus ;) et puis... mettre le lien dans l'URL xD plus pratique, on y est en un clic!
      Mais! Pas la peine d'appeler un article "bonjour" ou "salut" (et encore moins une rubrique ((qui en passant est vide donc... un peu inutile ^^)) ou un sujet de forum ^^) parce que je sais pas les autres mais moi en voyant ça je suis là "ouais ok et?" heureusement je suis très curieuse en ce qui concerne les blogs. x)
      La rubrique sur Ja-pan est sympa ausi, je connaissais pas l'anime, mais je serais toi, je m'embêterais pas à nous faire des fiches sur les persos! Liens vers les scans, les épisodes, critiques du manga, informations sur les goodies disponibles... Y'a tellement de choses à dire sur un manga!
      La rubrique sur ta vie! Le "pas intéressante" ne donne pas envie d'y aller. Mais par exemple, dans l'article sur ton cours d'arts pla, tu aurais pu mettre l'image du Cri (préciser deux-trois trucs sur le tableau en passant) au lieu de celle de la fille du manga ^^ les images c'est mieux si elles sont en rapport! Après ça dépend des circonstances, mais ici je pense que c'est mieux si elles sont en rapport. ;)
    • Varie les contenus! Nous les visiteurs V on aime bien la diversité ;)
    • Rassemble tous les sujets dans un seul forum et rends-le accessible via un des menus, tout le monde pourra y aller et nombreux sont les gens qui aiment flooder ;) mais si la source de flood n'est pas accessible... Y'aura rien ^^
    • Mets des titres personnalisés à tes modules ^^ ça met plus à l'aise, je trouve! Et ça fait beaucoup plus personnel. ;)

    Sur le moment, je n'ai pensé à rien d'autre. Mais retiens ceci: fais ce que tu aimes. Le CONTENU est plus important que le reste; sans son contenu un blog n'est rien.

     

    Conclusion

     Voilà! Je sais que des millions de topics et articles sont déjà sortis sur le sujet, mais je voulais ajouter ma pierre à l'édifice, comme ça peut-être qu'un jour les blogs noir fluo remplis de gifs pailletés et brillants avec les fonds animés et des playlists automatiques ne seront plus que de mauvais souvenirs.

    Je sais que c'est un article très long, mais je pense que c'est indispensable.

    Bonne nuit ;)


    14 commentaires
  • Yo! Voici le rendu du thème pour ton blog de poèmes :)

    *chiki être fier de lui*

    Image de fond de page:

    Commande de Malia233 - Thème 

    Alors, en très gros, l'HTML est le code qui va être lu par ton navigateur pour lui permettre de mettre en page toute l'apparence d'une page web.
    Si tu veux plus d'informations, je t'invite à consulter l'article Introduction au HTML écrit par Nagalia, qui est superbement bien fait.

    Je te remets les instructions que je t'avais données en MP:

    • Dans ton menu, supprime tous les modules SAUF le module de recherche, le module derniers visiteurs et le module de statistiques.
    • Édite le module de statistiques. Tu verras dans l'interface d'édition un symbole qui ressemble à ça: <>
      Clique dessus. Tu tomberas sur normalement un truc écrit comme ça: <p> Statistiques: blablabla%1% </p><p>...</p> c'est du langage HTML. TU enlèves tout, puis tu y colles le code que je te donne dans le cadre Code HTML.
    • Ensuite, fais comme la dernière fois: tu mets à zéro TOUTES les valeurs chiffrées de ton blog (sauf dans les forums où il n'y a rien à faire) et tu décoches TOUTES les cases: plus rien ne doit être codé par l'interface d'édition Ekla, sinon il y a des risques que ça passe par-dessus le CSS...
    • Puis tu ajoutes le CSS, comme la dernière fois, dans la partie "ajouter du CSS" de l'interface de modification de thème d'Ekla. Voilou!

    Code HTML:

    Le design ayant été installé, le code a été retiré du public.

    Code CSS:

    Le design ayant été installé, le code a été retiré du public.


    votre commentaire
  • Yo! Voici aujourd'hui quelques backgrounds de type carte du monde/espionnage en libre service.

    Néanmoins, merci de me créditer de façon visible sur votre blog et de me prévenir dans les commentaires si vous vous prenez.

    Cliquez sur l'image pour l'avoir en taille réelle.

    Stains - world map

     Images from: vectorworldmap.compixelstalk.netwallpaperscraft.comwallpaperup.com

    Circuit board - world map

     Images from: vectorworldmap.comdw4.me

    Target - world map

     Images from: hdwallpaperia.comexacompta.comrecettes-de-cuisines.com/white-wood-background


    votre commentaire



    Suivre le flux RSS des articles
    Suivre le flux RSS des commentaires