Lorem Ipsum

Ce billet me servira pour tester le nouveau design, et les classes CSS mises en place. Il n’est donc pas très utile pour les lecteurs, sauf ceux qui s’intéressent à  la mise en forme des billets. Je vais tout de même y insérer des éléments de code pour que les débutants puissent s’en inspirer…

Je me devais de l’appeler « Lorem Ipsum« , parce que c’est le nom des « faux-textes » utilisés dans l’imprimerie d’abord, et dans la CAO / webdesign maintenant. C’est un bout de texte qui ne veut rien dire, et qui permet de tester la mise en page, et le design. Moi, ici, je vais tester la mise en forme des blockquote, des listes ordonnées ou non, des niveaux de titres h2, h3, etc…, des exergues, du chapeau et des lettrines. Tout ça concerne la structuration html des billets dans le thème WordPress, ainsi que les classes utilisées dans la feuille de style CSS.

Citation

Voilà  donc un bloc de citation, contenant le fameux « lorem ipsum ». VOyons ce que ça donne :

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Et une citation plus longue, c’est un autre format :
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Et enfin, une dernière mise en forme, plus sophistiquée avec la photo de l’auteur :

Les convictions sont des ennemis de la vérité plus dangereux que les mensonges.

Friedrich Nietzsche (1844-1900)
Philologue, philosophe, poète, pianiste et compositeur allemand.

Listes

Voici une première liste non-ordonnée :

  • Premier élément
  • Deuxième élément
  • Troisième élément

et une autre, ordonnée :

  1. un élément
  2. un deuxième
  3. et un troisième

Bloc de texte avec exergue

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteLorem ipsum dolor sit amet, consectetur adipisicing elit. irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. J’ai aussi un petit css pour mettre des choses dans la marge1.1. Cela permet de mettre un complément d’info au bon endroit, sans forcer le lecteur à aller voir une note de bas de page, ou cliquer sur un lien..

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Et voilà  !

Pour ceux qui veulent voir le code

j’ai enlevé le html. Et les différentes classes qui sont appelées sont quant à  elles définies dans le fichier style.css. Voici les principales :

.exergue_gauche {
      float: left;
      font-size: 1.3em;
      font-family: "Nunito Sans", Verdana, Sans-serif;
      color:#529BA1;
      background: #FFF;
      width: 200px;
      padding: 15px;
      text-align: center;
      margin: 2px 20px 5px 15px;
      line-height: 1em;
				border-top:1px solid; 
	border-bottom:1px solid; 
}

.textmarge {
      float: left;
      font-size: 0.9em;
      font-family: "alegreya";
      color:#bbbbbb;
      background: #FFF;
      width: 175px;
      padding: 15px;
      text-align: right;
      margin-left:-450px;
      line-height: 1em;

}

N’hésitez pas à  me signaler en commentaire si des points sont peu clairs, ou si vous voulez d’autres explications…


Publié

dans

par

Commentaires

6 réponses à “Lorem Ipsum”

  1. Avatar de Ludo
    Ludo

    Ah Lorem Ipsum! Les deux mots préférés des Webmasters =)

  2. Avatar de BLOmiG
    BLOmiG

    Salut Ludo,merci pour ton commentaire…en fait, j’ai appris ce que c’était quand j’ai écris mon article. Mais c’est vrai que c’est bien pratique. Que penses-tu de mon design, au passage ? critiques / commentaires / remarques sont les bienvenus !!!à  bientà´t !

  3. Avatar de Yves Deligné
    Yves Deligné

    Le texte avec exergue est qq qui me semble intéressant. Je l’adapterai peut-être pour Blogger.J’ai un blog WP sur mon serveur, mais j’ai tellement pris l’habitude de Blogger que je ne veux plus en bouger.J’aime bien ce style de design, très sobre, donc idéal pour la lecture. Bonne harmonie des couleurs. Et l’idée de faire des lettrines, chapeaux, etc. comme pour la presse, je trouve ça très bien: ça clarifie la lecture des billets.Pour moi, ce webdesign est parfait sur le plan de l’ergonomie. Bonne vacances :-)

  4. Avatar de BLOmiG
    BLOmiG

    salut Yves,merci pour ton commentaire, et pour ton retour sur le design de ce blog.A mon sens, tu peux utiliser tout ce qui est décrit ici sous blogger. Il suffit de rajouter des choses dans la partie CSS de ton thème. Tu vois ce que je veux dire ?à  bientà´t, et bonnes fêtes de fin d’année !

    1. Avatar de BLOmiG
      BLOmiG

      Intéressant ce plugin. c’est pas très joli la mise en page par défaut.

  5. Avatar de BLOmiG
    BLOmiG

    test test test

N'hésitez pas à partager votre avis ! (Markdown ok)

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.