Красивое оформление текста на блоге
Всем читателям, салют! Сегодня решил уделить время визуальной части блога. Так как считаю, что визуальная составляющая играет не последнюю роль в улучшении поведенческих факторов. Думаю каждый со мной согласиться, что чем гармоничнее выглядит сайт, тем больше на нем хочется задержаться. Грамотное оформление текста заставляет человека зацепляться взглядом за необычные элементы, тем самым, удерживает большинство посетителей.
Итак, что мы сегодня затронем:
- Оформим блок цитаты по своему вкусу.
- Заменим цвет ссылок на всем сразу сайте или отдельных частях.
- Изменим стилистику списков.
- Установим нужный цвет для выделения текста.
- Настроим правильный размер шрифта для статей.
Оформляем блок цитаты на сайте.
В редакторе WordPress есть специальный блок, который позволяет выделить определенный отрывок текста который в точности повторяется на другом сайте. То есть, является цитатой. Это нужно в первую очередь для того, чтобы подсказать поисковым роботам, что данный отрывок принадлежит не вам, а написан кем то другим. И честно говоря, по умолчанию этот блок выглядит не очень то и привлекательно для читателей. Поэтому сейчас, будем это исправлять.
Для начала, нужно узнать, какой тег выводит данный блок на сайте. В 95% случаев это стандартный HTML тег <blockquote>. В очень редких случаях используются собственные блоки имитирующие данный блок, но это происходит настолько редко, что нет смысла описывать их стилистику.
Готовый код стилей для блока цитаты.
И так, обращаться мы будем напрямую к тегу <blockquote>. Для начала открываем файл style.css в своей теме (надеюсь, вы знаете где он находится) и прокручиваем в самый низ. В самом низу пишем примерно такой код:
blockquote{
font-size:.9em; // Устанавливаем размер шрифта
border-left:10px solid #EDFFA3; // Делаем полоску слева от текста
padding: 3em 0 0 5em; // Внутренний отступ текста от краев
margin:5% 0%; // Внешний отступ краев
border-top:2px solid #B5D043; // Верхняя линия над текстом
border-bottom:2px solid #B5D043; // Нижняя линия под текстом
}
Чтобы разобраться в написанном коде, нужно иметь хотя бы начальные знания в CSS. На всякий случай немного поясню. Любую строчку этого кода можно удалить или изменить, от этого поменяется стиль блока. Например сейчас установлен размер шрифта .9em (0.9). Попробуйте поменять эту цифру на .5em и вы увидите, что текст стал меньше. При увеличении цифры, например до 2em, текст станет в два раза больше стандартного текста на сайте. Тоже самое произойдет со всеми остальными данными. Поиграйтесь цифрами, подстройте под себя цвет и размер линий.
К примеру, вот так выглядит блок цитаты на этом сайте. Здесь задействованы стили которые я сам прописал плюс, подключенные сторонние иконки.
Чтобы сделать блок цитаты например как у меня, вам нужно будет сначала подключить бесплатные иконки для сайта, а уже потом воспользоваться вот этим кодом:
blockquote::before{
display: block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
blockquote{
position:relative;
font-size:.9em;
/* border-left:10px solid #EDFFA3; */
padding: 3em 0 0 5em;
margin:5% 0%;
border-top:2px solid #B5D043;
border-bottom:2px solid #B5D043;
}
blockquote::before{
position:absolute;
content:"\f10d";
font-size: 4em;
color:#EDFFA3;
top:0;
left:0em;
z-index:-100;
}
Чтобы подстроить всё под себя поиграйтесь самостоятельно с кодом и быстро разберетесь что за что отвечает. Измените что-то одно и обновите страницу, посмотрите что поменялось. Таким образом вы быстрее поймете что вам нужно оставить, а что нет, нежели если я буду расписывать каждую строчку кода.
Изменяем цвет ссылок на сайте.
Сначала хочу пояснить, зачем собственно, изменять цвет ссылок на сайте. За пример возьмем мой блог. У меня он придерживается нескольких ключевых цветов в стилистике, это зеленый, темно серый и стандартный белый. Так вот, если на сайте преобладает какой-то определенный цвет, то будет не особо красиво, если некоторые элементы не будут соответствовать общей стилистике. И ссылки это, первые элементы, которые выглядят практически всегда одинаково на любом сайте. Обычно ссылки имеют характерный синий цвет, что не всегда соответствует стилю сайта. Поэтому, предлагаю изменить цвет ссылок на всем сайте махом, за раз, с помощью каскадных стилей (CSS).
Изменяем цвет ссылок на всем сайте сразу.
Для изменения цвета ссылок на всем сайте сразу, нам нужно обратиться напрямую к тегу <a href=””></a> в файле style.css расположенный в корне вашей темы. Для этого открываем всё этот же файл (style.css) и в конце прописываем стили для ссылок на сайте, примерно таким образом:
a{
text-decoration:none;
color:#7CFC00;
}
a:hover{
text-decoration:none;
color:#32CD32;
}
Давайте поясню, что тут происходит. Мы обращаемся напрямую к тегу а, который выводит ссылки на абсолютно любом сайте.
На второй строчке мы отключаем подчеркивание ссылок на сайте. Дело в том, что многие сервисы seo проверок рекомендуют не подчеркивать ссылки, якобы, поисковики не очень хорошо относятся к подобному. Я спорить с этим не буду, в доказательство к этому, обратите внимание на любой seo-оптимизированный премиум шаблон, в них нет подчеркиваний ссылок ни в одном. Поэтому и мы избавимся от подчеркиваний, если вдруг ваш шаблон этого не делает.
Третья строчка отвечает за сам цвет ссылок. Не пугайтесь такого страшного определения цвета типа #32CD32. Это обычный код цветовой палитры в HEX кодировке. Чтобы вам выбрать подходящий цвет, воспользуйтесь одним из специальных сайтов, например colorscheme.ru или ему подобным. Перейдя по ссылке, вы увидите полную палитру цветов с их кодами. Выглядеть это будет следующим образом:
Вторая часть кода отвечает за стилистику ссылки при наведении на неё мышкой. Вы можете поменять цвет на кардинально отличающийся от первого или же оставить цвет таким же. Я же рекомендую изменять цвет на более темный или наоборот, на более светлый оттенок базового цвета. В моём понимании, это не сильно бросается в глаза и в тоже время четко разделяет цвета при наведении.
Изменяем цвет ссылок в определенном месте сайта.
Иногда бывают такие моменты, когда в шаблоне уже предусмотрены стили для ссылок. А вам хочется изменить цвет ссылок только в одном месте сайта, к примеру, только в статьях или только в сайтбарах. В этом случае, нам придется обращаться к другим элементам сайта и сейчас мы с вами научимся это делать.
К примеру, мы захотели изменить цвет ссылок только в статьях нашего блога. Первым делом, нам нужно найти, какой блок в статьях выводит посты на сайте и прицепиться к нему с помощью кода. Для этого открываем любую статью на блоге и делаем следующие действия:
Щёлкаем на первом абзаце статьи или на первом заголовке правой кнопкой и выбираем пункт “Посмотреть код элемента”. Или можно воспользоваться сочетанием горячих клавиш CTRL + SHIFT + C. После этого, вы увидите консоль разработчика такого плана:
Обратите внимание на два выделенных пункта справа. Обычно, если нет в шаблоне тега <article>, есть обычный общий <div> с классом, который выводит посты на сайте. Именно к ним мы и будем цепляться, чтобы изменить цвет ссылок. Самый простой способ, это найти первый открытый <div> с классом, в котором присутствует слова entry или content. Или оба эти слова как у меня entry-content. Это и будет общий класс, который выводит пост на странице. Запоминаем этот класс и отправляемся в наш любимый файл style.css в котором мы и пишем все стили. Обращаться к данному классу мы будем следующим образом:
.entry-content a{
color:#DC143C;
}
.entry-content a:hover{
color:#B22222;
}
Этим кодом мы обратились ко всем ссылкам, которые находятся внутри дива с классом entry-content и поменяли им цвет. Так же поменяли цвет при наведении, как и в первом нашем случае с ссылками по всему сайту.
Теперь все ссылки в статьях (только в статьях), будут определенным цветом. А на остальном сайте таким, каким вы установили его для всего сайта сразу. Точно таким же способом ищите класс нужного дива например для сайтбара и прописываете свои стили для него.
Изменяем стилистику списков.
Следующим шагом, я предлагаю изменить немного стилистику списков, чтобы они немного отличались от основного контента. Шаги будут в точности такие же, как и в предыдущих случаях – цепляемся к нужному тегу и меняем стиль. Всё предельно просто.
Списки на сайте выводятся двумя тегами <ul> и <ol>. Так выглядит стандартный код списков:
<ul>
<li>Элемент</li>
</ul> // Это список с маркерами слева (черные точки)
<ol>
<li>Элемент</li>
</ol> // Это список с цифрами слева (порядок)
Один важный момент! Хоть эти теги являются стандартными, обращаться к ним напрямую не советую (как например обращались с <blockquote>). Почему? Дело в том, что на сайте многие элементы выводятся с помощью списков. К ним относится меню сайта, в некоторых случаях слайдеры текста и прочие, о которых вы даже не подозреваете. Поэтому, нужно обращаться к ним так же, как обращались к ссылкам в статьях. Раз мы решили изменить представление списков в постах, значит и будем изменять стиль только в постах.
Чтобы зацепиться к спискам используем уже ранее найденный див, а точнее его класс. В моём случае это entry-content. В списках можно изменить не только цвет и шрифт текста. А также заменить маркеры (черные точки) на любую картинку или иконку. В нашем случае, будем заменять на иконку для списков с маркером и стилизовать список с цифрами. Общий код, выглядит следующим образом:
.entry-content ul>li::before{
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
} // Подключение иконок к маркированному списку.
.entry-content ul, .entry-content ol{
list-style:none;
font-size:1em;
text-align:justify;
padding: 1%;
} // Отключение стандартных стилей и присвоение своих.
.entry-content ol{
counter-reset: num;
}
.entry-content ol li::before {
content: counter(num);
counter-increment: num;
border: 2px solid #B1CE54;
border-radius:50px;
padding:1px 5px;
margin-right: 3px;
} // Подключаем собственный инкремент для увеличения цифры.
.entry-content ul li,.entry-content ol li{
margin-bottom:1%;
} // Общие отступы для обоих списков.
.entry-content ul>li::before{
content:"\f101";
margin-right:1%;
color:#C0D75F;
} // Подключение иконки к маркированному списку.
Вот так будет выглядеть маркированный список:
- Пункт первый
- Часть вторая
- Список третий
А вот так будет выглядеть обычный список с цифрами:
- Пункт первый
- Часть вторая
- Список третий
Тут, так же как и в случае с блоком цитаты. Поиграйтесь с цветами и размерами шрифтов и подстройте стиль под свой сайт. Думаю, проблем у вас не возникнет.
Устанавливаем цвет фона при выделении текста.
В моём понимании, красивое оформление текста это не только его цвет и шрифт, но и его фон при выделении. Поэтому следующим шагом, я рекомендую оформить этот фон под стилистику сайта. По умолчанию цвет выделения текста как и ссылки, делается в синем цвете. А значит, для хорошего впечатления, нам нужно и его изменить.
В данном случае, мы будем обращаться не к тегам, а к специальному селектору. Он называется selection. Этот селектор нужно добавить ко всем встречающимся элементам в постах. Делается это примерно так:
p::selection,
div::selection,
li::selection,
span::selection,
em::selection,
strong::selection,
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {
color: #fff; /* Цвет текста */
background: #AEC457; /* Цвет фона */
}
a::selection {
color: #fff; /* Цвет текста */
background: red; /* Цвет фона */
}
Обратите внимание! Выделение ссылок у меня происходит другим цветом. Делается это для того, чтобы читатель при выделении, мог отличить, где простой текст, а где ссылка. Это не обязательное условие, но мне показалось это логичным.
Для чего это делается? Многим посетителям, удобнее читать белые буквы на темном фоне, нежели на оборот. Поэтому они выделяют текст который читают. Думаю эта фишка по-любому запомниться вашему посетителю.
Настраиваем размер шрифта в статьях.
Ну и последняя на сегодня визуальная фишка. Если у вас блог, значит вы обязаны уделить особое внимание на размер шрифта в статьях. Бытует вне гласное мнение, что шрифт в статьях на блоге, должен быть не меньше 18 пикселей. Я согласен с этим мнением и советую вам не пренебрегать им. Посетителю будет удобнее читать текст, если ему не придется прищуриваться. А если у него плохое зрение? Правильно, он уйдет с вашего блога не задумываясь. Поэтому установим нормальный размер шрифта и на этом закончим оформление текста на сегодня.
Чтобы изменить размер шрифта (подробнее на htmlbook) в статьях, нам снова придется воспользоваться общим дивом, а точнее его классом entry-content. Цепляемся к нему и устанавливаем стиль тексту. Текст у нас выводится с помощью тега <p> (этот тег устанавливается по умолчанию самим WordPress’ом). Значит, открываем наш файл style.css и в конце прописываем этот код:
.entry-content p{
font-size:1.3em; // Так же можно установить в px, pt и %
text-align:justify; // Здесь я выравниваю текст по краям (не обязательно)
}
По поводу выравнивания текста по краям скажу следующее: Мне не очень нравиться, когда текст обрывается на пол страницы и начинается со следующей строчки. Это лично мой бзик и никто особо на это не обращает внимания. Попробуйте, посмотрите как будет выглядеть и если будет норм, оставите. Но лично для меня, такое оформление текста выглядит более эстетично.
На этом у меня всё. Надеюсь, 2 дня потраченные на эту статью, не пропали зря и вам она помогла. Если это так, то черканите пару слов в комментариях об этом, мне будет приятно. Всем спасибо за внимание, до встречи на страницах блога WPMaster.KZ, CHAO!
Источник: https://wpmaster.kz/oformlenie-teksta/