Привет друзья. Каждый из нас понимает, что красиво оформленный тест на странице вашего блога или сайта – это 50 % гарантии того, что пользователь задержится на этой странице.
Способов красиво оформить текст на web-странице предостаточно, главное не переборщить с этим делом, иначе текст будет просто нечитаемый. Вы, наверное, не раз встречали сайты и блоги, которые пестрят всеми цветами радуги. Это не есть хорошо. Глядя на такие страницы, глазу не за что зацепиться, и вместо задачи блога – удержать пользователя, получается обратный эффект.
Такие страницы создают нагрузку на наше зрение, и мы подсознательно осознавая это, в спешке покидаем такие веб-страницы.
В этой статье я расскажу вам, как красиво выделить отдельный кусок текста на странице блога. Обычно, таким образом, выделяют важную информацию или предупреждение. Опишу несколько способов, а конкретно – красивое выделение текcта с помощью HTML, CSS и плагинов. А вы уж выберете, какой способ подойдет лучше вам.
Красивое выделение текста с помощью HTML.
С помощью HTML можно заключить какой-то кусок теста в блок, задать ему фон и рамки определенного цвета.
Плюсы такого способа выделения текста – его простота. Минусом же является необходимость постоянного вставления необходимого кода в текст web-страницы.
Вот пример выделения текста таким способом:
Ничего сложного в этом нет, справиться даже новичок
А вот сам код, при помощи которого я выделил текст таким образом:
1 |
<div style="height: 70px; width: 600px; margin: auto; background-color: #c7fcec; border-left: 4px solid #ff0026;" align="center">Это красиво оформленный текст. Оформить текст таким образом можно при помощи HTML. Ничего сложного в этом нет, справиться даже новичок :)</div> |
При желании можно отредактировать код под себя, вот вам подсказка как это сделать:
height:120px – высота блока; width:500px – ширина блока; background-color:#c7fcec – цвет фона; border-left – местоположение рамки, в моем случае – слева; 4px solid #ff0026 – ширина рамки и ее цвет;
Даже если вы незнакомы с HTML вы справитесь с этой задачей, просто поэкспериментируйте с цветами и размерами.
Красивое выделение текста с помощью CSS.
Это тот способ, которым пользуюсь я и советую вам. CSS предоставляет массу возможностей. К тому же все профессионалы выделяют текст при помощи CSS. В отличие от предыдущего способа, здесь вам не нужно постоянно вставлять кусок кода в тест. Достаточно лишь один раз создать стиль CSS, а в тексте нужно будет просто указывать отношение текста к этому стилю. Вот пример текста с таким выделением:
Вот еще один подобный вариант:
Чтобы выделить красиво текст таким образом, вам нужно: 1) Найти подходящую картинку, желательно в формате png размером 40 X 40 пикселей и загрузить ее на хостинг. Я загрузил картинку в библиотеку изображений напрямую через браузер. 2) Скопировать вот этот CSS-код и вставить его себе в файл style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.info{ margin: 10px; padding: 15px 17px 15px 80px; border: 1px solid #026194; border-radius: 10px; — moz-border-radius: 10px; — webkit-border-radius: 10px; box-shadow: 2px 2px 3px #bbb; — moz-box-shadow: 2px 2px 3px #bbb; — webkit-box-shadow: 2px 2px 3px #bbb; background: #fff url (/wp-content/uploads/2014/06/info.png) 15px 50% no-repeat; text-align:justify; color: #000; } |
3) Отредактировать код под себя. Вот подсказка за что отвечает каждый кусок кода:
margin: 10px; — отступ рамки от внешних элементов;
padding: 15px 17px 15px 80px; — отступ вложенного текста от рамки;
border: 1px solid #1e8fce; — толщина, формат и цвет рамки;
border-radius: 10px; — радиус скругления углов рамки для IE9 и Opera;
-moz-border-radius: 10px; — радиус скругления углов рамки для Firefox;
-webkit-border-radius: 10px; — радиус скругления углов рамки для Safari и Chrome;
box-shadow: 2px 2px 3px #bbb; — смещение, толщина и цвет тени рамки для Opera;
-moz-box-shadow: 2px 2px 3px #bbb; — смещение, толщина и цвет тени рамки для Firefox;
-webkit-box-shadow: 2px 2px 3px #bbb; — смещение, толщина и цвет тени рамки для Safari и Chrome;
background: #fff url (/info.png) 15px 50% no-repeat; — цвет фона, ссылка на фоновое изображение и указание его местоположения;
text-align:justify; — выравнивание текста;
color: #000 — цвет текста;
4) Вставляем текст и проверяем. Перед и после текста вставляем теги <div class="info"></div>
Вот пример:
<div class="info"> Это красиво оформленный текст. Оформить текст таким образом можно при помощи CSS.
Ничего сложного в этом нет, справиться даже новичок
</div>
Если вам потребуется несколько вариантов красивого выделения текста, создайте несколько стилей с разными картинками. Например, стили info (для выделения информативного текста), attention (важная информация) и т. п.
Вот у меня 2 стиля CSS для выделения текста, где все идентично, кроме картинки.
Думаю, что объяснил просто и доступно, если же все-таки что-то непонятно по красивому выделению текста с помощью CSS, задавайте вопросы в комментариях.
Красивое выделение текста с помощью плагинов.
Этот способ красивого выделения текста на блоге WordPress тоже очень прост, что является его преимуществом. Но я бы не рекомендовал выделять текст при помощи плагина. Причина банальна – еще один плагин, который будет тормозить загрузку вашего блога.
Если же вы все-таки решили красиво выделять текст с помощью плагина, тогда вперед.
Плагин называется wp-note. Скачать его можно на официальном сайте WordPress. Скачав и установив его на движок WordPress, сразу можно приступать к выделению текста, так как настроек у этого плагина нет.
Вам нужно лишь заключить текст в соответствующие теги. Всего доступно пять вариантов, для каждого варианта свои теги.
Вот примеры выделения текста с помощью этого плагина:
А вот эти теги нужно вставлять в текст:
[note]Это красиво оформленный текст. Так при помощи плагина можно выделить заметку.[/note]
[help]Это красиво оформленный текст. Так при помощи плагина можно выделить какое-либо пособие.[/help]
[tip]Это красиво оформленный текст. Так при помощи плагина можно выделить важную информацию.[/tip]
[warning]Это красиво оформленный текст. Так при помощи плагина можно выделить предупреждение.[/warning]
[important]Это красиво оформленный текст. Так при помощи плагина можно выделить текст, который необходимо запомнить.[/important]
При необходимости, можно изменить картинки, которые отображаются слева от выделяемого текста. Для этого замените картинки на свои, не меняя их названия. Они должны находиться в корне вашего блога.
Еще раз повторюсь, лучше выделяйте текст при помощи CSS. Именно CSS дает преимущество уникальности. Благодаря CSS можно сделать любой блок, которого вы не встретите ни на одном блоге.
Кроме этих способов, текст можно украсить красивым спойлером. О том, как сделать красивый спойлер для блога на WordPress я писал здесь.
А вы выделяете текст, и каким образом?
Отлично! Давненько хотел прочитать подобную статью) Теперь знаю как менять цвет текста в статье, добавлять раимки и т.д. Спасибо)
Пожалуйста, Дим
Андрей, я вставила свою картинку, прописала путь, но картинка не высвечивается, и фон тоже не меняется, я код цвета поставила синий, а он так и остался белым(
Диана, странно, сейчас повторно проверил код, все работает.
Я код вставила в самом низу файла style.css, может его надо до какого-то тега вставлять? Не работает у меня, все красиво, даже фон уже в принципе не важен, белый самый оптимальный, но вот картинка почему не ставится не понимаю.(
Диана, возможно тебе придеться отредактировать немного файл style.css
Можешь написать на почту какая у тебя тема оформления блога, я отредактирую код и вышлю на e-mail.
Ок, только у меня не бесплатный шаблон. А что там и как в этом стайле, не понимаю совсем.(
Думала что-нибудь другое поищу, оформление имею ввиду, а ничего не нравится больше, этот вид оформления для меня самый аккуратненький.)
Андрей, спасибо за обзор прям выбирай что хочешь, обязательно воспользуюсь твоей статьей. Плагин не буду устанавливать, а вот два других попробую обязательно.
Пожалуйста. Татьяна, воспользуйся лучше CSS. Я сам только попробовал этот способ неделю назад, и понял, что без CSS красивый блог не сделать
Андрей, я как-то боюсь лезть в коды, пользуюсь плагином wp-note. А так пост был очень полезный.
Каждому свое Просто wp-note это стандартный вариант, который есть на много блогах, а с помощью CSS можно сделать что-то свое уникальное.
Ура, у меня получилось, спасибо еще раз.
Всегда пожалуйста!
Самый оптимальный вариант — CSS. Хорошая статья для эстетов
Нет, как раз на счет оптимательности лучше плагин, не нужно ковырять код и все такое.
Для новичка конечно удобнее плагин, но с помощью CSS можно делать такие вещи, что можно позавидовать.
Я тоже только начинаю осваивать CSS
К тому же я вроде все доступно описал. Вот у Татьяны сразу получилось, вчера зашел на ее блог, текст в рамке выглядет даже лучше чем у меня
Андрей, ну прям расхвалил
Действительно, спасибо за информацию. Хоть я и пользуюсь двумя плагинами для оформления текста, но мне понравилось через HTML , надо попробовать.
Андрей, вот как раз новичкам лезть в CSS не нужно, ну эт мое мнение.
Юр, я же не советую изменять код. Просто код, который предоставляю я, нужно вставить в самый низ файла style.css Это никак не повлияет на работу блога. Я сам не очень лажу с CSS, но попробовав один раз, понял какие огромные возможности он дает
Андрей, вставила код в самый низ файла, редактирую в теле статьи в HTML, но ничего не выходит, увы...
Лариса, я не понял, у вас не получается красиво оформить текст при помощи CSS или HTML?
Классная штука, спасибо Андрей)
Интересно пишете, жизненно. Но, для того, чтобы делать по-настоящему популярный блог, нужно не только сообщать о чем-то, но и делать это в интересной форме:)
Иногда хочется в тексте выделить что-нибудь важное или подчеркнуть текст. Я тоже раньше не знала, как можно это сделать. Потом нашла информацию о плагине WP-note. Выделяю им. А у вас, Андрей, много способов описано. Спасибо. Если будет надо что-то выделить по-другому, буду знать, где искать информацию.
Плагин, это конечно хорошо и удобно. Но в этом случае при загрузке блога, браузеру придется обрабатывать скрипт + CSS плагина. А если вы сами пропишите CSS в коде шаблона, то нагрузка на блог значительно снижается.
Да, но как в качестве фона записи или страницы использовать картинку, а не однотонный фон?
Женя, точно так же. В файле style.css в качестве фона нужно прописать ссылку на изображение.
С вордпрессом такие штуки проходят очень туго. Это приходится очень много ковырять потом код в самой записи.
редактор вордпресса коверкает код. я даже не знаю как назвать то что он делает. В итоге поместить текст в картинку не так просто как вы пишите.
Куда как проще в таблице задать фоновый рисунок. По верх которого и писать текст
Можно и так.
Андрей, вопрос. Вот у тебя в статье образец выделения плагина WP-Note это выделение ты делал плагином или нет. Если плагином, то где он.удален?
Да, делал плагином, заскриншотил и удалил его. Сейчас выделяю текст в CSS
Понятно. Теперь попробую разобраться со стилями, может что то и получится. Хотя надежды маловато. Но попробовать стоит.
Там все просто
И это я тоже люблю) Андрей, ты мастер прям)) Вроде все так и просто ведь) Я для себя выбрала вариант «Красивое выделение текста с помощью CSS.» Думаю, самое простое, без нагрузок и красиво, еще и картинку сама любую могу подставить))
А можно создать 2 таких стиля, и просто потом выбирать тот или другой?)
Да, конечно, сколько угодно стилей
Андрей, просто выручил этой статьей. Совсем не представлял как делать рамки. Первый вариант мне очень подходит, Минималистично и очень красиво. Все сделал по инструкции но, когда равняю текст по левому краю он вплотную прилипает к рамке.
Как текст отодвинуть от рамки правее? к примеру где пишешь подсказки у тебя нормально все...не прилипает...
В подсказках текст в блоке CSS. Этот способ намного лучше. Способ, описанный с использованием HTML не на каждом шаблоне WordPress подойдет. Могут краказябры повылазить
Попробуй CSS, не пожалеешь!