Содержание как ссылка html

Как сделать содержание (оглавление, меню) для статьи на сайте?

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

Такое меню в статьях вы, наверное, уже неоднократно встречали у меня на SEO Блоге Лентяйки и на других сайтах. Сложно ли сделать такую фишку? Очень просто!

Преимущества краткого содержания в статье

Содержание статьи решает сразу несколько задач.

• Читатель с первого взгляда может понять, о чем статья, и решит ли она его проблему.
• Читателю удобно перемещаться по смысловым блокам текста.
• Внимание посетителя может зацепить какой-нибудь пункт меню в оглавлении, и он задержится на странице.
• В содержании статьи можно использовать ключевые фразы, под которыми продвигается статья. Нередко фрагмент краткого содержания попадает в сниппет поисковой выдачи. И смотрится он там очень эффектно!

Как сделать содержание статьи в блоге: код оглавления

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

Там хранится код для вывода содержания статьи. Вот он.

Я его просто вставляю в начале статьи в редакторе WordPress в режиме HTML. При переключении между визуальным редактором и HTML редактором он никуда не пропадает.

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

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

Код якоря рядом с подзаголовком такой:

Просто вставляю этот код якоря перед той строчкой, к которой хочу перенести читателя моего повествования.

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

Стандартный нумерованный список выводят так:

список с цифрами
1. пункт 1
2. пункт 2
3. пункт 3
4. пункт 4
5. пункт 5

Для списка оглавления задан конкретный стиль с помощью идентификатора:

Это значит, что в файл style.css нужно добавить конкретное правило отображения блока с оглавлением статьи. Тогда у сдержания статьи появится приятный фон и любые финтифлюшки, какие вы захотите. Чуть ниже, я объясню, как это сделать.

В каждом конкретном пункте меню содержится ссылка на ярлык:

Каждой ссылке на ярлык соответствует конкретный ярлык в тексте:

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

Вроде все просто объяснила. Если есть вопросы – задавайте в комментариях.

Если все понятно, то нам осталось только настроить стиль содержания статьи.

Как сделать красивое содержание статьи: прописываем стили

Открываете в админке WordPress «Внешний вид» – «Редактор».

Там, где описываются стили нумерованных и маркированных списков, вставляете код, описывающий правила стиля оглавления статьи.

У меня на блоге такие правила:

ol#sod < padding: 0px 20px 10px 51px; margin: 0.5em 0 0em 1em; color: #2E2E2E; list-style-type: none; background: #CCFFFF; border-left: #66FFCC 4px solid; display: inline-block; >ol#sod li<> ol#sod li:before

Для вашего дизайна вы можете прописать другие правила: изменить цвет, отступы, шрифты, – все, что захотите.

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

Если вы совсем ничего не понимаете в style.css, то просто вставьте код стиля меню статьи в конец файла. Он все равно будет работать.

В общем, вы сохранили файл style.css, отредактировали статью и обновили страницу на сайте. Получилось у вас красивое содержание статьи? Расскажите мне в комментариях! Мне будет приятно, что я кому-то помогла сделать краткое оглавление статьи в блоге.

Ну, а если вам понравилось наводить красоту у себя на сайте, то вы еще можете поколдовать с дизайном:

Запись опубликована автором Вероника в рубрике Создание сайта с метками дизайн. Добавьте в закладки постоянную ссылку.

Для отправки комментария вам необходимо авторизоваться.

Источник

Как сделать содержание (оглавление) в статье сайта/блога | HTML5

Код блока с содержанием, где href у ссылок точно такой же как id заголовков, за исключением символа #:

Как сделать нумерованное содержание в статье сайта

Всё тоже самое, только ul нужно заменить на ol

Многоуровневый нумерованный список HTML

Здесь уже нужна помощь CSS

Логика призывает к такому построению тегов в статье

Четверостишия
 
Бычок
 Идет бычок, качается, Вздыхает на ходу: - Ох, доска кончается, Сейчас я упаду! 
Зайка
 Зайку бросила хозяйка - Под дождем остался зайка. Со скамейки слезть не мог, Весь до ниточки промок. 
Мишка
 Уронили мишку на пол, Оторвали мишке лапу. Все равно его не брошу - Потому что он хороший. 
Стихи

Подсвечивание разделов, к которым был сделан переход на CSS

При переходе к четверостишию «Зайка» страница не перематывается к началу стиха (см. тут). Чтобы более явно обозначить секцию, можно использовать псевдокласс :target .

  
  
 
Бычок
 
Идет бычок, качается, Вздыхает на ходу: - Ох, доска кончается, Сейчас я упаду!
 
Зайка
 
Зайку бросила хозяйка - Под дождем остался зайка. Со скамейки слезть не мог, Весь до ниточки промок.
 
Мишка
 
Уронили мишку на пол, Оторвали мишке лапу. Все равно его не брошу - Потому что он хороший.
 

Фиксированное сверху меню и отступ от края окна браузера

Хэш-ссылка отматывает страницу к верхнему краю тега соответствующего id. Отчего получается, что фиксированное сверху меню закрывает часть элемента, в моём случае заголовок. Вот так.

Чтобы страница прокручивалась несколько выше элемента, нужно прописать тегу псевдоэлемент :before

Фиксированное меню, в т.ч. для сайтов с параллакс эффектом, с подсветкой текущего пункта

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

   
Бычок
 
Идет бычок, качается, Вздыхает на ходу: - Ох, доска кончается, Сейчас я упаду!
 
Зайка
 
Зайку бросила хозяйка - Под дождем остался зайка. Со скамейки слезть не мог, Весь до ниточки промок.
 
Мишка
 
Уронили мишку на пол, Оторвали мишке лапу. Все равно его не брошу - Потому что он хороший.
   

var linkNav = document.querySelectorAll('[href^="#nav"]'), V = 2; // скорость, может иметь дробное значение через точку for (var i = 0; i < linkNav.length; i++) < linkNav[i].onclick = function()< var w = window.pageYOffset, hash = this.href.replace(/[^#]*(.*)/, '$1'); t = document.querySelector(hash).getBoundingClientRect().top, start = null; requestAnimationFrame(step); function step(time) < if (start === null) start = time; var progress = time - start, r = (t < 0 ? Math.max(w - progress/V, w + t) : Math.min(w + progress/V, w + t)); window.scrollTo(0,r); if (r != w + t) else > return false; > >