How To: Format Images in posts beautifully Как форматировать картинок в сообщениях красиво

ADVERTISEMENT РЕКЛАМА
To get our software and web/tips via email, sign up for Чтобы получить наше программное обеспечение и веб / советы по электронной почте, подпишитесь на daily email newsletter Ежедневный электронный бюллетень . .
Subscribe to RSS feed Подписаться на RSS-канал or или follow me Follow Me on Twitter? на Twitter?

Images add scenic beauty to posts (unless you include really bad images). Изображения добавить красоты на должности (если вы действительно плохо относятся изображения). Most bloggers advise you to include images at the at or around the beginning of your posts. Большинство блоггеров, советуем вам включить изображения в окрестностях или в начале вашей должности. And I am no different. И я не исключение.

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. Однако одна вещь, что эти советы не содержать в том, как включить изображения, которые сочетается с содержанием, но будут заметны читателю. Selecting the right image is important, but so is the way you place them. Выбор правильного имиджа важно, но так, как вы разместите их. Including an image with an uninspiring <img src=”" / > tag is just not in anymore – they're so web 1.0/year 1998. В т.ч. изображения с скучным <img src="" /> тег просто не больше - они так Сети 1.0/year 1998.

I prefer to use centered images, with the width slightly less than your post area width. Я предпочитаю использовать по центру изображения, с шириной чуть меньше, чем ширина области должность. This example shows you how to center the image, and add caption. Этот пример показывает, как к центру изображения, а также добавить заголовок.

What you need now is a sensible, easy way to format images, without spending the whole day on it. Что вам нужно сейчас, это разумный и простой способ формат изображения, не тратя целый день на нем. 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. Это может быть достигнуто за счет сочетания двух вещей - правила CSS Styling которые будут добавлены к вашей style.css и некоторый код HTML который нужно обернуть вокруг изображения.

Note that this cannot be used for images previously added, without editing them. Заметим, что это не может быть использована для изображения ранее добавила, без их редактирования. The reason: while CSS styling rule affects all elements, HTML markup has to be manually added around each image. Причина: в то время CSS Styling правило затрагивает все элементы, HTML разметки должен быть добавлен вручную вокруг каждого изображения.

Add this code to your style.css file, towards the end: Добавьте этот код на ваш style.css файл, в конце:

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; }

ADVERTISEMENT РЕКЛАМА

The code above is the styling rules which help you to position the image. Код выше Styling правил, которые помогут вам в положение изображения. To apply the styling, we need to use HTML around the image tag. Для применения стиля, мы должны использовать HTML вокруг изображения метки. The HTML code is as follows: Код HTML выглядит следующим образом:

<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. В коде замените URL_TO_IMAGE с изображением URL, Альт текст с тем, что вы хотите показать, когда изображение не отображается, и Ваша подпись с подписью, что вы хотите.

Alternatively, you can remove the caption, by using this 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! Помните настроить заголовок цвет, размер и шрифт по своему вкусу, и ваше изображение будет рок!

To get our latest articles, Чтобы получать наши последние статьи, click here to sign up Нажмите здесь, чтобы подписать вверх for our free email newsletter or subscribe to на нашу бесплатную рассылку электронной почты или подписаться на RSS feed RSS подача

§ Comments § Комментариев