Смиииирно! Равнение на... (картинки в блоге)

Последнее время стала замечать, что во многих блогах картинки, расположенные в столбик, стали выскакивать за границы подложенного под них фона.
Гораздо приятнее, когда фотографии, как солдатики, ровно выстроены в "колонну по одному".

Как подравнять картинки в столбике.

Вот пример. В нем я красными линиями показала разный уровень правой границы каждого изображения.

Первая картинка сильно меньше отведенного поля, вторая почти в край, а третья - вылезла за границы.

Нам нужно прописать в свойствах ссылки на каждую картинку параметр "ширина". Подберите ее один раз, а потом копируйте по образу и подобию для других изображений из этого блока.

Итак,

1. Открываем на редактирование блок (в данном примере это "конфетки"). Делаем это нажав на иконку "редактирование" (ключик и отвертка) под конфетным блоком, если у вас включена в настройках блога эта опция. Или заходим в меню "Дизайн" в панели управления, и находим нужный нам конфетный блок. Нажимаем "изменить".

2. В появившемся окне видим код со ссылками на изображение.

Находим первую ссылку с кодом <img src="......  и анализируем ее параметры:

- параметр height="....". Внутри кавычек стоит какое-то число - это высота картинки в пикселях. Удаляем его из нашей ссылки вместе с кавычками и числом. Ну а если его нет изначально, переходим к след. пункту.
- параметр width="....". Внутри кавычек стоит какое-то число - это ширина картинки в пикселях. Если такого параметра в ссылке нет - добавляем. Если есть - редактируем. Тут придется методом проб/просмотров подобрать нужное число, чтобы визуально картинки красиво смотрелись.

3. Когда оптимальное число найдено, скопируйте полностью кусочек кода для этого изображения вместе с заголовком, подписью под ней (что у вас еще там есть).

4. Вставьте скопированный код в самом начале окна вот в таком виде:

<!--
скопированный фрагмент кода для изображения
-->

<!-- и -->  - это код под названием "комментарий". Все что внутри него сохранится в тексте вашей странички, но на экране не будет отображаться. Что-то сродни "плащу-невидимки": вроде ты есть, но окружающим тебя не видно.

5. Когда вам нужно будет вставить очередную картинку, вы просто скопируете все что внутри  <!-- и -->, вставите в нужное место, поменяете в нем адрес картинки и сопровождающий текст.

Пример.
Вот фрагмент моего шаблона для кода "конфеток".

<!--
<br />
<a href="http://адрес на блог.html" target="_blank">
<img border="0" width="180" src="http://адрес картинки.jpg" />
<br />
до 00/00/2012</a>
<br />
*****
-->

Как это визуально смотрится вы можете увидеть на правой панели моего блога в "кондитерском отделе".

Надеюсь, мой совет будет для вас полезным.

ДОБАВЛЕН пример.
Календарь. В коде не прописана ширина.


Он же, но в код я добавила ширину width="180"

читать дальше...