Урок 194. Как задать отступ картинки от текста в WordPress

Последнее изменение поста: Декабрь 16, 2016

Как задать отступ картинки от текста в WordPressПривет! В новых версиях WordPress отступ картинок от текста делать не совсем удобно, а если точнее, то вообще не удобно. В ранних версиях WP можно было задать отступ картинки прямо в параметрах изображения, но теперь такая возможность отсутствует. В этой статье, я расскажу несколько способов, как сделать отступ картинки от текста. Читайте также, как сделать уникальную картинку.

1-й способ

Этот способ простой, но не совсем удобный. В этом случае, после установки картинки в текст, надо дополнительно прописать HTML код:  style=”margin: 5px 5px 5px 5px;”, который задает отступы со всех сторон картинки: верх, право, низ, лево. Смотрите пример:

<img class="alignleft wp-image-9483 size-full" style="margin: 5px 5px 5px 5px;" title="заголовок" src="http://картинка.jpg" alt="заголовок" width="130" height="130" />

В свои статьи я добавляю небольшое изображение вначале статьи, в котором мне нужно задать только отступ от левого и правого края 5 пикселей. Для этого я прописываю следующий код:  style="margin-left: 5px; margin-right: 5px;"

2-й спрособ: плагин Advanced Image Styles

Плаигин Advanced Image Styles позволяет задавать отступы картинке прямо в параметрах изображения. Можно задать не только отступы, но цвет и толщину рамки. Это простенький плагин, и в описании не нуждается. Перейдем к третьему способу.

3-й способ: отступ картинки с помощью CSS

При редактировании картинки в WordPress, можно добавить CSS-класс изображения. Именно таким способом можно быстро задавать отступ картинкам в WordPress. С помощью CSS можно задать не только отступ, но и определенный стиль, например, толщину и цвет рамки.

Делается это следующим образом: в файле стилей, обычно это файл style.css, надо прописать новый стиль, который можно потом легко применить к любой картинке на сайте.

Как сделать отступ картинки от текста в WordPress 4.x

Как сделать отступ картинки от текста в WordPress 4.x

 

В файле stylee.css можно прописать несколько стилей для добавления к изображениям. Вам потом останется только решать, как какой картинке применить тот или иной стиль. В этой статье я покажу простой пример, т. е. покажу один простенький стиль и как его применить.

Чтобы понять, как это работает, сделайте следующее: в файле стилей style.css, который находится в шаблоне Вашего сайта, добавьте в самом конце следующий код

/* стиль для картинок */
.mystyle  {
margin: 0px 5px 0px 5px;
border: 2px solid #5A5AFF;

}

 

1.    Слово mystyle – это и есть название стиля, и его можно заменить любым другим.

2.    Параметр margin задает отступы, о которых я писал выше

3.    Строка border задает толщину рамки и цвет

Этот стиль задает картинке отступ в 5 пикселей, справой и с левой стороны, а также рамку синего цвета, толщиной 2 пикселя. Теперь, чтобы добавить картинке стиль, нужно в параметрах изображение, прописать CSS-класс «mystyle», как показано на скриншоте выше.

Для изображения можно применить разные красивые стили, и с разными эффектами.
___________________
К уроку 195. Как скрыть, или подменить версию WordPress

Поделиться статьей с друзьями


2 Comments

  1. И правда весьма интересно, уже давно исчезла из редактирования функция отступов. Мне пришлось ничего не отступать, потому что я просто понятия о копании в кодах не имела. Как говорится, разработчики вордпресса все делают только для людей. До этого ведь все было просто и замечательно, в коды никому не приходилось лезть и ковырять. 😉

  2. Воспользовалась первым способом, все получилось, спасибо!

Бесплатный практикум по заработку на партнерских программах

 

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

на Вашу почту было отправлено письмо для подтверждения подписки

Подписаться на новости сайта

Получайте новые статьи на свой Email

На Вашу почту было отправлено письмо для подтверждения подписки.