Последнее время стала замечать, что во многих блогах картинки, расположенные в столбик, стали выскакивать за границы подложенного под них фона.
Гораздо приятнее, когда фотографии, как солдатики, ровно выстроены в "колонну по одному".
Как подравнять картинки в столбике.
Вот пример. В нем я красными линиями показала разный уровень правой границы каждого изображения.
Первая картинка сильно меньше отведенного поля, вторая почти в край, а третья - вылезла за границы.
Нам нужно прописать в свойствах ссылки на каждую картинку параметр "ширина". Подберите ее один раз, а потом копируйте по образу и подобию для других изображений из этого блока.
Итак,
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"
Сообщения
.jpg)
