среда, 15 февраля 2012 г.

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

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

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

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

Итак,
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"
КаленДАРь - праздник на каждый день
читать дальше...

6 комментариев :

  1. я попробую, спасибо)))я с таким сталкивалась уже. и чтоб кпртинка не вылазила я меняла ширину боковой панельки. это все что я могла-знала сделать.

    я не знаю как фото подписать. может просветите темную??

    спасибо!)))))

    ОтветитьУдалить
  2. Мариночка, я не поняла что значит подписывать фото? Опиши подробнее.

    Копирайт на фото ставят в графическом редакторе. А всплывающую надпись при наведении мышки на картинку делается параметром alt="...", который также прописывается как атрибут для кода img.

    ОтветитьУдалить
  3. Марина, дело хорошее, но я не поняла. У меня вылезает веселый календарь (он есть у многих). КаленДАРь - праздник на каждый день http://www.kalen-dar.ru/i/informer.jpg К сожаленью код не могу скопировать в коммент, не пропускает. Что в нем изменить? Там вообще нет ширины

    ОтветитьУдалить
  4. Я - Маша, но с давних пор и на Марину отзываюсь. :)

    Лена, скинь мне на почту cloverm@yandex.ru код календаря. Я посмотрю.

    ОтветитьУдалить
  5. Но если ее (ширины) там нат, значит надо добавить. Посмотри в этом же сообщении я пример написала. Скопируй width="180", вставь после img

    ОтветитьУдалить
  6. Да, и 180 замени на нужное тебе число.
    Должно получиться

    ОтветитьУдалить

Мне важно знать Ваше мнение.
Спасибо за отзыв!