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
[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
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.
- 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 :
En-tête
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é
- ln_0
- cl_0_0
- cl_0_0 column_content
- header
- top
Pied de page
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.
- ln_2
- cl_2_0
- cl_2_0 column_content
- footer
Oublis, erreurs : merci de me les signaler en commentaire :-)
/idata%2F0386897%2FBulles%2Fbulle03_6.jpg)
/idata%2F0386897%2FVisages%2FDiablotines.jpg)
/idata%2F0386897%2FCiels%2FPanoCrepuscule.jpg)
/idata%2F0386897%2Fbatiments%2FPano-Pont-Neuf.jpg)
/idata%2F0386897%2FChlorophylle%2FRideauVigne.jpg)
/idata%2F0386897%2FVitrines-et-boutiques%2Farmures.jpg)