Оформление текста

Оформление текста
Автор блога
Андрей WPM

Андрей WPM

Красивое оформление текста на блоге

Всем читателям, салют! Сегодня решил уделить время визуальной части блога. Так как считаю, что визуальная составляющая играет не последнюю роль в улучшении поведенческих факторов. Думаю каждый со мной согласиться, что чем гармоничнее выглядит сайт, тем больше на нем хочется задержаться. Грамотное оформление текста заставляет человека зацепляться взглядом за необычные элементы, тем самым, удерживает большинство посетителей.

Итак, что мы сегодня затронем:

  1. Оформим блок цитаты по своему вкусу.
  2. Заменим цвет ссылок на всем сразу сайте или отдельных частях.
  3. Изменим стилистику списков.
  4. Установим нужный цвет для выделения текста.
  5. Настроим правильный размер шрифта для статей.

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

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

 

Оформляем блок цитаты на сайте.

В редакторе 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 ></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. После этого, вы увидите консоль разработчика такого плана:

Консоль разработчика
Консоль разработчика в браузере Opera | Chrome

Обратите внимание на два выделенных пункта справа. Обычно, если нет в шаблоне тега <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;
} // Подключение иконки к маркированному списку.

Вот так будет выглядеть маркированный список:

  • Пункт первый
  • Часть вторая
  • Список третий

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

  1. Пункт первый
  2. Часть вторая
  3. Список третий

Тут, так же как и в случае с блоком цитаты. Поиграйтесь с цветами и размерами шрифтов и подстройте стиль под свой сайт. Думаю, проблем у вас не возникнет.

 

Устанавливаем цвет фона при выделении текста.

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

В данном случае, мы будем обращаться не к тегам, а к специальному селектору. Он называется 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; /* Цвет фона */
}

Обратите внимание! Выделение ссылок у меня происходит другим цветом. Делается это для того, чтобы читатель при выделении, мог отличить, где простой текст, а где ссылка. Это не обязательное условие, но мне показалось это логичным.

Для чего это делается? Многим посетителям, удобнее читать белые буквы на темном фоне, нежели на оборот. Поэтому они выделяют текст который читают. Думаю эта фишка по-любому запомниться вашему посетителю.

 

Настраиваем шрифт в статьях.

Если у вас блог, значит вы обязаны обратить особое внимание на размер шрифта, высоту строк и пунктуацию в статьях. Легко читаемый и грамотно оформленный текст, будет восприниматься читателями в десятки раз лучше. Это элементарный закон. Поэтому, уделите этому достаточное количество времени и настройте строки на сайте как положено.

 

Рекомендуемый размер шрифта для блога/новостника.

Бытует вне гласное мнение, что шрифт в статьях на блоге, должен быть не меньше 16 пикселей. Я согласен с этим мнением и советую вам не пренебрегать им. Посетителю будет удобнее читать текст, если ему не придется прищуриваться. А если у него плохое зрение? Правильно, он уйдет с вашего блога не задумываясь. Поэтому установим нормальный размер шрифта и не дадим повода не очень зрячим, убежать с вашего сайта.

