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

Недавно мне в комментариях задали вопрос, как сделать отступ текста от картинок в WordPress. Дело в том, что в новых версиях WordPress, исчезло поле для выставления отступов в ручную.

otstup

Текст прилипший к картинке, смотрится не эстетично, да и читается плохо. Что же делать, как исправить ситуацию?

otstup

Давайте рассмотрим, как выйти из этого положения, и установить необходимые отступы текста от картинки.
На самом деле способов довольно много, даже плагин специальный выпустили, называется Advanced Images Styles. Так что сторонники плагина могут скачать и установить данный плагин. О том, как устанавливать плагины я уже писала.

Как отлепить картинку от текста

Но мы же не станем грузить блог лишними плагинами, и применим достаточно простой и удобный способ.
Существует несколько атрибутов, для установления отступов текста от края картинки. Рассмотрим основные:

hspace=»10″- устанавливает отступы по вертикали (то есть с левой и правой стороны)
vspace=»10″- устанавливает отступы по горизонтали

При добавлении картинки, открыть редактор в режиме «Текст», и вставить в код нужный атрибут, указав необходимый отступ.

Вот такой код и картинка были до вставки:

<img class=» size-full wp-image-2078 alignleft» src=»адрес картинки» alt=»graniza» width=»250″ height=»349″  />

otctyp_kartinki

Такой код и картинка стали после вставки:

<img class=» size-full wp-image-2078 alignleft» style=»border: 10px solid white; margin: 10px;» src=»адрес картинки» alt=»graniza» width=»250″ height=»349″ hspace=»20″ vspace=»0″ />

otctyp ot texta

Красные рамочки я нарисовала, чтобы вы лучше увидели, насколько пикселей, и в каких местах получился отступ. Как видите, картинка сдвинулась от края на 20 пикселей, и текст отступил от границы картинки на 20 пикселей.

otctup

Значения можно указывать любые, но минус в том, что отступы назначаются со всех сторон. То есть, если вы укажете значение hspace=»30″, то не только текст отодвинется от картинки на 30 пикселей, но и картинка сдвинется от края текстового поля на 30 пикселей. А это также не красиво.

Есть более удобный способ регулировать отступы. И поможет нам в этом свойство margin — которое устанавливает расстояния от внешней границы картинки (и не только картинки).

При помощи свойства margin можно задать любые отступы. Причём они могут быть разные, для разных сторон, а могут быть одинаковые. Например:

margin: 10px;

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

Для того, чтобы задать отступ для конкретной стороны, нужно вставить в код одно из значений:

  1. margin-top: 20px; — Отступ от верхней границы
  2. margin-left: 10px; — Отступ от левой границы
  3. margin-right: 20px; — Отступ от правой границы
  4. margin-bottom: 10px; — Отступ от нижней границы

Вот такой код изображения был до вставки:

<img class=»alignleft  wp-image-2079″ src=»адрес картинки» alt=»otctup» width=»213″ height=»305″ />

Такой он стал после вставки. Как видите, я перед SRC вставила style=»margin-right: 30px;». И поместила картинку в DIV. То есть окружила код  — <div> код картинки</div>.

<div><img class=»alignleft  wp-image-2079″ style=»margin-right: 30px;» src=»адрес картинки» alt=»otctup» width=»213″ height=»305″ /></div>

Результат вы можете посмотреть выше (картинка с вопросом).

А как быть, если мне нужны отступы с трёх сторон, и все разные?

Например я хочу разместить картинку слева, вплотную к границе документа, с небольшим отступом сверху, чуть больше снизу, и ещё больше справа (между картинкой и текстом). Тогда я задам такие значения:

  • margin: 10px 30px 20px 0;
  1. Первое значение — отступ сверху (10рх)
  2. второе значение — отступ справа (30рх)
  3. третье значение отступ снизу (20рх)
  4. четвёртое значение — отступ слева (0).

Как вы заметили, начинается с верхней стороны, и идёт по часовой стрелке — правая сторона, низ, левая сторона.

А если мне нужно расположить картинку справа, с обтеканием текста с левой стороны, я укажу другие значения:

  • margin: 10px 0 20px 30px;

