dans Empty

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. 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.

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, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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 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

Le billet ci-dessus est structuré avec des balises html, et ça donne à peu près ça :

blablablabla.



Jblablablabla..

Citation

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

blablablabla.

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

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

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

.lettrine {
     float: left; /* positionnement de la lettrine dans le conteneur*/
     font-size: 3em; /* 3 hauteurs de lignes pour la lettrine*/
     font-family: Georgia, Helvetica, Sans-serif;
     color:#666;
     font-weight:bold;
     border: none;/* définition d'une bordure autour de la lettrine*/
     margin: 2px;
     padding-left: 1px;
     padding-right: 1px;
     padding-bottom: 1px; 
     padding-top: 0px;
     line-height: 1em;
     background: #FBFBF3;
}
.chapeau {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 120%;
        color:#828282;
        background: #FBFBF3;
        text-align: justify;
        font-weight: bold;
        line-height:1.3;
} 

.exergue_droite {
      float: right;
      font-size: 1.3em;
      font-family: Georgia, Helvetica, Sans-serif;
      color:#990000;
      background: #FBFBF3;
      width: 150px;
      padding: 15px 0 0 20px;
      text-align: center;
      border: none;
      margin: 2px 15px 5px 15px;
      line-height: 1em;
      font-weight:bold;
}

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

Write a Comment

Commenter

  1. 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 !

  2. 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 :-)

  3. 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 !