Недавно мне в комментариях задали вопрос, как сделать отступ текста от картинок в WordPress. Дело в том, что в новых версиях WordPress, исчезло поле для выставления отступов в ручную.
Текст прилипший к картинке, смотрится не эстетично, да и читается плохо. Что же делать, как исправить ситуацию?
Давайте рассмотрим, как выйти из этого положения, и установить необходимые отступы текста от картинки.
На самом деле способов довольно много, даже плагин специальный выпустили, называется Advanced Images Styles. Так что сторонники плагина могут скачать и установить данный плагин. О том, как устанавливать плагины я уже писала.
Как отлепить картинку от текста
Но мы же не станем грузить блог лишними плагинами, и применим достаточно простой и удобный способ.
Существует несколько атрибутов, для установления отступов текста от края картинки. Рассмотрим основные:
hspace=»10″- устанавливает отступы по вертикали (то есть с левой и правой стороны)
vspace=»10″- устанавливает отступы по горизонтали
При добавлении картинки, открыть редактор в режиме «Текст», и вставить в код нужный атрибут, указав необходимый отступ.
Вот такой код и картинка были до вставки:
<img class=» size-full wp-image-2078 alignleft» src=»адрес картинки» alt=»graniza» width=»250″ height=»349″ />
Такой код и картинка стали после вставки:
<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″ />
Красные рамочки я нарисовала, чтобы вы лучше увидели, насколько пикселей, и в каких местах получился отступ. Как видите, картинка сдвинулась от края на 20 пикселей, и текст отступил от границы картинки на 20 пикселей.
Значения можно указывать любые, но минус в том, что отступы назначаются со всех сторон. То есть, если вы укажете значение hspace=»30″, то не только текст отодвинется от картинки на 30 пикселей, но и картинка сдвинется от края текстового поля на 30 пикселей. А это также не красиво.
Есть более удобный способ регулировать отступы. И поможет нам в этом свойство margin — которое устанавливает расстояния от внешней границы картинки (и не только картинки).
При помощи свойства margin можно задать любые отступы. Причём они могут быть разные, для разных сторон, а могут быть одинаковые. Например:
margin: 10px;
При указании такого значения, вокруг картинки будет отступ в 10 пикселей со всех сторон. Возможно с помощью этого свойства, определить отступ только для конкретно указанных сторон, или задать различные по значению отступы для каждой стороны.
Для того, чтобы задать отступ для конкретной стороны, нужно вставить в код одно из значений:
- margin-top: 20px; — Отступ от верхней границы
- margin-left: 10px; — Отступ от левой границы
- margin-right: 20px; — Отступ от правой границы
- 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;
- Первое значение — отступ сверху (10рх)
- второе значение — отступ справа (30рх)
- третье значение отступ снизу (20рх)
- четвёртое значение — отступ слева (0).
Как вы заметили, начинается с верхней стороны, и идёт по часовой стрелке — правая сторона, низ, левая сторона.
А если мне нужно расположить картинку справа, с обтеканием текста с левой стороны, я укажу другие значения:
- margin: 10px 0 20px 30px;
Вы можете сказать, что это всё сложно и муторно, постоянно при размещении картинки, искать эти свойства, вставлять их в код! Могу вас обрадовать, можно всё значительно упростить, указать данные свойства один раз в файле CSS, а потом указывать нужный стиль при размещении картинки.
А как это всё применить на практике? Это всё не слишком сложно, и каждый из вас справится!
Может быть вы заметили, что в новом редакторе изображений, появилось новое поле: «СSS-класс изображения». Благодаря этой строке, мы можем задавать различные стили картинкам, в один клик.
Поработать придётся один раз. Вставить в файл стилей нужные значения, а потом при добавлении картинки в статью, зайти в редактор, и указать тот стиль, который вы хотите задать данной картинке.
Важно! Указывать название стиля нужно без точки впереди! То есть, если в файле стилей указано — «.img_lev», то в редакторе пишем просто — «img_lev», без точки. Таким образом мы задаём картинке указанный стиль.
Для начала открываем файл стилей CSS — в административной панели «внешний вид» — «редактор». И вставляем туда такой код, задающий отступы текста от картинки:
.img_lev {
margin: 10px 30px 20px 0;
}
.img_prav {
margin: 10px 0 20px 30px;
}
Вот как это сделала я:
Причём значения вы можете указать свои. И назвать эти стили по своему, только обязательно английскими буквами. Напимер «img_lev» — вы можете написать любое понятное для вас слово на английском языке. Я так написала, обозначив картинку расположенную слева. Соответственно «img_prav» — это картинка справа.
Таким же образом, можно оформлять картинки в рамки, для этого нужно вставить в стили код:
.ramka1{border: 5px double #0000FF;}
.ramka2{border: 3px; dashed #0000FF;}
Словом «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 кошельке. Дождитесь моего отчёта.
С уважением, Ирина Баталова.
Загрузка...