Чтобы изменить размер шрифта (подробнее на  htmlbook) в статьях, нам снова придется воспользоваться общим дивом, а точнее его классом entry-content. Цепляемся к нему и устанавливаем стиль тексту. Текст у нас выводится с помощью тега <p> (этот тег устанавливается по умолчанию самим WordPress'ом). Значит, открываем наш файл style.css и в конце прописываем этот код:

.entry-content p{
	font-size:1.3em; // Так же можно установить в px, pt и %
	text-align:justify; // Здесь я выравниваю текст по краям (не обязательно)	
}

По поводу выравнивания текста по краям скажу следующее: Мне не очень нравиться, когда текст обрывается на пол страницы и начинается со следующей строчки. Это лично мой бзик и никто особо на это не обращает внимания. Попробуйте, посмотрите как будет выглядеть и если будет норм, оставите. Но лично для меня, такое оформление текста выглядит более эстетично.

 

Удобный межстрочный интервал для контентников.

Второй, немаловажный параметр для контентных сайтов это – межстрочный интервал. То есть, это расстояние от одной строки текста, до другой. В идеале, нужно добиться такого интервала, чтобы можно было легко глазами найти нужное слово или фразу в абзаце. По умолчанию в WordPress очень маленькое расстояние, поэтому не всегда удобно порой, читать такие блоги. Наверняка некоторые из вас это уже где-то замечали. Текст в какой-то момент начинает сливаться в общую массу, а если ещё и шрифт маленький, то это вообще караул.

Для того чтобы увеличить размер межстрочного интервала, нужно прописать следующие стили в том же файле style.css и немного подогнать под свой сайт.

.entry-content p{
	line-height: 180%;
}

Советую устанавливать это значение в процентах. Это нужно для того, чтобы интервал вместе с текстом масштабировался для мобильных устройств без лишних вопросов. В таком случае у вас не получатся слишком большие отступы, которые своим видом будут разбивать абзацы на отдельные строки (это очень не красиво, я и такое видел).

 

Короткое, среднее и длинное тире в тексте.

Я сам недавно задался этим вопросом и понял, что у меня на сайте были использованы тире не правильно. Правильная пунктуация в тексте, повышает доверие пользователей (да и честно говоря, читать такой текст гораздо проще). И если запятые, точки и базовые знаки припинания зависят от самого автора, то вот проставить правильные тире можно и в автоматическом режиме.

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

  1. Короткое тире – Обычно используется в перечислении диапазона цифр ( 0-9 ) и в неразделяемых словах ( где-то, тёмно-синий и т.д. ).
  2. Среднее тире – Используется в определении чего-либо ( Тире – это ... ) либо в перечислении в столбик ( вместо списка ).
  3. Длинное тире – Чаще всего используется для выделения прямой речи в тексте ( Думаю, я доходчиво объяснил — сказал Андрей. ).

Для того чтобы тире расставлялись автоматически в правильном порядке, можете воспользоваться следующим кодом который нужно вставить в файл functions.php вашей темы:

// Заменяем -- на длинное тире —
add_filter( 'the_content', 'wpm_tire' );
function wpm_tire( $content ) {
	$content = str_replace( "--", "—", $content );
	$content = str_replace( " - ", " – ", $content );
	return $content;
}

Просто копируйте ничего не меняя и всё начнет работать автоматически. Этот код я писал для своего блога, поэтому мне кажется, это самый удобный вариант быстрого форматирования. А теперь объясню как это будет работать.

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

Вторая строчка заменяет тире у которого по бокам есть пробелы – на среднее тире с пробелами по бокам. Так как на клавиатуре присутствует только короткое тире, придется проставлять среднее только в автоматическом режиме. Так на много проще, нежели писать на клавиатуре код ALT+0150 чтобы получить среднее тире или ALT+0151 для длинного.

А короткое тире останеться по умолчанию, когда перед ним и после него не будет пробелов. То есть, как раз перечисление вида 20-19 будет выводиться как положено с коротким тире. Для наглядности, покажу как это будет выглядеть:

  • Короткое тире -.
  • Среднее тире – .
  • Длинное тире — .

На этом у меня всё. Надеюсь, 2 дня потраченные на эту статью, не пропали зря и вам она помогла. Если это так, то черканите пару слов в комментариях об этом, мне будет приятно. Всем спасибо за внимание, до встречи на страницах этого блога.

Андрей WPM
Опубликовал - Андрей WPM

Друзья, блогу нужна ваша поддержка. Если вам понравилась статья или она вам помогла решить задачу, поделитесь ею в одной из соцсетей. Этим вы поможете дальнейшему развитию. Всем активистам - спасибо!


CTRL+D

Бонус для читателей WPMaster.kz. Предлагаю познакомиться с новым разделом на блоге - Промокоды. Только самые лучшие и нужные промокоды для покупок плагинов, тем, обучения, сервисов и т.д.



11
Вопросы не по теме статьи, задавайте в разделе "Флудилка".

avatar
1000
  Подписаться  
новее старее
Уведомление о
Жэка SS
6 комм.
Жэка SS

Ты прям мысли мои читаешь Андрей. Только пришла мысль поколдовать со списками, а тут смотрю письмо на почте. Кароче вовремя ты. Отдельное спасибо за сайт htmlbook очень полезный для меня ресурс оказался. Удачи твоему блогу искренне!

Иришка
4 комм.
Иришка

Классная статья. Только не увидела как список с цифрами можно стилизовать. Или их вообще нельзя по другому сделать? Я имею ввиду вот на списках с маркерами эти самые маркеры можно заменить на иконку, а цыфры можно как-то по другому сделать? Извините если тупой вопрос. Я пока что учусь.

Дина
1 комм.
Дина ( dinaizbastova.com )

Интересный у Вас блог! Много интересного и полезного узнала. Вот только в русском языке есть два вида черточек: короткая черточка (дефис) и длинная черточка (тире). Третьего не дано.