Вы можете сказать, что это всё сложно и муторно, постоянно при размещении картинки, искать эти свойства, вставлять их в код! Могу вас обрадовать, можно всё значительно упростить, указать данные свойства один раз в файле CSS, а потом указывать нужный стиль при размещении картинки.

А как это всё применить на практике? Это всё не слишком сложно, и каждый из вас справится!

Может быть вы заметили, что в новом редакторе изображений, появилось новое поле: «СSS-класс изображения». Благодаря этой строке, мы можем задавать различные стили картинкам, в один клик.

redaktor

Поработать придётся один раз. Вставить в файл стилей нужные значения, а потом при добавлении картинки в статью, зайти в редактор, и указать тот стиль, который вы хотите задать данной картинке.

Важно! Указывать название стиля нужно без точки впереди! То есть, если в файле стилей указано — «.img_lev», то в редакторе пишем просто — «img_lev», без точки. Таким образом мы задаём картинке указанный стиль.

Для начала открываем файл стилей CSS — в административной панели «внешний вид» — «редактор». И вставляем туда такой код, задающий отступы текста от картинки:

.img_lev {
margin: 10px 30px 20px 0;
}
.img_prav {
margin: 10px 0 20px 30px;
}

Вот как это сделала я:

border_fail_css

 

Причём значения вы можете указать свои. И назвать эти стили по своему, только обязательно английскими буквами. Напимер «img_lev» — вы можете написать любое понятное для вас слово на английском языке. Я так написала, обозначив картинку расположенную слева. Соответственно «img_prav» — это картинка справа.

Таким же образом, можно оформлять картинки в рамки, для этого нужно вставить в стили код:

.ramka1{border: 5px double #0000FF;}
.ramka2{border: 3px; dashed #0000FF;}

ramka_dlja_kartinkiСловом «ramka», я обозначила что картинка будет в рамке. Ramka1 – Это рамка шириной в 5 пикселя, двойная линия, цвет синий. Ramka2 — это рамка шириной в 3 пикселя, пунктирная линия, цвет синий. Затем, при добавлении картинки, я нажала — «редактировать» (на карандаш), затем — «дополнительные настройки», и в строку «CSS-класс изображения» — написала для одной картинки — «ramka2«, (см. картинку слева) а для другой —  «ramka1«. На результат вы можете посмотреть выше. Картинки в рамках!

А данному изображению, я указала класс

«img_lev». В редакторе отступ был почему то невидим, но при просмотре публикации в отдельном окне, отступ есть! Правда не большой, но это легко регулируется. Достаточно один раз настроить всё как надо, и затем уже редактировать изображения в один клик.

Рамки можно сделать различные, достаточно только задать нужные параметры. Можно добавить несколько записей с разными названиями и параметрами. С помощью таких значений вы можете настроить любую рамку:

  • dotted — рамка точками 
  • groove — врезанная рамка
  • ridge — вырезанная рамка
  • inset — вдавленная рамка
  • outset — выпуклая рамка
  • dashed — пунктирная линия
  • double — двойная линия
  • solid — сплошная линия

Легко меняется цвет, на нужный. Для этого наберите в поиске «узнать код цвета», и вам откроются страницы, на которых можно найти нужный цвет, и скопировать его код. Я узнаю HTML код нужного цвета на этой странице — http://www.stm.dp.ua/web-design/color-html.php

Затем вставляете скопированный код, вместо указанного, и получаете нужную рамку! А изменить ширину рамки можно увеличив размер в пикселях.

То есть в файл стилей вы вставляйте не тот код, что я указала, а свой, отредактированный, который нужен вам!

Таким образом, при помощи такого метода, можно сделать все изображения на сайте в одном стиле.

Теперь вы сможете самостоятельно сделать отступы для картинок, установить рамку, оформить изображение в нужном стиле.

PS. Купила два курса по заработку, в следующей статье сделаю обзор данных курсов. Прошу вас, не покупайте курс по заработку на Qivi кошельке. Дождитесь моего отчёта.

С уважением, Ирина Баталова.

Ссылка на основную публикацию