Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
27 novembre 2010 6 27 /11 /novembre /2010 01:00

Petit (façon de parler…) aide-mémoire pour tritureurs de blog, parce qu'un jour j'en ai eu marre de toujours chercher quel div se trouve coincé dans quel autre, comment s'écrit telle classe, quel sélecteur CSS utiliser, etc. .

[1] Infos générales - Haut et bas de page

  1. Structure commune
  2. Les types de page de blog
  3. En-tête
  4. Pied de page

[2] La cellule des articles

[3] Articles et quasi-articles

[4] Annexes des articles

[5] Modules

[6] Diablogs

Toutes les pages d'un blog sont organisées selon un même canevas (première partie de cet article). Le contenu de ce canevas dépend d'abord du type de la page concernée : accueil, article, archive, etc. (deuxième partie de cet article).

Enfin les détails de chaque case du canevas dépendent des choix de mise en page que vous faites dans l'admin du blog : ajout ou suppression d'éléments, options diverses. Ces détails sont présentés dans les articles suivants. Pour vous donner une idée, ce premier article présente l'en-tête et le bas de page.

Tout ceci n'a rien d'officiel ! Je m'efforcerai de le tenir à jour mais ne promets pas une réaction instantanée.

Conventions utilisées : les balises sont écrites en noir, les classes (sans le point) en rouge, les identifiants (sans le dièse) en blanc sur gris. Attention à ne pas confondre minuscules et majuscules, trait d'union (-) et tiret bas (_) !

Structure commune

Les premiers niveaux sont les mêmes pour toutes les pages.

Ossature du blog

html
La fenêtre du navigateur
body
La page
divglobal
Le corps de blog
divlnln_0
En-tête (détails)
divlnln_1
Articles et modules (détails)
divlnln_2
Pied de blog (détails)
divlegals
Mentions légales (pas de détails)

Détails d'une ligne

divlnln_X
Xe ligne (pour la première ligne X = 0)
divclcl_X_0
Première cellule
divcolumn_content
Contenu de la cellule
divclcl_X_1
Deuxième cellule
divcolumn_content
Contenu de la cellule
divcl
Ainsi de suite pour les autres cellules
divclear
Assure que la ligne ln se termine en-dessous des flottants.
À garder à l'esprit :
  • ln = LiNe = LigNe
  • cl = CoLumn ou CeLl = CoLonne ou CeLlule
  • la numérotation commence à zéro
  • les numéros n'expriment que la place de chaque ligne ou cellule dans la page, pas son rôle. Rien ne garantit que ln_0 est forcément l'en-tête du blog : elle n'est que sa première ligne. Rien ne garantit que cl_1_0 est forcément la cellule contenant les articles : elle n'est que la première cellule de la deuxième ligne.

Les types de page de blog

Accueil
La page d'entrée (correspondant à l'URL du blog) mais aussi toutes les pages de suite (1-index.html, 2-index.html, etc.). Articles complets ou résumés (choix de configuration).
Articles
Ne désigne plus que les pages de catégorie. Articles complets ou résumés (choix de configuration).
Article seul
Un article lorsqu'on y accède par son URL propre ( permalink ), par exemple en cliquant sur son titre ou par la newsletter de publication. L'article est toujours complet.
Article et commentaires
Variante du cas précédent, affichant les commentaires éventuels.
Liste complète
La liste complète des articles, où ne figurent que des extraits de 200 caractères, sans images ni balisage.
Archives
Les articles d'un jour ou d'un mois. 200 premiers caractères, comme dans la liste complète.
Articles les plus commentés
Liste des titres des articles les plus commentés, regroupés par catégorie.
"Pages"
Des pages de blog à part, sans date ni possibilité de commentaire, avec leur propre système de catégories. Dans la suite je les nomme toujours OB-pages (terme non officiel…) pour les distinguer du terme  page  dans son acception courante.
CGU
Le règlement du blog (Conditions Générales d'Utilisation). Ben oui, pourquoi ne pas s'en soucier ?

Cette liste (non officielle, je répète !) vaut pour la configuration "classique" comme pour la configuration "avancée". Rappelons la signification de ces termes :

Classique
le blog n'a qu'un seul CSS et qu'une seule mise en page, applicables à toutes les pages.
Avancée
le CSS et la mise en page "accueil" s'appliquent aux pages d'accueil, le CSS et la mise en page "pages" s'appliquent aux OB-pages, le CSS et la mise en page "articles" à tout le reste.

Deux schémas pour commencer :

Habituellement l'en-tête se trouve dans la 1ère ligne du blog, ln_0 .

En-tête

divcolumn_content
Contenu de la cellule
divheader
1er emballage
divtop
En-tête. 3 variantes : nom du blog, image, personnalisé
En définitive, la bannière se trouve emballée dans cinq div emboîtés :
  • ln_0
  • cl_0_0
  • cl_0_0 column_content
  • header
  • top
auxquels s'ajoutent encore deux niveaux dans les variantes autres que personnalisées (h1 et a, ou a et img). Une telle profusion permet une mise en page soignée.

Habituellement le pied de page se trouve dans la 3e ligne du blog, ln_2 .

Pied de page

divcolumn_content
Contenu de la cellule
divfooter
Pied de page
tout et rien
Texte saisi dans l'éditeur OB
divclear
Assure que le div.footer se termine en-dessous des flottants.
Structure analogue à celle de l'en-tête, en plus simple. Quatre div emboîtés (et non cinq) :
  • ln_2
  • cl_2_0
  • cl_2_0 column_content
  • footer
… et pas de variantes prêtes à l'emploi. Initialement le pied de page contient un lien de retour à l'accueil.

Oublis, erreurs : merci de me les signaler en commentaire :-)

par Aïe mes doigts ! - dans Briques
commenter cet article

commentaires

Archives