Блоговедение: стройные ряды картинок

Posted on
  • воскресенье, 24 марта 2013 г.
  • by
  • ТТатьяна (Татьяна Ковалева)
  • in
  • Ярлыки:
  • Да, сегодня я опять про картинки в блоге.
    Мы, народ рукодельный, жуть как любим хвастаться своими творениями. Нащелкаем фотоаппаратом, немного приукрасим-обрежем фотки и бежим выкладывать на суд общественности.

    Блоггер позволяет отображать фото в 4-х стандартных размерах: маленьком, среднем, крупном и очень крупном. Дополнительно может отобразить в исходном размере. Но все эти размеры не всегда хороши для каждого конкретного случая.
    Далеко не всегда мы размещаем фотографии одинаковой высоты и ширины.
    В результате размещенные картинки выглядят лесенкой. Не смертельно, но весьма неаккуратно.


    Такое положение не оставило меня равнодушной и заставило покопаться в html-коде сообщения.

    1. В режиме создания-редактирования сообщения переходим на вкладку "HTML"



    2. Находим место, где прописаны наши фотографии. Обычно, адрес прописывается 2 раза: название файла и место его расположения. Чтобы особо не разбираться с языком программирования, лучше сразу подписать размещаемую картинку, и тогда по этому названию осуществить поиск


    Розовым я подчеркнула название фоток, а галочками отметила, где прописаны сами фотографии

    3. Находим ширину отображения фотографий: widht="ширина". На картинке пометила зеленым. 



    Не удивительно: ширина одной фотографии 306, другой - 278 пикселей. Вот Вам и лесенка. Я правлю число в кавычках на 400 во всех случаях. Вы же ширину для своего блога подбирайте опытным путем: можно оставить "средний" размер - это около 320 пикселей, можно сделать во всю ширину блога - около 600 пикселей. Подставляем и просматриваем, как больше нравится.

    4. Делаем отображение фото пропорциональными. Дело в том, что блоггер автоматически прописывает не только ширину, но и высоту картинок: height="высота". Пометила красным


    Чтобы не высчитывать пропорции каждой фотографии, я просто удалила упоминание о высоте (весь текст, обведенный красным). В данном случае пропорции фото сохранятся автоматически.

    5. Сохраняем и любуемся стройными рядами фотографий.





    PS: если у кого большая боязнь править html-код, не бойтесь! Это всего лишь одно сообщение. Скажу больше, если удалите что-то лишнее в коде, просто перезалейте фотографию по новой. Пара тренировок - и все будет само собой разумеющимся))

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

    1. Очень актуально! Обязательно попробую. Спасибо, Танечка.

      ОтветитьУдалить
    2. Обязательно воспользуюсь))))спасибо Танечка)

      ОтветитьУдалить
    3. Вам спасибо, что заходите, читаете... Я ведь тоже ковыряюсь-учусь по блогу))

      ОтветитьУдалить
    4. Таня,спасибо за урок.И правда очень полезный:)

      ОтветитьУдалить
    5. Спасибо за такой полезный раздел! С удовольствием присоединяюсь!

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