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

Как задать отступ картинки от текста в 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. Воспользовалась первым способом, все получилось, спасибо!

Leave a Reply

Яндекс.Метрика