Petit guide pour modifier graphiquement son blog.

I) Accéder au fichier CSS

- Ouvrir son blog en mode Admin
- Aller dans le second menu horizontal "Modification de mise en page"
- Aller dans la dernière option du menu vertical orange "Modifier fichier CSS"
- Le fichier CSS s'affiche dans la fenêtre de texte à droite.

II) Modifications dans le fichier CSS

=> Pensez toujours à sauvegarder (par un copier-coller dans le bloc-notes par exemple) le texte de la fenêtre CSS AVANT toute modification !

=> NE PAS MODIFIER les valeurs du fichier CSS par les formulaires de saisie proposés, cela remet à zéro toute votre personnalisation !

1) Bandeau de titre :

Pour insérer l'image, après l'avoir hébergée sur internet, modifier le bloc cadretitreblog suivant comme suit :

- #cadretitreblog { indique le début du bloc
- la ligne Width indique la largeur de l'image (ici 740 pixels, à adapter à votre image)
- la ligne Height indique la hauteur de l'image (ici 131 pixels, à adapter à votre image)
- la ligne Background-image indique la localisation de l'image hébergée

Comment connaître les dimensions (hauteur / largeur) de votre image ?
- utiliser un programme d'image : voir sur mon blog ici :
http://www.blogg.org/blog-1780-date-2005-02-27-billet-111205.html
ou
- si l'image est affichée dans votre navigateur web, un clic droit sur l'image, puis choisir l'option "Propriétés". Dans la fenêtre qui s'affiche, la rubrique "Dimensions" vous indique ces deux valeurs en pixels.

#cadretitreblog {
width: 740px;
height:131px;
background-image: url("http://mon_image_titre.jpg ou gif ou png");

2) Titre et sous-titre:

Le titre : bloc #titreblog{

Si le titre est dans le graphique, il faut "neutraliser" le titre sous forme de texte, mais sans le supprimer pour garder le référencement dans Blogg.org

- la ligne #titreblog{ indique le bloc à repérer et à modifier
- la ligne color indique la couleur des caractères (none = aucune)
- la ligne font-size indique la taille des caractères (0 = la plus petite)

#titreblog{
color: none;
font-size: 0px;

Idem pour le sous titre : bloc #soustitre{

#soustitre{
color: none;
font-size: 0px;

3) Posts :

Vous pouvez également mettre une image en fond de vos posts, le texte venant au-dessus :

- bloc .post{
- la ligne width indique la largeur du bloc central des posts (ici : 545 pixels. Ne pas prévoir une image plus large que le bloc !)
- la ligne Background-image indique la localisation de l'image hébergée

.post{
width:545px;
background-image: url("http://mon_image_post.jpg ou gif ou png");

4) Menus :

Une image en fond de menu est possible, il faut identifier les blocs concernés :

#moblog{
#themes{
#source{
#archives{
#liensthemes{
#liensthemesbas{
#glossaire{
#ecran{

pour chacun, insérer deux lignes comme suit, pour indiquer :

- la ligne width indique la largeur de la colonne des menus (ici, 190 pixels. Ne pas prévoir une image plus large que la colonne !)
- la ligne background-image indique la localisation de l'image hébergée

width:190px;
background-image: url("http://mon_image_menu.jpg ou gif ou png");

=> Pensez toujours à sauvegarder (par un copier-coller dans le bloc-notes par exemple) le texte de la fenêtre CSS AVANT toute modification !

=> NE PAS MODIFIER les valeurs du fichier CSS par les formulaires de saisie proposés, cela remet à zéro toute votre personnalisation !

</font />Les valeurs indiquées ci-dessous en pixels (740, 131, 545 et 190) sont celles de ce blog (Charmeur-Mutin).
Vous devez les remplacer par les valeurs correspondant à votre blog, bien entendu !

Illustrer un blog

J'ai remarqué que c'était une demande qui revenait de façon récurrente sur le site.
Je vous propose donc un petit guide très simple.
Pour moi, illustrer ainsi un post ne demande qu'une ou deux minutes.
Alors, vous devez être capables de faire pareil !

Voici les quelques étapes :

1. Choix d'un logiciel de retouche d'image
2. Recherche et sauvegarde de l'image
3. Recadrage
4. Redimensionnement / rééchantillonnage
5. Rendre plus net
6. Améliorer les couleurs
7. Stocker l'image sur le Net
8. Insérer l'image dans le blog

Etape 1 - Choix d'un logiciel de retouche d'image

Vous pouvez cliquer sur chaque image pour l'agrandir dans une nouvelle fenêtre.
Retour au menu

Deux logiciels très simples, gratuits et en français seront expliqués dans ces pages :

IrfanView

• Le logiciel de base (850 Ko) : http://ciril.tucows.com/files2/iview395.exe
• Le module de langue française (69Ko) : http://www.irfanview.net/lang/french395.exe
• Les filtres additionnels (4,6 Mo) : http://ciril.tucows.com/files3/irfanview_plugins_395.exe

Un didacticiel partiel se trouve à cette adresse : 
http://perso.wanadoo.fr/2.8/photonum/novice/irfanview/irfanview385.htm

XnView

La version de base fait 1 Mo, la version la plus complète fait 7,5 Mo.
Je vous recommande cette version : tous les compléments sont déjà installés.
Le logiciel est disponible en 41 langues, supporte 400 formats graphiques différents et s'installe sur 12 systèmes d'exploitations différents.

Les explications qui suivent sont présentées pour ces deux logiciels.
Mais d'autres logiciels gratuits peuvent être utilisés comme les 3 suivants, à titre d'exemple :

• The Gimp (complet mais complexe) : http://www.gimp-fr.org/
• PhotoFiltre (simple) : http://page-antonio.chez.tiscali.fr/utilitaires/photofiltre.htm
• Pixia (simple) : http://pixia.free.fr/

Etape 2 - Recherche et sauvegarde de l'image

Vous pouvez cliquer sur chaque image pour l'agrandir dans une nouvelle fenêtre.
Retour au menu

Vous n'avez pas d'image ?
Utiliser un moteur de recherche comme Google Image ou Yahoo Image

• copier l'image en mémoire (par Ctrl + C)

ou

• cliquer sur l'image avec le bouton de droite de votre souris
• choisir "copier" dans le menu qui apparaît

Puis ouvrir votre logiciel de retouche d'image (voir à l'étape précédente)

IrfanView

• Coller l'image (par Ctrl + V)
• ou menu "Edition" et choix "Coller" (en anglais "Paste")
  
     

XnView

• Coller l'image (par Ctrl + Majuscules + V)
• ou Menu "Edition" choix "Importer le presse papier"
  
  

FORMATS DE SAUVEGARDE DE L'IMAGE

Petit rappel des formats d'images :

• JPG / JPEG : format convenant aux photos, avec plusieurs milliers ou millions de couleurs. Ne pas descendre en dessous d'une compression de 75%, pour éviter une trop forte dégradation de l'image d'origine.
• GIF : format convenant aux dessins et cliparts. Il ne contient que 256 couleurs, mais il a l'avantage de gérer les couleurs transparentes.
• PNG : format similaire au JPG, avec une moindre compression mais gérant la transparence d'une couleur.

Les deux premiers formats (JPG et GIF) sont les plus employés. Le format PNG le devient de plus en plus, même s'il prend plus de place qu'une image au format JPG.