Catégorie : ✍️ Blog

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 marge^1.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…