Как изменить ссылку — 8 способов изменить дизайн ссылок, чтобы выделить их
Когда дело доходит до ссылок, их легче принять такими, как они есть. В конце концов, вы просто ссылаетесь на какой-нибудь текст и все. Но что можно реально сделать, чтобы заставить людей кликнуть по ним? Может подчеркивание текста CSS?
Есть куча маркетинговых методов, которыми можно воспользоваться, чтобы заполучить эти клики. Но что, если нужно просто привлечь больше внимания к ссылке?
Большая проблема, которую я вижу на многих блогах — ссылки не выглядят как ссылки. Читатель узнает о них только при наведении на них курсора. Это неприемлемо.
Выделите свои ссылки! В этой статье я расскажу о 8 эффективных способах изменения стиля ссылок.
Добавьте цвет
Один из лучших способов выделить ссылку состоит в том, чтобы добавить цвет! Когда большая часть текста черного цвета, добавьте другие цвета, чтобы сделать ссылки заметнее.
Но вы должны быть уверены, что выбранный цвет взаимодействует с остальной частью вашего бренда. Иначе ссылки будут выделяться, но неправильно.
Также помните о контрасте. Темный, почти черный цвет не обеспечит отличия ссылки от остального абзаца. А слишком светлый не даст достаточного контраста между белым фоном и текстом.
Мэрайя c Femtrepreneur использует интересный красный цвет, чтобы выделить свои ссылки:
Чтобы изменить цвет ссылок на сайте, взгляните на таблицу стилей темы и найдите следующее:
Измените значение рядом с color . Это оно!
Небольшой совет — если вы поменяете значение цвета, и ничего не изменится, вполне вероятно, что ссылки в ваших постах контролируются другим элементом. Прокрутите таблицу стилей и найдите строку .content a или .entry a . Вот где нужно изменить значение цвета.
Нужна помощь в выборе цвета? Воспользуйтесь одним из популярных инструментов:
Сделайте жирнее
Еще один способ добавить контраста ссылкам состоит в том, чтобы сделать их полужирными. Выделение ссылки полужирным работает таким же образом.
Чтобы сделать CSS подчеркивание ссылки полужирным, добавьте следующий код:
Или используйте шрифт, который поддерживает различные значения насыщенности ( толщины ):
Например, шрифт Open Sans имеет толщину 300 , 400 , 600 , 700 и 800 . Если толщина текста 400 , то хорошим выбором для ссылок будет использование толщины 600 , 700 или 800 .
Добавьте подчеркивание
По умолчанию все ссылки оформлены подчеркиванием, а это означает, что если бы вы удалили CSS с сайта, каждая ссылка содержала бы подчеркивание. Это довольно распространенное предположение, что любой подчеркнутый текст является ссылкой. Так какой способ лучше использовать для выделения ссылок?
Чтобы осуществить подчеркивание ссылки CSS , используйте этот код:
Более нетрадиционный способ добавить подчеркивание ссылке — установить нижнюю границу. Этот метод дает больше гибкости, когда речь заходит о том, как отображается подчеркивание.
В блоге KORY автор использует нижнюю границу для ссылок. Обратили внимание на большой разрыв между текстом и подчеркиванием? Это можно реализовать с помощью изменения внутреннего отступа ссылки:
Код для добавления границы ссылкам:
Небольшой совет : Не обязательно придерживаться сплошной границы. Можно попробовать один из приведенных ниже вариантов:
- CSS подчеркивание пунктиром ( dotted );
- Точечный ( dashed );
- Двойной ( double ).
Стиль курсивом
Выделить ссылки курсивом довольно просто, но об этом способе стилизации часто забывают. На приведенном ниже скриншоте страницы они выделяются, но при этом органично вписываются в дизайн сайта:
Вот как можно добиться этого:
Сделайте все буквы заглавными
Если вы посмотрите на посты в этом блоге , то заметите, что ссылки оформлены таким образом. Вот как можно оформить ссылки заглавными буквами:
Используйте другой шрифт
Еще один способ выделить ссылки — использовать другой шрифт. Этот метод может внести беспорядок, если он неправильно использован. Так что следуйте следующим советам.
Выберите шрифт, который легко читается. Шрифт, используемый в теге body , скорее всего, меньше. Необычные шрифты при таком небольшом размере не будут легко читаться. Поэтому используйте шрифты семейства serif или sans-serif для достижения лучшей читабельности.
Для обеспечения максимальной слаженности выберите шрифт из того же семейства. В сжатом или черном варианте шрифт будет выделяться, но не слишком отличаться.
Для своих ссылок я выбрала шрифт, который достаточно похож, чтобы не бросаться в глаза, но отличается от остального текста. Так я получила контраст, который хотела.
Добавьте фоновый цвет
Один из моих любимых способов выделить ссылку ( после подчеркивания точками CSS ) — добавить фоновый цвет. Посмотрите на следующий пример:
Вы ни в коем случае это не пропустите.
Все, что нужно сделать, это добавить цвет фона и, возможно, небольшой внутренний отступ. Также можно изменить цвет шрифта для лучшей читаемости:
Комбинируйте!
Для достижения максимальных результатов скомбинируйте любые два ( или больше ) из перечисленных выше методов выделения. Вы, наверное, заметили, что в большинстве приведенных примеров ссылки были цветными. Это связано с тем, что цвет играет действительно большую роль в выделении ссылок по сравнению с окружающим текстом.
ВЛ Виктория Лебедева автор-переводчик статьи «
Как легко изменить поменять значение одной ссылки в html документе
На моем сайте есть реферальная ссылка, используемая в нескольких местах. Иногда возникает необходимость поменять url этой ссылки на всем сайте сразу. Есть ли способ создать что-то вроде переменной с url ссылки в одном месте и потом в остальных местах сайта просто ссылаться на эту переменную?
Отслеживать
задан 20 апр 2015 в 22:07
Mikhail Trunov Mikhail Trunov
11 1 1 бронзовый знак
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Зависит от того, должна ли эта ссылка индексироваться. Если да, то вариант с переменной в JS не подходит. Лучше всего делать это в back end коде (C#, php и др.) вставляя переменную со ссылкой в нужное место сайта.
Отслеживать
ответ дан 21 апр 2015 в 6:55
1,861 1 1 золотой знак 14 14 серебряных знаков 25 25 бронзовых знаков
Если у Вас используется шаблонизатор, то достаточно определить переменную и периодически менять её значение при передаче в шаблонизатор. Но это грязный путь, я бы сделал отдельный модуль по генерации реферральных ссылок, чтобы все изменения происходили централизованно.
Или же можно при загрузке страницы запускать JavaScript, который будет ходить на сервер через AJAX, брать актуальную ссылку и проставлять её где нужно. Вам же не обязательно чтобы эта ссылка индексировалась посковиками.
Как создать и изменить ссылку
Создание и продвижение сайта без ссылок практически невозможно. Поэтому сегодня статья о ссылках: о том, как их создать, как добавить в текст и как изменить внешний вид ссылки.
Как добавить ссылку на сайт
Самый простой способ добавить ссылку в текст — с помощью визуального редактора. Он позволяет создать ссылку без знаний html.
В WordPress редактор записей содержит две вкладки: визуально и текст. В первой для создания ссылки достаточно нажать кнопку «Вставить/изменить ссылку» и задать адрес нужной веб-страницы. Во вкладке Текст можно создать или отредактировать ссылку с помощью html и css.
Визуальный редактор WordPress выглядит так:
Чтобы создать ссылку, выделите нужный участок текста и нажмите значок Вставить/изменить ссылку. Появится вот такое окно:
В поле URL введите адрес веб-страницы, которая будет открываться при клике на ссылку или выберите из списка страниц сайта.
Если нужно, чтобы веб-страница открывалась в новом окне браузера, поставьте галочку напротив соответствующего пункта.
В конце нажмите кнопку Добавить ссылку.
Не всегда можно воспользоваться визуальным редактором. Кроме того, не во всех редакторах есть значок вставки ссылок. Поэтому полезно знать как можно самому создать ссылку.
Как создать HTML ссылку
Вот как выглядит простейшая html ссылка:
текст ссылки
А вот как эту ссылку видит посетитель сайта — текст ссылки. Щелчок по ней откроет главную страницу этого сайта.
Для создания ссылки нужен парный тег а — открывающий и закрывающий
Между открывающим тегом и закрывающим тегом обязательно должен быть текст — это единственная видимая пользователю часть ссылки. Вместо текста можно использовать любой символ или изображение.
Где открывается ссылка
По умолчанию веб-страница, указанная в ссылке открывается в том же окне и заменяет открытую страницу. Чтобы ссылка открылась в новом окне нужно использовать атрибут target со значением _blank, который размещается внутри открывающего тега .
target= «_blank» href= «https://tavry.ru»>текст ссылки
Как изменить цвет ссылки
Цвет ссылок сайта задается в файле style.css. Обычно он более яркий — для того, чтобы пользователь понимал, что перед ним именно ссылка, а не обычный текст. Особым цветом можно выделить также ссылку, которую пользователь уже посетил (a:visited) или на которую навел указатель (a:hover).
Сделаем все ссылки на сайте оранжевого цвета, для этого добавим в файл style.css такое правило:
a color: #D47424;
>
Это правило сделает цвет ссылки, на которую навели указатель красным:
a:hover color: #f00;
>
Сделаем ссылку, которую пользователь уже посетил серого цвета:
a:visited color: #c0c0c0;
>
Предположим, нужно сделать так, чтобы какая-то одна ссылка в тексте была другого цвета. Чтобы изменить цвет одной конкретной ссылки нужно внести изменение в ее код — добавить в открывающий тег атрибут style и задать для него нужный цвет, например, голубой «color:#0ff» или черный «color:#000»
style= «color: #000»
В итоге получим следующий код:
Еще по теме:
- Как изменить тему WordPress
- Как найти и установить бесплатную тему WordPress
- Как сделать сайт быстро и просто
- Как разрешить или запретить комментарии на сайте WordPress
Как сделать ссылку на верх веб-страницы?
Ссылка «наверх» позволяет быстро перейти к верхней части веб-страницы, где обычно располагается логотип, навигация по сайту и другие типовые элементы сайта.
Для создания такой ссылки, в её адресе достаточно указать #top (пример 1). Все современные браузеры понимают такой адрес и при щелчке по этой ссылке переходят к верхней части текущей веб-страницы.
Пример 1. Ссылка на верх
Здесь элемент используется для искусственного создания длинной веб-страницы, чтобы стал заметен переход от нижней к верхней части документа. Заметьте также, что какая-либо дополнительная разметка не требуется.
Если необходимо сделать переход к определённому месту, то его сперва следует обозначить с помощью атрибута id, задав ему уникальное имя:
После этого в ссылке мы можем указать это имя следующим образом:
Вместо ссылки можно использовать кнопку, а переход по ссылке реализовать через JavaScript. Для этого к добавляем событие onclick, внутри которого пишем window.location.href со значением #top (пример 2).
Пример 2. Кнопка на верх
При написании значения onclick обратите внимание на комбинацию двойных и одинарных кавычек. Если кнопка не работает должным образом, кавычки надо проверить в первую очередь.
См. также
- text-decoration-skip-ink
- Атрибуты
- Атрибуты ссылок
- Использование :hover
- Кнопки
- Кнопки
- Кнопки в Bootstrap 4
- Наследование в CSS
- Событие onclick
- Создание кнопок
- Создание ссылок
- Ссылки
- Ссылки
- Ссылки в HTML
- Якоря