Как сделать иконку ссылкой

Оформление внешних ссылок визуальными иконками CSS

Сегодня я расскажу, как оформить иконками или цветом внутренние и внешние ссылки. Расскажу, а вы уж сами решайте, нужно это вам или нет. На мой взгляд, это удобно и красиво. Удобно тем, что ваш посетитель сайта сразу увидит какая перед ним ссылка – внешняя или внутренняя.

Всё просто! Это можно реализовать несколькими способами. Я вам покажу пару вариантов, а вы уж решайте. Внимательно изучите примеры, постарайтесь въехать в логику, а тогда уж все ваши желания станут вам по силам.

Как красиво оформить внешние ссылки свойствами CSS

Да что там: взгляните на фото чуть ниже. Увидели!? Да, именно так, например, в Wikipedia ссылки и оформлены.

Ну что! …если это нужное дело – вперёд.

Вся наша работа сведётся к использованию селекторов псевдоклассов after и before. И, конечно же, мы решим задачу по отделению внутренних ссылок от внешних. Собственно об этом ниже…

копируйте её и переносите к себе на сервер. У меня она располагается в папке с темой, в подпапке images. Как только перенесёте эту иконку к себе, смело можно считать что большая часть дела выполнена. Кстати скажу: иконку ссылки возможно заменить на любую другую, более симпатичную, или же вовсе за место неё прикрепить текст.

CSS Оформляем иконками внешние ссылки статей

Для этого вам потребуется открыть ваш файл стилей style.css (в WordPress он лежит в папке с используемой вами темой по адресу: … /wp-content/themes/Название темы/ ) и дописывайте в него подобный код:

Думаю, ясно, что мой домен в примере нужно заменить на свой, а так же и путь к файлу иконки.

А в остальном тоже, думаю, понятно. Но немного поясню: у меня все посты «обёрнутые» классом – контейнер post А ПОЭТОМУ Я И ДОБАВИЛ ЕГО К ТЕГУ «а». Иначе все ссылки ведущие за пределы вашего сайта будут тоже обозначены иконкой. В их числе, например, окажется и ссылка счётчика посещаемости, а это уже перебор в красЯвостях))

…теперь, после нашей работы, ваш сайт (его CMS) станет принудительно сравнивать все ссылки на вашем блоге, а к внешним, из проверенных, добавлять иконку. Ну, а та, посредством нашего примера, станет выводится рядом с текстом ссылки.

