Skip to content

 

Задать обводку, отступы и размеры картинкам в редакторе Вордпресс

редактирование картинокДорогие друзья, с вами на связи Ольга Абрамова и после очередного отдыха по приглашению моей виртуальной коллеги-фрилансера Анны Короленко с Украины я снова готова к работе 🙂

Сегодня я покажу вам как редактировать картинки в редакторе изображений Вордпресс для более красивого отображения в постах. Разберем, как сделать обводку (border), изменить размеры (size) и задать отступы (margin).

В самом начале ведения блога, с картинками у меня была полная ерунда. Я вставляла их только в середине поста, игнорируя передовицу 🙂 т.е. самое начало поста, чтобы картинка была в ленте. Потом я исправилась, но картинки смотрелись не очень привлекательно, особенно на белом фоне. Захотелось их как-то начать выделять.

Сначала я это решала с помощью программ для редактирования изображений, типа Paint, позже, установив расширение для Гугл и Хром для создания скриншотов, также добавляла обводку, которую вы можете наблюдать практически на всех картинках к моим постам.

А еще позже, мне надоело делать эту обводку в программах 🙂 и я решила разобраться, как же упростить эту процедуру с помощью текстового редактора Вордпресс.

Большинство новичков быстро вникают как сделать стандартную однопиксельную обводку черного цвета. А вот я хочу голубую, да пикселей на 5-7. Как это осуществить?

Очень просто. При создании нового поста я загружаю картинку с помощью кнопки Добавить медиафайл. Когда картинка появилась в редакторе, нажимаю пиктограмму Редактировать изображение.

обводка изображения

В открывшемся редакторе выбираю вкладку Расширенные настройки. В разделе Свойства изображения, рядом со словом Рамка, прописываю цифру, какой толщины должна быть рамка. Я ставлю 7. Чтобы эта цифра активировалась, ставлю курсор в поле Стили и кликаю по нему. Здесь же появляется запись: border: 7px solid black;. И картинка вверху обрамляется черной обводкой толщиной 7 рх.

обводка изображения

Но мне нужен другой цвет. Голубой. Пипеткой я определяю конкретный цвет и заменяю им черный. Теперь запись выглядит так: border: 7px solid #00a3e8;. Но заменив цвет, я не вижу изменений на самой картинке. Тогда также кликаю по той же цифре 7 и картинка обновляется вместе с бордером. Нажимаю Обновление. Всё, нужная обводка готова 😀

обводка изображения Вордпресс

Но мне и этого мало. Я хочу еще упростить себе работу 🙂 Я копирую эту запись и сохраняю ее в онлайн-блокноте. И когда работаю с картинкой, очень быстро получаю этот код и вставляю в стиль.

Если кому нравится, можно закруглить углы у обводки. Для этого надо прописать свойство border-radius. Открыть редактор и в поле стиля ручками прописать: border-radius: 7px; (цифра может быть любая). В полном виде запись будет выглядеть так: border-radius: 7px; border: 7px solid #00a3e8;.

Но если после обновления опять открыть редактор, то можно увидеть, что запись изменилась. Она будет вот такой: border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; border: 7px solid #00a3e8;. Ничего страшного, просто стили прописались для каждой из 4 сторон.

border-radius

Здесь же можно задать конкретные размеры для картинки. Не всегда удобно их корректировать с помощью процентного изменения. Например, в этом посте какие-то картинки получились шире, какие-то уже. Я решила выравнять их все по минимальной ширине. Скопировала ширину из меньшей картинки и проставила всем остальным тоже самое. Но если не изменить высоту, то картинки получатся вытянутые.

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

Если картинка устанавливается с обтеканием текста, например, справа или слева, то если не прописать ей отступы, она сливается с текстом и смотрится некрасиво. Требуется какое-то разграничение.

Для этого надо прописать отступы. Я в основном задаю только горизонтальные. По умолчанию в редакторе каждый отступ выставляется с 2 сторон — горизонтальный слева и справа; вертикальный сверху и снизу. Мне нравится, когда отступ только с одной стороны, со стороны текста. Таким образом картинка по краю идет вровень с ним.

Для этого надо поставить в графе Отступ какое-то число, например, 10. Опять же кликнув по полю стиля, появляется запись: margin-left: 10px; margin-right: 10px;. Если картинка стоит слева, то я удаляю отступ слева - margin-left: 10px;, если картинка справа, то соответственно удаляю правый отступ - margin-right: 10px;. Но это уже детали, достаточно просто прописать число для нужного отступа.

margin

Полностью, стиль для картинки слева выглядит так: margin-right: 10px; border: 7px solid #00a3e8;

Для картинки справа: margin-left: 10px; border: 7px solid #00a3e8;

Для картинки по центру: border: 7px solid #00a3e8;.

Всем красивых картинок! 😉

вода Архыз недорого

11 комментариев

  1. Нина Жуперина:

    Оля, мы с тобой синхронно занялись редактированием картинок в WordPress 🙂

    • Ольга Абрамова:

      Ага 🙂 Я это увидела, когда написала пост и подбирала ключевые слова. Твой блог первым был в Гугле.

  2. Олег:

    Чего кому не хватает 🙂 У меня в теме картинки наоборот с обводкой (серой) и я не знаю, как ее подеть.

    • Ольга Абрамова:

      Олег, Вам нужно покопаться в файле style.css

    • Ольга Абрамова:

      Откройте файл style.css через FTP и найдите 333 строку #colLeft p img. Удалите весь стиль. Серое обрамление исчезнет. Прежде чем закрывать файл, убедитесь, что Вам это нравится. Если нет, верните все назад.

  3. Галина:

    Олечка, вы, как всегда, очень нужный материал выложили.
    Спасибо Вам!

    • Ольга Абрамова:

      Галина, пожалуйста 🙂

  4. Антонина:

    Ольга, здравствуйте! Мне понравились ваши статьи и я решила обратиться к вам с вопросом по поводу обрамления картинок. Для одного из свои блогов на wordpress я взяла тему twenty twelve. Там уже задан стиль с тенью. Но я хочу убрать ее. Я понимаю, что нужно править css, но что конкретно сделать не знаю. Надеюсь, что вы проинструктируете как убрать тень вокруг картинки. Заранее спасибо!

    • Ольга Абрамова:

      Антонина, здравствуйте,
      Если никто не редактировал Ваш шаблон и не менял файл стилей, и если хотите удалить только тень, откройте файл css редактором Notepad++, найдите стиль на строке 357 .entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image и удалите из скобок вторую строчку: box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);.
      Если изменения были, то скиньте ссылку на сайт, скажу более точно.

  5. Антонина:

    Ольга, супер! У меня все получилось! Я вам очень благодарна! =) Работаю на WordPress уже второй год. Эта CMS не требует знаний HTML. Но последнее время стали появляться желания внести изменение в шаблоны. Беру, как говорится, гугл в помощь, и дорабатываю. Есть желание научиться делать шаблон, но руки не доходят.

    • Ольга Абрамова:

      Антонина, пожалуйста. Хоть Вордпресс и не требует знаний языков, но уметь самой что-то подкорректировать нелишне. Так что помаленьку учите HTML и CSS, пригодится 🙂