Paris, photo, humeurs, un peu de HTML/CSS pour faire sérieux.
Feinte innocence et vraie naïveté (ou vice-versa).
Encore un blog qui agite ses petits bras en couinant "Viens me lire !"
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. .
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.
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 :
En-tête
Habituellement l'en-tête se trouve dans la 1ère ligne du blog, ln_0 .
En définitive, la bannière se trouve emballée dans cinq div emboîtés :
ln_0
cl_0_0
cl_0_0column_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.