Последняя строка примера: padding-left:3px; – три пикса — это и есть расстояние отступа от текста внешней ссылки. (В вашей теме, класс КОНТЕНТА может быть иным. Это не страшно. Посмотреть его вы запросто сможете расширением, которое есть в любом браузере: клик по нужному элементу вашей вебстраницы правой кнопкой мыши… и выбор в подменю подобного пункта «Просмотр кода элемента». Посмотрите и всё станет ясно. А ещё для этих целей, и не только этих, есть отличный инструмент для web-мастеров — Фаербаг (о нём в следующем параграфе.

…если вас иконка не устраивает, — с лёгкостью вместо неё можно добавить какую-то надпись «Внешняя ссылка», например – просто замените содержимое свойства content …

…а коли есть желание заменить цвет ВНУТРЕННЕЙ ссылки от внешней, всё точно так же и подобно… простки-напрстки вместо словца content допишите нужные вам свойства CSS.
Если что неясно, спрашивайте в комментариях.

Источник

Иконка рядом с внешними ссылками

Перевод: Влад Мержевич

Пару недель назад я открыл код JSFiddle от CSS Wizardry в моём браузере. Я продолжаю думать об этом, потому что до этого получил от кого-то письмо, где по сути спрашивали то же самое, и эта идея застряла у меня в голове. Они хотели вставить иконку рядом со ссылкой и использовать для этого только CSS. К сожалению, я не нашел способа сделать именно так, но с помощью некоторого jQuery мы можем добиться результата довольно легко.

«Я хочу» только технику CSS

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

И тогда вы могли бы вставить фоновое изображение иконки с помощью сервиса вроде getFavicon.

Может быть код будет не именно таким, но похожим. Дело в том, что вы не можете смешивать синтаксис url() с другими частями CSS.

Сервис Google Favicon

У Google есть свой собственный сервис иконок, который вы можете использовать. К примеру:

Хитрость в том, что нужно только имя хоста, домен верхнего уровня и больше ничего. Я поискал и нашёл простое регулярное выражение для получения их из любого URL. Нам это требуется, потому что ссылки не всегда (даже как правило) ведут на корень сайта.

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

Затем @Travis напомнил мне, что вы можете просто использовать this.hostname вместо вычурных регулярных выражений. Итак:

Я не уверен, что все браузеры поддерживают hostname и насколько это лучше чем href точно не знаю.

Метод getFavicon

@seanodotcom показал мне еще один подобный сервис называемый getFavicon. Он основан на Google AppEngine, но это не собственный сервис Google. Я считаю, что он работает немного медлено. Но преимущество в том, что вам не придется иметь дело с именами хостов вообще, вам достаточно указать URL.

И вот что получается:

Производительность?

Уверен, вы знаете о том, что количество HTTP-запросов страницы оказывает огромное влияние на производительность. Каждое небольшое изображение создаёт новый запрос на странице.

@yuritkanchenko указал мне замечательный сервис иконок, который может автоматически собирать значки для вас в один запрос.

Боюсь, я не смогу сделать лишние шаги и написать необходимый JavaScript для нахождения всех ссылок, объединения доменов, создания запроса, а затем получения изображения. Но уверен, вы справитесь с этим довольно быстро, если вам это действительно нужно.

Источник

Как сделать иконку для сайта — favicon

Здравствуйте уважаемые начинающие веб-мастера. Продолжим тему Первичная оптимизация.

Как сделать сайт узнаваемым, среди миллионов других? Ведь даже его название, может иметь кучу близнецов.

Конечно же сделать для него иконку-favicon, которая будет отображаться в поиске, и во вкладке браузера перед названием Вашего ресурса.

Сделать favicon необходимо сразу после вывода сайта в интернет, так как по, только поисковым системам известным причинам, время появления Вашей иконки, может растянутся на довольно значительный срок.

Иконку можно сделать двумя способами:

2. С помощью специального сервиса.

Давайте рассмотрим оба эти способа, и начнём по порядку, с самостоятельного решения вопроса.

Сначала о трудностях. Favicon — это как правило изображение, и изображение очень маленькое. Размеры его составляют 16 х 16, или 32 х 32 пикселя.

Если делать его из картинки, то нужно подбирать изображение, примерно такого же размера.

В противном случае, сильное сжатие, в несколько раз, может заметно отразится на качестве, и картинка на иконке, приобретёт вид подмоченной этикетки.

К достоинствам можно отнести то, что этим способом, можно создать favicon с фигурными очертаниями. Но это слишком сложно, и по силам только продвинутым дизайнерам.

Второй же способ намного проще, и его использует подавляющее большинство владельцев сайтов.

Заключается он в использовании сервиса по созданию иконок.

Найти такой сервис очень просто. Достаточно ввести в поисковой строке браузера запрос «Сделать favicon», как вам откроется куча предложений.

Заморачиваться по поводу того, которое из них выбрать — не стоит. Все они делают одно и то же.

Ваша задача, будет заключаться в выполнении четырёх несложных действий.

1. Выбрать картинку и загрузить её в сервис (Кнопка «Загрузить файл»).

2. Выбрать размер иконки (Кнопка «Создать favicon»).

4. Загрузить полученный файл, в корневую папку сайта.

Первые два пункта никакой сложности не представляют вообще. Единственный совет, который хотелось бы дать — это выбирайте картинку всё же поменьше, и с одинаковыми высотой и шириной.

Чем ближе будет размер начального элемента, тем меньше будет искажений в готовом.

И, так как мой материал предназначен для самых начинающих, то давайте более подробно пройдёмся по третьему и четвёртому пунктам.

Начнём с того, что Мы нажали «Скачать favicon.ico». Что и как с ним делать дальше?

После этого откроется окно поисковика, в котором нужно нажать «Сохранить». Но прежде чем это сделать, посмотрите в какую папку сохраняется файл, чтоб не искать его потом по всему компьютеру.

Если он сохраняется куда либо в систему, такое тоже бывает, то лучше изменить место, выбрав «Документы», или любую другую пользовательскую папку.

После сохранения, щёлкнем по файлу правой правой клавишей, и просканировав его анти вирусом, перейдём в «Свойства».

В зависимости от настроек Вашего компьютера, файл может быть заблокирован, и в Свойствах Вы увидите вот такое сообщение:

Нажимаем «Разблокировать», и «ОК», после чего системное окно закроется.

Открываем его снова, щёлкнув по файлу правой клавишей, и выбрав «Свойства». Информация в окне должна выглядеть вот так.

Теперь можно устанавливать иконку на Ваш сайт. Для этого обязательно нужно использовать FTP соединение.

Если Вы послушались моих советов в предыдущих статьях, и выбрали хостинг Бегет, то достаточно будет щёлкнуть по «Файловый менеджер», в панели управления Вашего аккаунта.

Оказавшись в каталоге, выбираем Ваш сайт, затем «public.html», затем «Загрузить», далее выбрать, и выбираем, полученный нами favicon.

После чего ещё раз нажимаем загрузить, и после того, как напротив файла появится зелёный значок, закрываем окно загрузок.

Теперь можно просмотреть каталог, чтоб убедится, что файл favicon с расширением ico, в нём появился, и начинать с нетерпением ждать, когда же название Вашего сайта, украсится красивой иконкой.

Желаю творческих успехов.

Перемена

Жена — мужу.
-Дорогой, я не хочу-у-у к маме.
-Молчи и копай.

Источник

Оформление внешних и внутренних ссылок

Посещяя сайты я хотел бы, чтобы все на них было наглядно и понятно, а поскольку мне иногда приходиться делать дизайн сата я предлагаю в этом небольшую помощь. Здесь я опишу свои соображения по поводу обозначения некоторых видов ссылок. Считаю этот топик больше всего будет полезным для начинающих веб-дизайнеров.

Внешние ссылки

По моему мнению, внешние ссылки стоит выделить в отдельную группу, и они не могут идти ни на ровне с ссылками, указывающими на внутренние страницы сайта, ни на внутренние ссылки. Поэтому, хотя бы ради удобства пользователей, их следует выделять. Способов выделения ссылок немного, это может быть: выделение другим цветом или добавление маленькой иконки рядом с ссылкой. Рассмотрим их поподробнее.

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

Недостаток этого способа в том, то что он работает на стороне сервера, но я вижу его наиболее
оптимальным.

Добавление к ссылке иконки
Здесь реализовать этот прием можно одним или сразу двумя способами: также регулярными выражениями (просто добавив ко второй части функции код-изоображения) и с помощью JavaScript. Я использую jQuery, так что приведу пример на нем. Предварительно проведем наши ссылки через регулярное выражение и зададим им класс outsite, дальше используем jQuery:

$(«.outsite»).append(««);

Результат:

Если Вы считаете нужным, можно добавить target=»_blank».

Внутренние ссылки

Я очень мало видел сайтов, на которых как-либо можно опознать внутренние ссылки. А ведь это упущение часто вводит в затруднение, или пользователь просто пропускает эти ссылки. Опять же я существуют два, наиболее оптимальных способа выделить внутренние ссылки.

Иконка
Иногда это бывает просто необходимо 🙂

Источник

Как сделать иконку для сайта

Если театр начинается с вешалки, то любой уважающий себя сайт — с иконки. Шутки-шутками, но иногда по наличию и качеству иконки сайта судят о самом ресурсе. Да и отображение иконки в результатах поискового запроса поможет выделить сайт среди остальных.

В любом случае, нелишним будет знать, как создать, установить и изменить иконку. Об этом и поговорим.

Создание фавикона с помощью онлайн-сервисов

Иконку, или фавикон (от английского favorites icon) легче всего создать, используя популярные бесплатные сервисы.

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

Сделать фавикон для сайта можно, используя любой графический редактор. Если уже есть готовая картинка (например, эмблема компании), ее стоит лишь подготовить и уменьшить. Если же нужно создать рисунок «с нуля» — сервис «фавикон» предлагает воспользоваться элементарной, но довольно удобной программой рисования иконок.

Итак, иконка загружена или нарисована. Для того, чтобы получить готовое изображение, достаточно нажать кнопку «Скачать favicon» в правом нижнем углу страницы. В результате загрузится файл favicon.ico.

Фавикон и Фотошоп

Может получиться, что версия программы обработки изображений не будет поддерживать этого формата. В таком случае следует поискать и скачать плагин формата ico. Его нужно распаковать в папку Plug-InsFileFormats. После этих нехитрых действий возможность сохранения в данном расширении будет доступна.

Небольшой совет. Практически все браузеры стандартизируют иконки сайтов до размера 16 на 16 пикселей. Учитывая это, не нужно создавать высокохудожественные полотна — их просто-напросто не будет видно.

Формат ico используется наиболее часто, так как он поддерживается всеми популярным браузерами. Можно сохранять изображения и в других графических форматах, но важно помнить, что некоторые браузеры не будут отображать такую иконку.

Установка иконки

Заветный фавикон получили. Следует подумать, как поставить иконку на сайт. Для этого нужно загрузить файл изображения в корневую директорию сайта (обычно она носит название public_html).

Но это еще не все. Для отображения иконки нужно прописать следующий html-код:

В графе «type» важно правильно указать тип изображения. То есть, если используется картинка формата GIF, код будет выглядеть так:

Этот код устанавливается в любом месте между тегами и файла главной страницы.

Как установить иконку на сайт, мы разобрались. Проверить правильность установки можно, просто введя в строке браузера адрес своей страницы. Если слева от адреса отображается фавикон — все сделано верно.

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

Замена иконки

Если фавикон на сайте уже есть, но он не устраивает владельца ресурса, нужно разобраться, как изменить иконку сайта. По сути, ничего сложного в этом нет — схема замены идентична добавлению иконки на сайт. То есть, сначала рисуется картинка, сохраняется в заранее определенном формате. Полученное изображение загружается в корневую папку сайта, изменяется или заново прописывается html-код (в случае небоходимости). Если все сделано верно, браузер будет отображать новую иконку сразу после обновления страницы.

Таким образом, чтобы найти ответ на вопрос, как поменять иконку сайта, следует прочитать этот материал заново. 🙂

Источник