Фоновое изображение
Ник Эстимата
Ник Эстимата
Ник Эстимата
- Счётчик яндекса кажет где-то больше в 8 раз. liveinternet не изменяет свои показания.
- ЯндексВебмастер сегодня прислал письмо. За неделю количество кликов уменьшилось на 88. Но, самое главное, там их очень мало... Чем должно быть по сравнению с счётчиком.
- ЯндексМетрика показывает что увеличилось число роботов до 70 с лишним процентов. И увеличилось количество заходов с смартфонов.
Себекхотеп III
Ник Эстимата
Себекхотеп III
Кстати, у меня вроде получилось поставить разный фон на ПК и мобильную версию.
Починитесь, обращайтесь подскажу, если, конечно у вас простой шаблон.
Ник Эстимата
Себекхотеп III
Насчёт счётчика вообще ничего подсказать не могу, полный ноль в этом. У самого Яндекс Метрика вроде работает нормально, а вот Google Аналитика так и висит — "Завершить настройку".
Чего ему ещё надо, вообще не пойму, вроде всё сделал, что просил, но всё равно показывает, что настройка не окончена. Короче, плюнул на это дело.
Ник Эстимата
Ник Эстимата
Себекхотеп III
не могли бы вы описать как сделали разный фон на ПК и мобильной версии?
Себекхотеп III
Здравствуйте. Попробую рассказать.
Но я вместо картинки в мобильном шаблоне для фона выбрал просто заливку нужным
мне цветом. Вы же, конечно, можете выбрать для своего шаблона картинку. Просто
рассказывать буду на примере своего шаблона, а у меня, повторюсь, просто фоновая заливка
цветом. И да, шаблон у меня простой, так что это тоже нужно учитывать.
Короче, первым делом, естественно, сохраняем шаблон, на
случай всяких косяков, чтобы всегда можно было восстановиться и всё вернуть
назад.
Дальше открываем его и крутим до строки: <Variable
name="body.background"… (смотрим скриншот):
Там находим свою ссылку на картинку и копируем всё что подчёркнуто красным на скриншоте и где-нибудь сохраняем, после чего всё это полностью удаляем из этого места.
Крутим ниже до блока /* Content
Там находим свойство background: и задаём цвет нашего фона (пока картинка подгружается, будет отображаться он).
А вот теперь ниже вставляем нашу ссылку на картинку, которую мы предварительно сохранили, со всеми атрибутами, которые шли после неё (как на скриншоте).
После добавляем ещё одно свойство background-size: contain; (масштабирует нашу картинку, чтобы она полностью заполняла экран)
Крутим ещё немного ниже и настраиваем тени (этот шаг вы можете пропустить):
Он нужен для того, чтобы между фоновой картинкой и самим блогом (контентом) не было чётких границ, а воспринималось как одно целое. Просто, допустим, у меня фоновая картинка и сам блог в одних цветах, так вот чтобы границ между ними не было, надо убрать тени. Если вам тоже актуально, просто делайте, как на скриншоте, если нет, крутите шаблон ниже.
Доходим до блока /* Mobile
И вот тут уже нам нужно вставить вот такой код:
@media (max-width: 768px) {
body {
background-image: url();
}
}
Если код оставить так, то в мобильном шаблоне фоном будет идти тот цвет, который вы задали выше, а если хотите картинку, то вставьте ссылку на неё вот сюда background-image: url(); (между скобочек).
Цифры 768 — это разрешение экрана мобилок, то есть, если разрешение экрана мобилки будет меньше, будет показана ваша картинка для мобилки или цвет, что вы задали, если больше, то будет показана картинка, которую вы выбрали для ПК версии.
Ну и ниже на скриншоте шаг, который вы тоже можете пропустить, если не хотите убирать тени. Если же границы не нужны, то убираем тени, делаем всё, как на скриншоте.
P. S. Вы писали, что у вас сам мобильный шаблон не работает, может вам сначала придётся его восстановить. Если что попробуйте сначала в блоке /* Mobile заменить весь свой код на этот:
body.mobile {
background-size: $(mobile.background.size);
}
.mobile .body-fauxcolumn-outer {
background: $(mobile.background.overlay);
}
.mobile .body-fauxcolumn-outer .cap-top {
background-size: 100% auto;
}
.mobile .content-outer {
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);
}
.mobile .tabs-inner .widget ul {
margin-left: 0;
margin-right: 0;
}
.mobile .post {
margin: 0;
}
.mobile .main-inner .column-center-inner .section {
margin: 0;
}
.mobile .date-header span {
padding: 0.1em 10px;
margin: 0 -10px;
}
.mobile h3.post-title {
margin: 0;
}
.mobile .blog-pager {
background: transparent none no-repeat scroll top center;
}
.mobile .footer-outer {
border-top: none;
}
.mobile .main-inner, .mobile .footer-inner {
background-color: $(content.background.color);
}
.mobile-index-contents {
color: $(body.text.color);
}
.mobile-link-button {
background-color: $(link.color);
}
.mobile-link-button a:link, .mobile-link-button a:visited {
color: $(mobile.button.color);
}
.mobile .tabs-inner .section:first-child {
border-top: none;
}
Этот код из чистого простого шаблона, ещё до всех изменений. Ну и, естественно, в настройках блога всё как на скриншоте выставить:
Вроде всё, надеюсь у вас получится.
Ник Эстимата
Себекхотеп III
Себекхотеп III
Ник Эстимата
Спасибо, но я за эти несколько дней уже привык и, вроде как, неплохо получилось. Поэтому не надо.
Себекхотеп III
Ник Эстимата
Себекхотеп III
А так можно, наверно, поставить не 768, а другие цифры, попробуйте 1920.
Ник Эстимата
Себекхотеп III
Если да, то в том месте, которое указано на втором скрине, попробуйте удалить в строке: repeat-x fixed bottom center свойство bottom.
Ну или попробуйте заменить всю строку на эту: repeat scroll top center;
Ник Эстимата
Себекхотеп III
Остальное вроде всё нормально, но опять же я сужу по исходному коду вашего блога, сам шаблон-то я не вижу, а там могут некоторые вещи быть по другому.
Попробуйте, короче, 1 и 2 скриншот досконально выполнить, остальное оставьте всё как есть, ничего не трогайте.
Ник Эстимата
Ник Эстимата
В общем, для того, чтобы снять запрет на масштабирование страницы в мобильной версии, заходим в шаблон, почти в самом начале ищем строку:
<meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/>И удаляем из неё два атрибута:minimum-scale=1.0,maximum-scale=1.0Должна остаться вот такая строка:<meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0" : "width=1100"' name='viewport'/>Вроде всё, смотрите скриншот, если что непонятно:P. S. Атрибуты minimum-scale=1.0, maximum-scale=1.0 необязательно удалять, можно просто задать свои значения масштабирования.Значения принимаются от 0.1 до 10. Значение 1.0 задаёт отсутствие масштабирования.
Так что, если хотите, можете поиграться с цифрами и задать свои параметры насколько у вас можно увеличивать контент в мобильной версии.
Мне было лень играться с этим, и я у себя их просто удалил.четверг, 9 ноября 2023 г. в 16:25:50 UTC+3, liko...@gmail.com:
