Меня спрашивали как изменить поля между текстом и изображениями в статьях Blogger. Учитывая что вероятно эта тема также может быть интересна другим, я решил опубликовать пост на эту тему.Я ограничусь обработкой темы изображениями, вставленными с помощью редактора Blogger, оставляя без внимания те случаи, когда пользователи создают посты с помощью Open Live Writer.
Чтобы добавить изображения, щелкните курсором в том месте, куда их нужно вставить, затем перейдите к кнопке вставить изображение и выберите изображение на компьютере, фотографии уже имеющихся в блоге, в архиве Google Фото, на мобильном телефоне, на веб-камере или через его адрес, на случай, если фото уже было в сети.
В любом случае изображение будет показано в редакторе, и нам нужно будет выбрать его, щелкнув по нему, чтобы добавить теги Title и Alt, используя кнопку Свойства. Этими тегами будет текст заголовка и альтернативный текст (alt) соответственно. Название будет отображаться когда и браузере будет наведён курсор на изображение, в то время как альтернативный текст будет загружен в браузере, если по каким — то причинам он не можете загрузить изображение. Последнее особенно важно для того, чтобы сделать пост максимально дружественным для SEO.
В дополнение к кнопке « Свойства» есть опции, чтобы установить размер фотографии и выбрать выравнивание. Для размеров вы можете выбрать между маленьким, средним, большим, очень большим и оригинальным размером. Для выравнивания есть три варианта: Левый, Правый и Центр . Я отказываюсь от подписи, которая оказывается мало используемой функцией и которая в итоге приводит к созданию двухстрочной таблицы и столбца с фотографией в верхней ячейке, а подпись — в нижней.
Выравнивание изображения Blogger
Если вы выберете Центр, изображение будет вставлено в сообщение без текста слева и справа. Если после выбора этой опции вы перейдете к HTML вместо Write, вы увидите строку, clear:both в коде; что предотвращает отображение других элементов в обеих частях фотографии.
Установка центрированного изображения между текстом.
Выровняв изображение по центру, вы можете установить только расстояние для фотографии от текста над ней и под ней . Blogger выбирает эти пробелы в зависимости от размера шрифта сообщения .
Для этой цели используется единица измерения em, которая является шириной заглавной буквы Mшрифта, которым написан пост. Но это не делается для центрированных изображений. Вы увидите только одну строку кода, как эта
style=»margin-left: 1em; margin-right: 1em;»
который устанавливает расстояние фотографии от содержимого до ее левого и правого края, что является плеонастическим, поскольку этот текст отсутствует в случае центрированного изображения. Если вы хотите установить расстояние между фотографии над и под ней, вы можете изменить эту строку кода следующим образом
style=»margin-top: 1.5em; margin-bottom: 1.5em;»
где я изменил значение пространства с 1em до 1.5em, вы должны помнить, что это единица измерения. После публикации или обновления поста вы увидите фотографию с отступом от текста выше и ниже её.
Расстояние между фотографиями и тестом с правым выравниванием
Гораздо интереснее выравнивание справа или слева. Давайте сначала посмотрим на выравнивание справа.
Переход к HTML это строка кода
style=»clear: right; float: right; margin-bottom: 1em; margin-left: 1em;»
Выделенная часть желтым цветом служит для выравнивания фотографии вправо и предотвращения присутствия другого контента всегда в одной и той же части. Подсвеченная зеленым цветом часть устанавливает расстояние между фотографиями и текстом. Тег margin-bottom фиксирует расстояние от базовой части, а тег margin-left — расстояние от левой стороны.
Если, например, мы хотим уменьшить это пространство, как показано на предыдущем скриншоте, то для этого будет достаточно, заменить 1em, например на 0,5em или даже меньше. Вы также можете использовать два разных размера для нижнего и левого отступа. Обновите пост чтобы увидеть полученный результат и в конечном итоге откалибровать пространство.
Расстояние между фотографиями и тестом с левым выравниванием
Если вы выровняете изображение по левому краю, у нас будет ситуация, подобная следующей на скриншоте.
Переходя к HTML, вы найдете строку кода, подобную следующей:
style=»clear: right; float: right; margin-bottom: 1em; margin-left: 1em;»
Подсвеченная часть желтым цветом используется для выравнивания по левому краю фотографии и для предотвращения другого контента из той же части. С выделенным фоном зеленым цветом, устанавливается расстояния снизу и справа .
Чтобы в конечном итоге уменьшить эти пробелы , как на скриншоте примера, достаточно изменить эту строку
style=»clear: left; float: left; margin-bottom: 0.6em; margin-right: 0.4em;»
которая установит расстояние 0,6em для низа и 0,4em для правой стороны.
