How To: Format Images in posts beautifully How To: Format d'images magnifiques dans des postes

Images add scenic beauty to posts (unless you include really bad images). Images ajouter à la beauté des paysages postes (à moins que vous ne comprennent vraiment les images). Most bloggers advise you to include images at the at or around the beginning of your posts. La plupart des blogueurs vous conseillons d'inclure des images à l'au ou autour du début de vos messages. And I am no different. Et je ne suis pas différente.

However, one thing that those advice does not contain is how to include images which blend well with the content, yet be noticeable by a reader. Toutefois, une chose que ces conseils ne contient pas est de savoir comment inclure des images qui se fondent bien avec le contenu, encore perceptible par un lecteur. Selecting the right image is important, but so is the way you place them. Sélection de l'image est importante, mais c'est la façon dont vous les mettre. Including an image with an uninspiring <img src=”" / > tag is just not in anymore – they're so web 1.0/year 1998. Y compris une image avec un uninspiring <img src="" /> balise n'est pas en plus - ils sont tellement web 1.0/year 1998.

I prefer to use centered images, with the width slightly less than your post area width. Je préfère utiliser centrée images, avec la largeur légèrement inférieure à la largeur de votre zone de message. This example shows you how to center the image, and add caption. Cet exemple vous montre comment le centre de l'image, et ajouter la légende.

What you need now is a sensible, easy way to format images, without spending the whole day on it. Qu'est-ce que vous avez besoin maintenant est un sensible, facile pour le format des images, sans passer la journée entière sur lui. This can be achieved by a combination of two things – a CSS styling rule to be added to your style.css , and some HTML code which you have to wrap around your image. Cet objectif peut être atteint par une combinaison de deux choses - une règle de style CSS pour être ajouté à votre style.css et un code HTML que vous avez à s'enrouler autour de votre image.

Note that this cannot be used for images previously added, without editing them. Notez que cela ne peut pas être utilisé pour les images déjà ajouté, sans les éditer. The reason: while CSS styling rule affects all elements, HTML markup has to be manually added around each image. La raison: alors que la règle de style CSS affecte tous les éléments de balisage HTML doit être ajoutée manuellement dans chaque image.

Add this code to your style.css file, towards the end: Ajouter ce code à votre style.css fichier, vers la fin:

div.ci { text-align: center; margin: 0; padding: 16px 0; padding: 0; border: none; }
div.ci small { font-size: .9em; line-height: 1.4em; color:#777; padding: 7px 0 0 0; }

The code above is the styling rules which help you to position the image. Le code ci-dessus est le style des règles qui vous aideront à positionner l'image. To apply the styling, we need to use HTML around the image tag. Pour appliquer le style, nous avons besoin d'utiliser du HTML dans la balise d'image. The HTML code is as follows: Le code HTML est le suivant:

<div class="ci"><img src="URL_TO_IMAGE" alt="ALT TEXT" /><br />
<small>YOUR CAPTION</small></div>

In the code, replace URL_TO_IMAGE with the image URL, ALT TEXT with what you want to show when the image is not displayed, and YOUR CAPTION with the caption that you want. Dans le code, remplacez URL_TO_IMAGE avec l'URL de l'image, ALT TEXT avec ce que vous voulez afficher lorsque l'image n'est pas affichée, et la légende avec la légende que vous voulez.

Alternatively, you can remove the caption, by using this code: Sinon, vous pouvez supprimer la légende, en utilisant ce code:

<div class="ci"><img src="URL_TO_IMAGE" alt="ALT TEXT" /></div>

Remember to tweak the caption colour, size and font to your liking, and your images will rock! N'oubliez pas de modifier la légende de couleur, la taille et la police à votre goût, vos images et de rock!