Допустим, что у нас есть некий абзац на сайте, который включает в себя номер телефона или любой другой текст, который мы хотим скрыть. Например:
Hello 80974658562 Hello
Данный абзац лежит на белом фоне (background: #fff;), который записан в таблицах CSS сайта, и нам нужно сделать так, чтобы текст сам остался, а номер телефона сделать невидимым, т.е. скрыть часть текста на сайте без ущерба дизайна. Как это сделать, я расскажу в этой в статье.
Возможно, у вас возник вопрос, а зачем это нужно? Можно ведь просто закрасить текст белым цветом и его будет не видно?
Да, но такой метод позволит сделать текст невидимым только на первый взгляд. Ведь выделив этот белый фон, текст сразу проявится. Я же предлагаю поступить иначе, и расскажу вам, как скрыть текст в HTML посредством различных свойств CSS. А если вы хотите узнать больше про HTML/CSS, то посмотрите, какие сейчас есть курсы по верстке сайтов (рекомендую эту ссылку https://kurshub.ru/luchshie-kursy-po-verstke-sajtov/ )
Способ 1. Как сделать текст невидимым в html на вашем сайте?
Пожалуй, это самый простой способ и безопасный для поисковиков, как мне кажется. Итак, нужно просто этот текст, а точнее наш номер телефона, закинуть в слой. Например, подложить его под фон. Делается это так:
|
1
|
Hello <span style="position: relative; z-index: -1;">80974658562</span> Hello
|
В результате получаем такой вот текст с пустым пробелом внутри.
Hello 80974658562 Hello
Мы видим, что номер телефона скрылся за белым фоном сайта, и между словами образовался пробел. Все потому, что стоит «position: relative;»
Чтобы не было этой пустоты между словами, можно прописать «position: absolute;» — получиться вот такой код:
|
1
|
Hello <span style="position: absolute; z-index: -1;">80974658562</span> Hello
|
Результат будет таким уже:
Hello 80974658562 Hello
Способ 2. Как сделать невидимый текст на сайте без использования слоев?
В таком случае можно использовать смещение текста за пределы видимой области. Делается это так:
|
1
|
Hello <span style="position: relative; left: -2001px; width: 2001px;">80974658562</span> Hello
|
В результате мы получим с виду такой же текст с пустым пробелом внутри.
Hello 80974658562 Hello
Аналогично, как и в предыдущем способе можем поменять позиционирование блока на «position: absolute;» — получиться вот так:
|
1
|
Hello <span style="position: absolute; left: -2001px; width: 2001px;">80974658562</span> Hello
|
И получим наш конечный вариант:
Hello 80974658562 Hello
Способ 3. Как скрыть текст на сайте посредством CSS?
Данный способ подразумевает скрывание всего блока. Многие программисты считают, что такую технику не очень любят поисковые системы. Но я должна сказать, что в современных сайтах «display: none;» используется повсеместно. Делаем мы это так:
|
1
|
Hello <span style="display: none;">80974658562</span> Hello
|
Результат будет таким:
Hello Hello
Получается довольно удобно, поскольку нам не нужно прописывать позиционирование, номер телефона уже сам скрылся.
Способ 4. Еще один альтернативный вариант, как сделать текст невидимым в CSS
Данный способ подобен предыдущему, но здесь уже используется атрибут «visibility: hidden;» — т.е. видимость с установленным свойством как скрытое. Вот пример:
|
1
|
Hello <span style="visibility: hidden;">80974658562</span> Hello
|
Результат будет такой:
Hello Hello
Правда в данном способе уже нужно будет прописать позиционирование, чтобы получилось вот так:
|
1
|
Hello <span style="position: absolute; visibility: hidden;">80974658562</span> Hello
|
Результат будет такой:
Hello Hello
На самом деле, существует еще очень много способов, но эти 4 на мой взгляд самые простые. Теперь вы знаете, как можно скрыть ненужный текст на сайте или сделать его невидимым для читателя. И легко можете использовать такие манипуляции не только на сайтах, но и даже на некоторых форумах. Например, чтобы спрятать ссылку.
Спасибо, все четко и понятно
А мне как сделать невидимый текст на сайте если я ничего не понимаю вэтом html и куда писать эти буквы и цифры
подскажите пожалуйста
Виталина, «буквы и цифры» — это код. Все файлы с кодом сайта лежат у вас на хостинге в папке с адресом сайта. Однако для работы с ними вам нужно изучить хотя бы основы html и css, поэтому я бы рекомендовала вам обратиться лучше к вашему программисту, ну или ко мне. Я помогу вам.
Но, если вы желаете попробовать сделать это самостоятельно, то вот что нужно:
1) Если у вас сайт простой и сделан на html, то вам нужно найти страницу на хостинге с расширением .html, где находится ваш текст, который вы хотите скрыть. Например, главная страница будет index.html. Там в нужном вам месте вставьте любой из 4-х вариантов кода из данной статьи. А вместо номера телефона в этом коде, который у меня подсвечивается красненьким, вставьте ваш текст, который вы хотите спрятать.
2) Если у вас сайт на CMS, например, на WordPress, тогда вам на хостинг заходить не надо, просто зайдите в административную панель вашего сайта и перейдите на статью, нажмите редактировать запись. Далее перейдите в панель редактора HTML, это может быть кнопка «html», «Код», «Текст». Ну, а далее поступайте как я описывала в 1) пункте.
Спасибо большое, все четко и без воды.
А санкций за такое сокрытие текста от поисковых систем не последует?