Сегодня мы с вами подробно рассмотрим способ смены цвета ссылок на сайте, а в финале дам ещё более симпатичное решения этого вопроса.
Сама задача замены оформления ссылок, как ведущих на собственные страницы, так и исходящих, весьма актуальна! И я на стороне тех людей, которые заботятся о естественной красоте своего детища-сайта и его удобстве для гостей-посетителей.
Меняем цвет ссылок на сайте и делаем их более красивыми и понятными
В самом деле: я всегда сомневаюсь в этическом благополучии людей-админов тех сайтов, на которых сплошняком обучающие МАНУЛЫ по заработку денег в сети. Но взглянув на их инструментарий продвижения, становится забавно: ну, если сам админ не могёт выправить свой бложок (блюдя приличие для посетителей сайта), то отчего бы ни заказать себе более-менее адекватную тему оформления…
Или финансовый воротила ещё не заработал!?
Ну, ладно..! …приступим к делу.
Тема: Меняем штатный цвет ссылок на сайте
Нам потребуется как минимум сайт. Ну и ваше решение, где и как вы будете выполнять редактирование кода. Можно использовать Нотепад++ или работать прямо в живую на хостинге.
Я буду править код в ONLINE.
Для начала предложу классический пример CSS, который вы сможете поменять на своё усмотрение… А сейчас просто копируйте у меня и прописывайте к себе в файл стилей style.css, куда-нить в самый его конец — основной ФАЙЛ СТИЛЕЙ находится в корневой папке вашей темы.
…поехали — сегодня мы рассмотрим пример ссылки «читать далее».
.readmore a {
padding: 10px;
margin-bottom: 15px;
float: right;
font-style: italic;
/*color: #000;*/
}
Поясню:
1 строка: уникальный id класс. Задавая который, можно поменять цвет любой ссылки, как на страницах сайта так и в сайдбаре, например. Стоит обратить внимание: видите буковку «а» — это определение, которое обращается непосредственно к ссылке этого id класса.
2 и 3 : отступы (расположение ссылки относительно соседних элементов сайта)
4: расположение ссылки на листе сайта – лево/право…
5: стиль текста ссылки (здесь свойство italic – курсив)
6: ну и наша сегодняшняя цель – ЦВЕТ ссылки. У меня этот элемент закомментирован. То есть при этом цвет нужной нам ссылки останется цветом /по умолчанию/ темы. И как понимаете, если его «открыть», цвет изменится на нужный нам.
Итак: если вам всего-то нужно поменять цвет всех ссылок вашего блога, то это запросто.
Наводите курсор на ссылку; щёлкаете правой клавишей… в выпадающим подменю кликаете «просмотреть код элемента». Это штатное средство любого браузера: но есть и неплохое расширение Фаербаг … Я пользуюсь им.
…смотрите: (я не буду здесь подробно пояснять фотографии, ибо на это есть видео: ссыль в финале статьи) на фото нужно кликать…
…а если что-то непонятно, то посмотрите видео или пишите в комментариях – разберёмся.
Итак:
Посмотрите внимательно на то, что подчёркнуто зелёным.
Всё достаточно удобно: справа – нумерация строк элементов (будет просто отыскать в скрипте style css нужные примеры). Внимание: если у вас цель сменить цвет всех ссылок сайта скопом, просто заменяйте свойства селектора «а» на свои… color: ***** (подчёркнуто в самом низу справа)
Чуть выше – наш пример стилей ССЫЛКИ. Ну и в левом окне (то, что побольше) я обозначил сам уникальный класс, которым и определяется данная ссылка, кстати те классы, которые вам могут в последствии понадобиться, отыскиваются (или задаются) именно в левом окошке.
У меня, как видите, .readmore — у вас может быть присвоен другой id класс. А поэтому, вам останется только скопировать его (прямо из этого окошка: кликаете на него два раза; копируете и прописываете за место моего в своём файле стилей CSS).
Как отыскать уникальный id-класс? …проведите осторожненько курсором сверху вниз по всем прописанным скриптам в левом окошке «инструмента разработчика» и как только в основном окне браузера (на вашем сайте) нужная вам ссылка подсветится синеньким цветом — место расположения курсора и будет на ИМЕНИ id-класса.
Обращаю внимание: в вашей теме уже может быть присвоен уникальный класс ссылке «читать далее» так что вам только останется (если необходимо) заменить свойства стилистики цвета #000000 того селектора, который показан инструментом браузера.
Тем же, у кого эта ссылка имеет свойства «по умолчанию» то есть в файле стилей она регулируется как любая другая селектором «а» (этот пример обычно находится вверху документа стили css) но вам хочется задать ей более симпатичный и индивидуальный цвет, — тогда следует отыскать или присвоить свой уникальный id класс выбранной вами ссылке и прописать его на место показанного мною выше.Как это сделать:
Если у вас ссылка «Читать далее» была не «завёрнута» в div-класс (не имела уникального имени /селектора CSS, скажем так/), тогда её нужно «обернуть» и присвоить уникальное имя.
Например, открываете файл post.php, отыскиваете саму ссылку …#more- … и заворачиваете её в ДИВ класс
<div class="любое уникальное имя: на английском языке, у меня, как видите readmore">
<a ЗДЕСЬ ПОЛНЫЙ ПРИМЕР ССЫЛКИ… </a>
</div>
Точку перед уникальным классом, добавите только в стилях css.
О многом другом и интересном в следующих статьях…
Ну а теперь, как и говорил выше, предложу ещё один способ обозначения ваших сайтовых ссылок:
Видите справа ссылки иконку..? Почти как в Википедии…
И если хотите сделать себе так же, читайте мою статью Оформление внешних и внутренних ссылок CSS и визуальными иконками или смотрите видео… ссыль в статье.
Всё! …а вы тестируйте свою работу.
Online консультация по настройкам и созданию сайтов на WordPress
mihalica.ru !
Михаил ATs -